Sidebar
Usage
When to Use
Use a sidebar to organize content within your current page. The menu items within your sidebar represent secondary navigation, successive to the menu items in the header bar. Sidebars are often organized into multiple sections and can be multiple levels deep. In some cases, the sidebar allows individual customization of the items.
When Not to Use
If you want to split some cohesive content into several units, use the tab bar instead.
If you want to allow users to change how some content is displayed instead of actually changing what content is displayed, use a switcher instead.
Don’t use the sidebar as your primary navigation. The primary navigation is always represented by the header bar.
Variants
Single-Level Sidebar
Single-level sidebars contain only links or links that are organized in sections. Section titles are not links. However, users can click the titles or the “chevron” icon next to them to collapse their content.
Multi-Level Sidebar
Individual links can have sub-links. Users can collapse these links by clicking on the “chevron” icon next to the parent link. If you use a multi-level sidebar, avoid going deeper than three levels (NNGroup: Flat vs. Deep Website Hierarchies) .
Integrated Search Field
For sidebars that contain a lot of menu items, it can make sense to integrate a simple search and filter field at the top of the sidebar.
Customization
Whether you are using a single-level or a multi-level sidebar, you can make your sidebar customizable by adding icon buttons to the right of your items. Displaying these actions only when the user hovers over a specific item helps to declutter the interface.
Content
Use title-style capitalization for all links.
Layout
The sidebar is always positioned to the left of the page and appears directly below the header bar. You can adapt its width to your individual needs.
