Navigation
Components for moving through an app — tabs, breadcrumbs, side navs, command menus, and pagination. Keyboard-first by default, with ARIA patterns matched to the WAI-ARIA APG.
18 navigation components
- Accordion — Vertically stacked, collapsible content sections
- Breadcrumb — Shows the current page location within a navigation hierarchy
- Dock — Fixed bottom navigation bar for mobile app shells with up to 5 items
- Header — App top bar with brand, primary navigation links, and an actions slot
- HeaderPanel — Non-modal panel anchored below the shell header at the inline-end edge — hosts notifications, app switcher, user settings
- Link — Styled anchor for navigation, standalone or inline within prose
- Menubar — Horizontal application menu bar with keyboard-navigable dropdown menus
- MenuButton — A button that opens an anchored action menu of one-shot commands
- NavigationMenu — Site navigation bar with links and dropdown flyout panels
- Pagination — Controls for navigating paged data sets, with page size selection
- ProgressIndicator — Shows progress through the steps of a multi-step flow
- ShellHeader — Console application header: brand with prefix, dropdown nav menus, global icon actions, hamburger, skip-to-content
- SideNav — Collapsible sidebar navigation with optional icons and one level of grouping
- SkipNav — Skip link that jumps keyboard users past the navigation to the main content
- Steps — Visual progress indicator for multi-step flows with horizontal and vertical orientations
- Switcher — App/product switcher list — lives inside HeaderPanel, renders links with active indicator and optional dividers
- Tabs — Switch between related panels of content
- Toc — Table of contents with scroll-spy highlighting of the active section