Sidebar
You might say
Put the feature menu in a left sidebar and show the content in a big area on the right, like an admin dashboard.
Keep navigation in a vertical column beside the contentA sidebar suits products with many sections, grouped tools, or workspaces that users switch between often. Give the content enough room and provide a compact or temporary version on smaller screens. Do not make every nested level visible at once.
Know first
When to use it
- Admin systemDashboardProjectsMembersSettings
- Workspace product→
- Many grouped destinationsflex: 1 · takes the remaining width
- Navigation that needs labels and iconsHomeComponentsTemplatesSettings
When NOT to use it
- Use a wide permanent sidebar on a narrow screenAnnouncementAd
- Expand every nested group by defaultwidth: 960px
- Mix page navigation with unrelated contentKeeping a full-width sidebar on mobile leaves too little width for the body.
- Leave too little width for the main task▾Expand all▾NodeChild node▾NodeChild nodeWith everything expanded by default, relationships are hard to scan
Anatomy
Hosts hierarchical navigation, which can be set to a fixed width or collapsed state
Breadcrumbs, search, location of user avatar
Tables, forms and other work content can expand and contract with the sidebar
Variants
Fixed
By default in the background, the navigation is always on the left side
Collapsible
When content needs more horizontal space
Drawer
On mobile, click the hamburger button to slide out
Typical use cases
Admin dashboard
Team workspace
Email client
Analytics product
