Navigation

Navigation and related components Navigation User and Navigation Logo provide a consistent location and structure for users to navigate your application or experience.

Overview

Use Navigation along with Navigation Logo, and when applicable, Navigation User, to provide landmarks to the user. Navigation can also be useful for containing a Menu and Menu Items.

Navigation is expected to be positioned within the header slot of the Shell component.

Usage

  • Serve as the primary method of navigating an application or experience.
  • Contain an application's information hierarchy within slotted Menu and Menu Items components.
  • Within the header slot of the Shell as a consistent location for interactive controls.

Sample

Accessibility

Keyboard navigation

KeyFunction
TabMoves focus to the next focusable element. If the currently focused element is the last, the focus will leave the component.
Tab and ShiftMoves focus to the previous focusable element. If the currently focused element is the first, the focus will leave the component.

API reference

Properties

Slots

Styles

Events

Methods

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.