Side bar
Persistent left-side panel giving users quick access to key sections and actions. It helps keep complex navigation organised, scannable, and always within reach.
When to use this component
- The product has multiple sections or modules
- Navigation includes grouped or hierarchical content (up to two levels)
- Users need to move frequently between sections
- It’s important to maintain context and orientation within the system
- Navigation should remain visible at all times
Avoid using a sidebar when:
- There are only a few navigation items
- Content can be handled with tabs or top navigation
- Screen space is limited and navigation is not frequently used
Behaviour
Icon rail (collapsed navigation)
- Always visible
- Provides quick access to main areas
- Compact and scannable
Expanded panel (contextual navigation)
- Displays detailed navigation for the selected area
- Can be expanded or collapsed
- Updates based on the selected module
Interaction
Collapsed (icon rail)
Clicking an icon:
- Switches the active section
- Updates the content in the expanded panel
Expanded (icon and label)
Users can:
- Click an item to navigate to a page
- Expand or collapse grouped items (if applicable)
Collapse and expand
The sidebar can be collapsed to show only the icon rail.
Users can:
- Toggle the panel using the collapse control
- Expand it again to view full navigation
Navigation behaviour
Clicking a level 1 item will either:
- Take the user to a page, or
- Expand and collapse nested items
Clicking a level 2 item takes the user to a destination.
User block (optional)
- Displays user information (name, role, avatar)
- Can provide access to profile or account settings
Motion
Motion helps users understand what’s happening and keeps interactions feeling smooth.
Expanding
- Duration: 260ms
- Easing: ease-in-out
Collapsing
- Duration: 200ms
- Easing: ease-in-out
Accessibility
The sidebar supports accessible navigation for assistive technologies.
- Screen readers announce:
- Current page
- Expanded or collapsed states
- When the panel is collapsed, hidden content is not reachable
Keyboard support
- Tab to navigate through items
Visual and interaction requirements
- Ensure a minimum contrast ratio of 4.5:1
- Always provide clear focus states
- Use touch targets of at least 44px
- Don’t rely on icons alone, always include text labels
- Clearly show which page is currently active
- Provide tooltips for icon-only navigation
Alternative components
Depending on the needs, you might consider:
- Top navigation or tabs when there are only a few key destinations that should always be visible
- Drawer navigation for smaller screens or when navigation should be hidden by default
| Platform | Status | Release |
|---|---|---|
| Figma | Available | v.1.2.0 |
| React | Planned | v.0.11.2 |
Get in touch
If something doesn't look right, or you need more information about this component, you can contact us.
Experience Design Team
Click to email. design-system@ucl.ac.uk