Component · navigation.navbar
Navbar
A landmark region for primary or secondary destination links across an application shell.
Informative mappings only. Platform examples below describe possible target primitives. This release does not ship adapters for React, Swift, Android or any other platform.
Anatomy
| Part | Required | Description |
|---|---|---|
brand | no | Product or site identity. |
items | yes | Collection of navigation links or menus. |
actions | no | Utility actions such as search or account. |
States
- default
- scrolled
- compact
- expanded
Keyboard
- Tab moves through interactive items
- Enter activates the focused link or control
Accessibility
Expose a navigation landmark with a clear name when multiple nav regions exist. Current page or section should be programmatically indicated. Compact menus must remain operable by keyboard when items collapse behind a trigger.
Motion
Collapse and expand transitions may animate height; under reduced motion, toggle layout without height animation.
Platform mappings
web
web
nav landmark with links; disclosure button for compact menus.
apple
apple
SwiftUI NavigationBar / toolbar patterns appropriate to the platform idiom.
android
android
Compose TopAppBar or navigation bar components.