Skip to main content

Top bar

Create a responsive horizontal navbar.

Top bar is a horizontal top-level navigation component. They come in two variants: with and without a logo.

View in StorybookExternal link icon

Behavior​

  • Menu items that don't fit the Top bar width are hidden in a dropdown under the More Button.

  • Dropdowns are displayed on click, 4 px down from the trigger element.

Usage​

  • Provides access to your app's categories and features.

Best practices​

  • If you want to display more than seven menu items, consider using Sidebar instead.
  • Display only those menu items that users are allowed to access.
  • If you don't have a compact logo version, consider not including one.
Do IconDo
Do Example
Don't IconDon't
Don't Example

Accessibility​

Keyboard focus​

  • The keyboard focus state replicates 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.