Sidebar
Use a sidebar to allow users to navigate within projects, spaces and repositories. It lives on the left side of the screen and can be expanded, collapsed and resized.
- Sidebar header
- Menu items
- Secondary menu items
- Settings/admin:
- Docked in a sidebar footer
- Expand/collapse icon
Sidebar in detail
Sidebar header
The sidebar header includes the container avatar and name.
- Container avatar:
- The container avatar provides a unique visual identity for the current container. The container avatar has a width and height of 48px when the sidebar is expanded, and 32px when the sidebar is collapsed. The container avatar displays a tooltip on hover that shows the name of the current container.
- Container name:
- The container name identifies the current container. The container name wraps if its width is greater than the width of the sidebar when the sidebar is expanded.
Menu items
The menu includes the main objects or actions for a product. Each menu item in the primary menu consists of an icon and a text label.
- Group heading:
- This summarizes the items in this group as a headline.
- Hover state
- Menu item icon and label:
- Menu item icons communicate individual item meaning, while also working together as a set of icons.
- Selected state:
- This shows the user which part of the information architecture the currently active page is in.
- Badges:
- Use badges to call out menu item updates, for example changes to a pull request in Bitbucket.
Secondary menu items
When the sidebar is collapsed, secondary nav groups are organized into flyout menus that reveal themselves when a users hovers the mouse over the group icon.
