Tree View and Navigation
Learn how to navigate and manage translations using the hierarchical tree view
Tree View and Navigation
MovaBase provides an intuitive hierarchical tree view that organizes your translations into a logical structure, making it easy to navigate, manage, and work with complex translation projects.
Overview
NEEDS_MEDIA
The tree view displays your translations in a hierarchical structure that mirrors your application's organization:
- Nested Structure: Dotted notation creates nested folders (e.g.,
header.nav.home) - Expandable Folders: Click to expand or collapse sections
- Visual Indentation: Clear visual hierarchy showing nested levels
- Tree Navigation: Easy navigation between different sections
- Folder Selection: Select entire folders for bulk operations
- Dynamic Updates: Tree updates automatically when translations change
The tree structure is automatically generated from your translation keys. Keys using dotted notation (dot-separated paths) create the hierarchical structure automatically.
Understanding Tree Structure
How Tree Hierarchy Works
Translation keys with dotted notation create a nested folder structure:
header.nav.home → header/
└── nav/
└── home
header.nav.about → header/
└── nav/
└── about
settings.profile → settings/
└── profile
settings.account → settings/
└── accountUse meaningful, hierarchical keys to create an intuitive tree structure that matches your application's organization.
Tree Node Types
The tree view consists of two types of nodes:
| Node Type | Icon | Description | Actions |
|---|---|---|---|
| Folder | Folder | Represents a grouping of translations (e.g., header.nav) | Expand/collapse, select for bulk operations |
| Translation | KeyRound | Individual translation key with its value | Edit, delete, view history |
Tree Levels
Tree depth is determined by the number of dots in your translation keys:
| Key | Levels | Structure |
|---|---|---|
home | 0 | Root level |
header.home | 1 | header/ → home |
header.nav.home | 2 | header/ → nav/ → home |
header.nav.links.home | 3 | header/ → nav/ → links/ → home |
Avoid excessive nesting depth (more than 4-5 levels) as it can make navigation difficult. Consider flattening your structure if keys become too deeply nested.
Navigating the Tree
Expanding and Collapsing Folders
Identify Expandable Nodes
Folder nodes display icons indicating their state:
- ChevronRight (→): Collapsed folder
- ChevronDown (↓): Expanded folder
- Folder Icon: Visual representation of the folder
Expand a Folder
Click on a collapsed folder to reveal its contents:
- Click anywhere on the folder row
- Or click specifically on the chevron icon
- The folder expands to show children
- Icon changes from ChevronRight to ChevronDown
Expanding a folder shows all immediate children. Nested folders within must be expanded separately.
Collapse a Folder
Hide folder contents to reduce visual clutter:
- Click on an expanded folder
- Children are hidden from view
- Icon changes back to ChevronRight
- Folder remains selected or deselected based on previous state
Expand/Collapse All
For quick navigation, use bulk operations:
- Right-click (context menu) on any folder
- Select "Expand All" or "Collapse All"
- All folders at that level and below are affected
NEEDS_MEDIA
Browsing Translations
Navigate through your translations using the tree:
- Top-Level Navigation: Start with main sections (e.g.,
header,settings) - Drill Down: Expand folders to reveal nested content
- Jump to Key: Use search to find specific translations
- Back Navigation: Collapse folders to move up the hierarchy
The tree view maintains your expanded/collapsed state as you navigate, making it easy to return to previous views.
Working with Tree Selection
Folder Selection
Select entire folders to apply operations to all contained translations:
Bulk Operations on Folders
Apply operations to entire folder hierarchies:
| Operation | Effect | Use Case |
|---|---|---|
| Bulk Delete | Delete all translations in folder | Removing deprecated features |
| Bulk Export | Export all translations in folder | Sharing specific sections |
| Bulk Edit | Edit translations in folder | Updating terminology |
Bulk operations on folders affect all translations at all nested levels. Always verify your selection before confirming.
Tree View in Different Modes
File-Based Mode
In file-based mode, the tree structure includes file organization:
📁 en/
📄 common.json
📁 header
🔑 header.nav.home
🔑 header.nav.about
📄 auth.json
📁 login
🔑 login.title
🔑 login.buttonFeatures:
- Files appear as parent nodes in the tree
- Translations are nested under their respective files
- Each file maintains its own hierarchical structure
Language-Based Mode
In language-based mode, translations are organized only by language and key structure:
📁 en.json
📁 header
🔑 header.nav.home
🔑 header.nav.about
📁 login
🔑 login.title
🔑 login.buttonFeatures:
- Single file per language appears as root node
- No file-level intermediate nodes
- Simpler, flatter hierarchy
The tree view automatically adapts to your project's download mode, displaying the appropriate structure.
Tree View Features
Visual Indicators
The tree view uses visual cues to convey information:
| Indicator | Meaning | Location |
|---|---|---|
| Folder Icon | Grouping of translations | Left side of folder rows |
| Key Icon | Individual translation | Left side of translation rows |
| ChevronRight | Collapsed folder | Left of folder name |
| ChevronDown | Expanded folder | Left of folder name |
| Indentation | Nested hierarchy | Left padding (24px per level) |
| Checkbox | Selection state | Right side of rows |
Tree Controls
Access additional tree features through context menus and controls:
Best Practices
Organizing Translation Keys
- Use Meaningful Hierarchy: Structure keys to match application sections
- Consistent Naming: Use similar naming patterns across sections
- Logical Grouping: Group related features together
- Appropriate Depth: Keep nesting to 3-4 levels maximum
Good key organization makes the tree intuitive and easy to navigate for your entire team.
Key Naming Conventions
Navigation Workflow
Start at Top Level
Begin with the main sections you need to work on
Expand Selectively
Only expand folders relevant to your current task
Use Search for Deep Keys
For deeply nested translations, use search instead of drilling down
Collapse When Done
Collapse folders after finishing to maintain a clean view
Save State if Needed
Use browser bookmarks or note important key paths for quick access
Team Collaboration
Troubleshooting
If you're having trouble navigating the tree, try collapsing all folders and searching for the specific translation you need.
Common Issues
| Issue | Cause | Solution |
|---|---|---|
| Can't find translation | Deep nesting or wrong key | Use search instead of tree navigation |
| Tree too cluttered | Too many folders expanded | Collapse all and expand selectively |
| Can't select folder | Translations already selected | Deselect individual selections first |
| Slow performance | Very deep tree or many nodes | Use filters to reduce visible content |
| Wrong structure | Inconsistent key naming | Refactor keys for consistency |
Performance Tips
Keyboard Shortcuts
Navigate the tree efficiently using keyboard shortcuts:
| Shortcut | Action | Context |
|---|---|---|
| Right Arrow / Left Arrow | Expand/collapse selected folder | Tree navigation |
| Down Arrow / Up Arrow | Move to next/previous row | Tree navigation |
| Enter | Expand/collapse folder | Tree navigation |
| Space | Select/deselect row | Tree navigation |
| Home | Jump to first row | Tree navigation |
| End | Jump to last row | Tree navigation |
| Ctrl/Cmd + F | Focus search | Global |
| Esc | Clear selection/focus | Tree navigation |
Practice using keyboard shortcuts for faster navigation, especially when working frequently with the same sections.
Advanced Features
Tree State Persistence
The tree view remembers your expansion state:
- Session Persistence: State persists during your session
- Page Refresh: State is maintained across page refreshes
- Browser Close: State is reset when closing the browser
- Multiple Projects: Each project maintains its own state
Linked Project Trees
When projects are linked, the tree view shows content from both projects:
Search Integration
The tree view integrates seamlessly with search:
Next Steps
Now that you understand tree view and navigation, you can:
- Set Up Bitbucket Integration: Configure automatic syncing with your repository
- Manage API Keys: Set up programmatic access for your workflows
- Configure User Roles: Control team access and permissions
- Use Download Features: Export translations in various formats
Part 10 of 14 • Tree View and Navigation Complete
Next: Bitbucket Integration