Navigation Menu
Named destination navigation built from a native nav, list, and real anchors.
When to use it. Use it when its native document or form semantics match the caller-owned requirement.
How it works
-
<.navigation_menu>Applications own destinations and current-route choice. This is link navigation, not a menu, command bar, Radio Panels group, or tab widget. -
package CSSPackage CSS applies scoped shadcn-style tokens, layout, focus, and state presentation without changing the native contract. -
gallery onlyTheme switching, source copying, search, fixtures, and inspection controls on this page belong to the gallery only; :navigation_menu does not ship them. -
application boundaryUse Navigation Menu links to change destination. Use Button for commands and Radio Panels to submit one native choice.
Examples use package semantic tokens in explicit light and dark scopes.
Accessibility and browser support
Native elements, names, relationships, focus, and keyboard behavior remain authoritative.
| Feature | Locked-engine evidence | When missing |
|---|---|---|
| Native baseline | Reviewed in the locked Chromium, Firefox, and WebKit evidence matrix. | No script is required. Without package CSS or an optional feature, content and native controls remain available in source order. |
| Exact fallback | The locked-engine matrix retains the documented native or static outcome. | No script is required. Without package CSS or an optional feature, content and native controls remain available in source order. |
Application ownership and API
Applications own destinations and current-route choice. This is link navigation, not a menu, command bar, Radio Panels group, or tab widget.
Choosing the related control. Use Navigation Menu links to change destination. Use Button for commands and Radio Panels to submit one native choice.
Provenance
Catalogue identity navigation.navigation_menu, adapted from
unscripted/ui commit bd8f403030c8d1f46804da6eda733fde7e908e63
under its MIT notice.
The documentation presentation is adapted locally; ShadcnUI's Phoenix API and native semantic contract remain authoritative.
Adapt navigation presentation into a named native nav and list of real HEEX anchors with explicit current-location semantics, responsive closed layouts, and no menu roles, activation interception, route inference, or client router.