Skip to main content

Sidebar

Add vertical multi-level navigation to your product.

Sidebar comes in two sizes: fixed and resizable.

View in StorybookExternal link icon

Behavior​

  • Sub-level items appear when you click a top-level menu item, pushing all other items downward.
  • Allows expanding multiple sub-item groups at once but collapses all others when you select an item, keeping only the selected one open.
  • Displays additional actions on hover.
  • Provides configurable option to add up to 3 sticky-bottom menu items.
  • The resizable version pushes the content to the right. The maximum width for the resizable menu is 480px.

Usage​

  • Use this for apps with more than seven menu items or when tree-style navigation is needed.

Best practices​

  • If you have fewer than seven menu items, consider using the Top bar.
  • Display only those menu items that users are allowed to access.

Accessibility​

Keyboard focus​

  • The keyboard focus state takes the Menu item’s visual hover state and adds a 2px ring.
  • For the focus ring, use a colour from the Brand primary palette (default: Primary/500).
  • Ensure the focus state has a minimum contrast ratio of 3:1 against the background for accessibility compliance.

Keyboard interactions​

See the ARIA Authoring Practices Guide: Menu and Menubar Pattern for guidance on expected keyboard interactions, including roles, states, and properties.

Resources​

Refer to Understanding 2.1.1 Keyboard for more information on expectations, intent, benefits, and techniques.