# Navigation

> Category index: routing, tabs, menus, and inline links.

This file routes Make to the right navigation primitive. Each linked component has its own per-component doc with full props and examples.

## When to reach for which component

| Need | Component | Reason |
|---|---|---|
| Switch between mutually exclusive panels in one page | [`Tabs`](./tabs.md) | Buttons + ARIA tabs/tabpanels. No URL change. Data-driven via `tabs[]`. |
| Section-level nav whose items change the URL | [`Subnavigation`](./subnavigation.md) | Tab-styled `<a>` links with `aria-current="page"`. |
| Trigger a popup of commands/actions | [`MenuButton`](./menu-button.md) + [`Menu`](./menu.md) | Button trigger; commands or single/multi-select menu. |
| Form-field-style dropdown (label, validation, options) | [`MenuDropdown`](./menu-dropdown.md) | Floating-label field with `selecting`/`searching`/`texting` variants. |
| Compact carousel/onboarding indicator | [`PaginationDot`](./pagination-dot.md) | Dots with windowed overflow. |
| Sequential progress in a flow | [`StepIndicator`](./step-indicator.md) | `text` (display-only) or `select` (jump-to-step). |
| Inline anchor inside text | [`Link`](./link.md) (with `inline`) | Styled anchor; no button affordance. |
| Standalone CTA-style anchor | [`Link`](./link.md) | Block link with size + alignment. |

## Decision tree

1. **Does the click change the URL?**
   - Yes, between page sections → `Subnavigation`.
   - Yes, single anchor → `Link`.
   - No → continue.
2. **Are you switching between visible content panels in one screen?** → `Tabs`.
3. **Is the user choosing a value inside a form?** → `MenuDropdown` (variants: `selecting`, `searching`, `texting`).
4. **Are you opening a command/action popup from a button trigger?** → `MenuButton` (with `Menu` inside `renderMenu`).
5. **Are you indicating position in a sequence?**
   - Sequential flow with named steps → `StepIndicator`.
   - Carousel/slides → `PaginationDot`.

## Common pitfalls

- Don't build tabs out of `Subnavigation`: `Subnavigation` items are real anchors and don't manage `tabpanel` ARIA wiring.
- Don't build a form-field dropdown out of `MenuButton`: it lacks floating label, error handling, and validation. Use `MenuDropdown`.
- Don't reach for `<Link onClick>` to perform actions — use `Button`.
- Don't use compound syntax (`Tabs.Tab`, `Menu.Item`); these are data-driven (`tabs[]`, `items[]`, `menuItems[]`).

## Theming

All navigation components honor `inverse` (inherited from `ArrowThemeProvider` or set per instance) and the active brand. Provide `ariaLabel`/`a11yLabel` on `Tabs` and `Subnavigation` when more than one nav region exists on a page.

See each component's doc for full prop tables, decision trees within each variant axis, and accessibility notes.
