A sidebar provides app-level navigation and quick access to users’ favorite or pinned contents. The sidebar is useful if you expect a user to switch between app-level destinations frequently.
The primary column contains the sidebar. The sidebar contains a header, a list, a footer, and a vertical divider.
- A – Header
- B – Destination list
- C – Footer
- D – Default cell
- E – Active cell
- F – Outlined group
- G – Divider
The width of the primary column is flexible. The default width is set to 320px.
- Icon: Icons are optional. Icons supplement labels as indicators of a destination.
- Lebel: Keep text labels concise. When a text label extends beyond the primary column width, instead of shrinking or wrapping it, truncate it.
- Right accessories: Right accessories are optional; numbers or any icon button can be added here. Within an outlined group, don’t mix number and icon button or different icon buttons.
Related destinations can be grouped together. Grouped items have a heading as a group name.
Collapsing and Opening
In landscape mode, the sidebar is visible by default. To create more room for their content, the sidebar can be collapsed by the toggle icon on the top left corner. The user can open the sidebar again by using the built-in edge swipe gesture.
In portrait mode, the sidebar is open by default as an overlay. The sidebar can be collapsed by tapping outside of view. The user can open the sidebar again by the built-in edge swipe gesture.
In compact mode the sidebar is replaced with a tab bar or a preview table view.
A tab bar can contain up to 5 destination items. If there are more than 5 destinations in the sidebar, the last tab can be used to access the other destinations.
For apps that don’t have deep navigation, the back button in the navigation bar can be used to access the full destination list.