Side bar

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:

1. Current page
2. 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