Components / navigation
Navbar
Top-level app header: brand, primary navigation, search and account controls.
import { Navbar } from '@basiiik/ui';
The snippet an agent gets
From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.
import { Navbar } from '@basiiik/ui';
<Navbar brand={<a href="/">Acme</a>} />- Example values were filled in for the required prop brand: replace them with your own.
layoutisauto(switches at 768px), or forcedesktop/mobile.elevatedswaps the border for a shadow. Compose with NavbarLink; omitactionsto drop the search/avatar area.- Compose with: avatar, button, icon-button.
- Storybook: Navigation/Navbar.
Props
| Prop | Type | Notes |
|---|---|---|
layout | "auto" | "desktop" | "mobile" | Default "desktop" |
elevated | boolean | |
actions | ReactNode | |
actions | ReactNode | |
brand required | ReactNode |
Other props
| Prop | Type | What it does |
|---|---|---|
navLabel | string | Accessible name of the <nav>. |
menuLabel | string |
States. layout is auto (switches at 768px), or force desktop / mobile. elevated swaps the border for a shadow. Compose with NavbarLink; omit actions to drop the search/avatar area.
Native attributes such as className, id and data-* are forwarded to the root element.
Parts
NavbarLink
One navigation link inside the Navbar (children of Navbar). current marks the current page (aria-current="page").
<NavbarLink href="/docs" current>Docs</NavbarLink>NavbarLink props
| Prop | Type | What it does |
|---|---|---|
current | boolean | The current page. Sets aria-current="page". |
Use it when
- Global app or site header
Do not use it when
- Section-level navigation (use Tabs or Sidebar Item)
Rules for agents
- brand is the logo and product name, usually a link to the home page
- Children are NavbarLinks; set current on the link for the current page
- Put a skip-to-content link before the Navbar
- Keep actions to a few controls such as search, one Button and an Avatar
- Set elevated only after the page has scrolled
- Leave layout="auto" so it folds behind the menu button on small screens
Avoid
- More than about 5 to 7 top-level links
- Using the Navbar for section navigation within a page (use Tabs)
- Several primary Buttons in actions
- Marking more than one link as current
- An elevated shadow while the page is at the top
Writing the content
- Link labels are one or two words: 'Docs', 'Pricing'
- Use sentence case
Keyboard
- Tab through links and controls
- Menu button toggles mobile navigation
Accessibility
- aria-current="page" on the active link
- Menu button: aria-expanded and aria-controls
- Provide a skip-to-content link before the bar
Colour tokens it reads
color.bg.brand.defaultcolor.bg.brand.subtlecolor.bg.surfacecolor.border.subtlecolor.text.brandcolor.text.on-brandcolor.text.primarycolor.text.secondaryRelated
navigation 4 Figma variants Try it in the live demo