Sidebar

The sidebar is used as a way to give users a means of navigating a product in a clear and compact way. It lives on the left side of the screen and can be expanded, collapsed and resized.

General usage

Docked footer

For menu lists that are longer than the height of the sidebar, the admin / settings link will dock itself at the bottom of the sidebar.

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 triggers a tooltip on hover that displays 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.

Primary menu

The primary 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 item icon:

Menu item icons should communicate individual item meaning while also working together as a set of icons. Follow the ADG guidelines for creating icons (coming soon).

Menu item label:

Menu item labels follow the ADG guidelines for link text.

Selected state:

Shows the part of the information architecture the currently active page is in.

Hover state:

Helps users to distinguish 'hover' from 'selected'. Use a tooltip to reveal the item label.

Menu item with badge:

Badges are used to call out menu item updates such as changes to a pull request in Bitbucket.

Secondary menu

The secondary menu provides additional ways to navigate. It consists of items that are represented by only a label. When collapsed, secondary nav groups are organised into flyout menus that reveal themselves on hover over the representative group icon.

Group header:

Describes or summarizes the various items in this group as a headline.

Hover state:

Helps users to distinguish 'hover' from 'selected'.

Selected state:

Shows the part of the information architecture the currently active page is in.

Subtle button:

Use a subtle button if you require an action within the secondary group, such as giving users the ability to create a new item.

Example for light-weight interactivity in the sidebar

Here is an example of how creating an item in a secondary menu would work.

Expand, collapse and resize

The sidebar can be expanded and collapsed by using either the keyboard shortcut '[' or by dragging the right edge of the sidebar. The sidebar can be resized to a maximum 50% page width and will snap to its collapsed state if resized to less than 80px.

Page tree menu groups

An expandable / collapsable page tree can be used to hide and show large groups of hierarchical menu items.

Page tree when sidebar is collapsed

When the sidebar is collapsed, a page tree is grouped and can be accessed by hovering over the page tree icon. The dialog will only display the parent of the selected item, the selected item and the children of the selected item.