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.

General usage
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.

Sidebar header
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.

Menu items
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.

Secondary menu items