Default
Show the codeHide the code
Default, code
<Navbar {...args} actions={<Button variant="outline" size="sm">Sign out</Button>} />Navbar
The site's top navigation: links in a row, a Menu disclosure on narrow screens. Publishes its height for scroll padding.
- Free core, MIT
- Version 2.0.0-rc.1
- APG pattern: Disclosure navigation
Examples
These are the real React components. Use them with a mouse, touch or keyboard, and switch the theme and density for every example at once.
Tokens
The 12 design tokens Navbar reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 12 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.bg.canvas | … | --sd-color-bg-canvas |
| color.bg.subtle | … | --sd-color-bg-subtle |
| color.border.default | … | --sd-color-border-default |
| color.text.default | … | --sd-color-text-default |
| layer.sticky | … | --sd-layer-sticky |
| shape.radius-control | … | --sd-shape-radius-control |
| spacing.gap.md | … | --sd-spacing-gap-md |
| spacing.gap.sm | … | --sd-spacing-gap-sm |
| spacing.gap.xs | … | --sd-spacing-gap-xs |
| spacing.inset.md | … | --sd-spacing-inset-md |
| spacing.inset.sm | … | --sd-spacing-inset-sm |
| target.min | … | --sd-target-min |
Install
The npm package isn’t published yet. When it is, this is the install line; until then, this page runs the same build of the package (from commit fa3abf8).
Install
npm i @superduperui/react @superduperui/tokensImport
import { Navbar } from "@superduperui/react"Props
Navbar also takes the props of the React Aria component it’s built on.
| Prop | Type | What it does |
|---|---|---|
label | stringDefault 'Main' | Names the navigation landmark. Default "Main". |
brandrequired | ReactNode | Logo or product name (a link home, usually). |
itemsrequired | NavbarItem[] | |
actions | ReactNode | Controls at the end (sign in, avatar menu). |
sticky | booleanDefault true | Stick to the top and publish its height as --sd-scroll-padding-top, so focused content is never hidden under it (2.4.11, 2.4.12). Default true. |
className | string |
When to use it
Use it for
- The main navigation of a site or app
Use something else for
- Section navigation down the side: use Sidebar
- App bars on mobile screens: use AppBar
- Lists of actions: use Menu
Accessibility
Screen readers announce "Main, navigation" then "Overview, current page, link"; narrow: "Menu, button, collapsed".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6, 2.3.3.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- Wrap it in your header landmark
- Give each navigation landmark a different label
Shared patterns it ships with: 2.4.8 (aria-current="page"); 2.4.12 (publishes --sd-scroll-padding-top).
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 40 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 180 text runs: 0 below 7:1, lowest 16.71:1 |
| Target size | 62 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 108 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 4 of 4, Firefox 4 of 4, WebKit 4 of 4 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab reaches the brand link |
| Tab | Tab reaches the current page link |
| Tab | Tab moves through the other links in order |
| Tab | Then the actions |
In Figma
The Figma component is Navbar, with Layout (Wide, Narrow, Narrow open). The Figma library isn’t published yet.
Figma to code: Layout (Wide, Narrow, Narrow open; preview only); Show actions → actions; Brand → brand; Actions → actions; nested NavLink → items.