Hierarchy depth
Use a simple NavigationMenu for a short list and TreeView for a genuinely nested structure.
Navigate a workspace
Pair a stable hierarchy with a focused detail view.
Move between records while keeping the context.
Use for a document browser, customer workspace or service console where a persistent navigation pane supports a focused detail area.
- 01Keep the hierarchy visible.
- 02Resize or collapse supporting content.
- 03Return without losing the draft.
Design beyond the happy path.
Select a state to see what the interface should communicate. These are illustrative snapshots; try the live component below.
EXAMPLE WORKSPACEBrowse
Customer workspace
Customers / Atlas Labs
- Navigation
- Atlas Labs · selected
- Details
- Account overview
DESIGN INTENT
Browse
Highlight the active destination and keep its name in the content heading. Navigation should explain where the person is.
Try the working example ↓EXAMPLE WORKSPACEResize
Room for the task
Navigation and details share the available width.
- Navigation
- Narrower
- Details
- More reading room
DESIGN INTENT
Resize
Choose useful minimum widths. Keep both panes usable and expose the divider to keyboard users.
Try the working example ↓EXAMPLE WORKSPACEFocus
Focus on the details
Navigation collapsed · Atlas Labs
- Draft note
- Follow up with procurement.
DESIGN INTENT
Focus
Keep a discoverable way to restore navigation. Collapsing a pane should preserve its content and the active draft.
Try the working example ↓EXAMPLE WORKSPACESmall screen
One task at a time
Customer details
- Current record
- Atlas Labs
- Draft note
- Still available
DESIGN INTENT
Small screen
On narrow screens, offer a clear switch between navigation and details. Preserve the active record and draft across the switch.
Try the working example ↓WORKING EXAMPLE
Component reference →Navigate a workspace
Type a note in the detail pane. Resize the divider, collapse the first pane, then expand it. Check that your note remains. Focus the divider to try its keyboard controls.
Make the important choices explicit.
Focus management
After opening a new view, make the destination clear. Restore focus to a useful trigger when returning.
Small screens
Prioritize the current task. Avoid squeezing two desktop panes into unreadable columns.
Keep the behavior. Bring your data.
The examples demonstrate interaction using sample data. Your application owns the real records, permissions and persistence.
- 01Routing
- Connect navigation events to your application’s routes or selected record.
- 02Draft preservation
- Keep draft data independently of whether a pane is visible.
- 03Layout preferences
- Decide whether to remember pane size, and provide sensible defaults.
BUILD THIS PATTERN WITH
All patterns →