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 system
- Workspace product
- Many grouped destinations
- Navigation that needs labels and icons
When NOT to use it
- Use a wide permanent sidebar on a narrow screen
- Expand every nested group by default
- Mix page navigation with unrelated content
- Leave too little width for the main task
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
