NAVIGATION / COMPONENTS
Sidebar
Make the workspace structure visible.
About sidebar
Sidebar is a menu that sits on the side of the application to control the current page.
01
Anatomy
Shared parts, named consistently.
1V1 · COMPACT
- 1HeaderRequired
The header of the Sidebar.
- 2LogoRequired
UX Prototype’ logo.
- 3TitleRequired
The title of the product or team.
- 4TabsRequired
Tabs to toggle between all apps and favorites.
- 5Search inputRequired
An input to search aps.
- 6ButtonRequired
A navigation or accordion button.
- 7Open/close buttonRequired
A button to open and close the Sidebar.
Try the default
A working example with the shared V1 visual language.
When to use
Use for related destinations in a workspace. Show the current location and preserve access when the layout narrows.
Tab reaches each link. Current-page state is announced with aria-current.