Sidebar

Sidebar is used to display single level navigational destinations that create a reliable foundation for navigation. Designed with care, the sidebar helps users move confidently through applications while maintaining clear spatial orientation.

View in Storybook

When to Use

Sidebar should be used for more than 3 top level destinations that need to be accessible anywhere in the app. Use the sidebar when you need persistent navigation that remains visible and accessible throughout the user's journey.

The sidebar shouldn't be used for secondary navigation destinations or less than 3 destinations.

Guidelines

The sidebar will be permanently visible with optionally a collapse/expand functionality. In collapsed mode the destination items are represented with an icon only, and a tooltip should be used.

Its height should fill the height of the screen, and will not be scrollable.

Implementation in Figma

1. In Figma go to the Assets Panel and search for Side bar.
2. Drag and drop the component in your frame.
3. Rename and resize the component if needed.
4. Choose the variant from the Design Panel.