Figma component
Show the component in Figma
Beta
Show details
Definition
The Sidebar is a persistent vertical container used for global navigation and high-level application structure. It acts as the primary anchor for the user interface, managing the hierarchy of the application through a collapsible layout that accommodates both focused work (collapsed) and distinct navigation (default).
Anatomy
Sections
The Sidebar consists of a fixed container divided into 2 sections
- Content: contains a customisable header and navigation (Scrollable)
- Footer: Section fixed at the bottom that contains a customisable footer
Collapsible trigger (Optional)
The collapsible trigger is a call-to-action that switch the state of the sidebar between the default and the reduced state.
Position
The sidebar is always positioned on the left side of the screen.
Interaction
The sidebar can switch between default and collapsed states by the interaction with a collapsible trigger.
The trigger is by default positioned in the header.
Any other button can trigger the interaction outside of the Sidebar.
Sizing
The default sidebar has a fixed width of 312px.
The reduced sidebar has a fixed width of 80px..
Customisable slots
We can identify 3 distinctive customisable slots:
Header
Display advances custom features such as search field, shortcuts etc
Navigation
The primary slot for navigation items.
Use Vertical navigation items to create your navigation.
Footer
Contains utility links (Notification, Settings, Help) and User Profile information.
Usage guidelines
Do
Do use the Header slot for branding to reinforce identity with a logo
Do use the Footer slot for "global" utilities (User, Settings) that should remain accessible regardless of scroll position
Do ensure high contrast for the "Active" state to clearly indicate the user's current location
Don't
Don't place horizontal scrolling elements inside the sidebar
Don't use the collapsed state if your navigation relies heavily on text-only items (items without distinct icons) or needs to display sub-items
Mobile
The mobile behaviour should be defined soon.
Links
The Figma file holds the latest UI designs, while the Web Component, Blazor, Angular, React, and VueJS links offer a live demo of components in various states, themes, and interactions.
Component checklist
Feedback
Have feedback, an idea, or a bug to report? Head over to our Contributions page.