# Navigation switcher

The Navigation switcher moves between top-level product areas from the contextual sidebar. It is navigation, not a form select and not an action menu.

## When to use

Use the switcher when an application has multiple persistent product or work areas such as Home, Asset Intelligence, and Security & Compliance. The trigger replaces a static contextual-sidebar title and displays the currently active area.

Do not use it for:

- choosing a value in a form;
- switching tenants or teams when that operation changes authorization context;
- contextual actions such as Export or Delete;
- account utilities or preferences such as Settings;
- navigating among pages already represented by the sidebar rows below it.

Those cases require a select/combobox, an account or workspace switcher, an action menu, or ordinary navigation respectively.

## Anatomy

1. A small, widely tracked `Navigation` eyebrow that establishes the control’s purpose and is visually distinct from subsection titles.
2. A full-width trigger containing the current area and a disclosure chevron.
3. A popup aligned to the trigger and contextual sidebar.
4. One link row per authorized destination, each with an optional 16px icon.
5. No account-utility destinations; Settings belongs in dedicated account navigation rather than the product-area list.

The popup should use `--navigation-sidebar-width`, `--surface-panel`, `--radius-navigation`, and `--shadow-menu`. Rows use the standard 40px control height.

## Visual states

- The trigger remains visually quiet and uses the current area as its primary text.
- Hover and keyboard focus use the muted surface.
- The current destination uses the same muted surface plus stronger text and `aria-current="page"`.
- The chevron rotates when the popup is open.
- Unauthorized destinations are omitted rather than shown disabled.

## Behavior

- Enter or Space toggles the popup from the trigger.
- Arrow Down or Arrow Up opens it and focuses the current destination, falling back to the first item.
- Arrow keys wrap through the visible destinations.
- Home and End move to the first and last destination.
- Escape closes the popup and returns focus to the trigger.
- Clicking outside closes it without moving focus.
- Selecting a destination closes the popup; normal navigation then controls focus on the destination page.
- Tabbing outside closes it and continues the normal document order.

Keep the popup inside the viewport and flip it when there is insufficient space below. Do not cover the sidebar collapse control or page-critical content.

## Accessibility

The trigger must expose `aria-expanded` and `aria-controls`. It may use `aria-haspopup="true"` because the popup contains navigation rather than an ARIA menu. Keep the popup as a labeled `nav` containing ordinary links so link semantics remain available to assistive technology.

Do not use `role="menu"` unless the implementation also adopts the complete ARIA menu interaction model and intentionally changes link semantics.

## Product boundary

The design system owns appearance, states, focus expectations, and keyboard behavior. Each product owns destination labels, icons, authorization, route matching, and navigation execution.