Subnav ≠ Navbar
- Navbar — app-level top chrome (brand, global routes, profile). Use
<Navbar>+NavItem placement="navbar". - Subnav — in-page section tabs under a title (Settings → General / Billing). Use
<Subnav>+NavItem placement="subnav". - Both use the same
NavItemcomponent;placementonly changes link styling (pill/underline vs bottom-border tab).
Same labels — different placement (compare)
"General" / "Billing" with placement="navbar" vs placement="subnav".
Navbar item (global header)
Subnav item (section tabs)
Subnav default (section tabs)
Typical composition — PageHeader + Subnav
Subnav sits below the page title, not inside the app navbar.
Settings
Account and workspace preferences.
Tab panel content goes here.
Full stack (where each layer lives)
Settings
Top: Navbar (app). Below title: Subnav (page section).
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| theme | Optional | SiteTheme | atelier | Visual theme. |
| ariaLabel | Optional | string | Section | Landmark label for the tab row. |
| children | Optional | ReactNode | — | NavItem links with placement=subnav (not navbar). |