Navbar / Header Nav

Top app/site bar: brand, links (aria-current), actions; collapses into a disclosure menu on small screens.

Import

import { Navbar } from '@marbleui/ui'

Props

<Navbar>

Prop	Type	Default
brand *required	`ReactNode`	`—`
links *required	`NavbarLink[]`	`—`
actions	`ReactNode`	`—`
className	`string`	`—`
current	`string`	`—`
variant	`'floating' \| 'bordered' \| 'transparent'`	`'bordered'`

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Button · React Aria Link. Follow the primitive's docs for the full keyboard map.

Usage notes

Top app or site bar with a brand, links and actions, collapsing to a menu button on narrow containers. For rich flyout panels use NavigationMenu; for a vertical app nav use Sidebar.

<Navbar
  brand={<Logo />}
  current="/pricing"
  links={[
    { href: '/docs', label: 'Docs' },
    { href: '/pricing', label: 'Pricing' },
  ]}
  actions={<Button size="sm">Sign in</Button>}
/>

current is the href of the active link (sets aria-current="page").
The layout responds to the container width (container query), not the viewport. Below @lg the links and actions move into a disclosure toggled by a button labelled “Open menu” / “Close menu”.
variant is bordered (default), floating or transparent.
Links are plain hrefs, so wire client-side routing at the app level.

Example source · show

import { Button } from '../button'
import { Navbar } from './navbar'

const links = [
  { href: '#product', label: 'Product' },
  { href: '#pricing', label: 'Pricing' },
  { href: '#docs', label: 'Docs' },
  { href: '#blog', label: 'Blog' },
]
const Brand = () => (
  <span className="flex items-center gap-2 font-semibold">
    <span className="grid size-7 place-items-center rounded-md bg-accent text-sm text-accent-fg">A</span> Acme
  </span>
)
const Actions = () => (
  <>
    <Button variant="ghost" size="sm">Sign in</Button>
    <Button size="sm">Get started</Button>
  </>
)

export const styles = {
  Bordered: () => <Navbar className="w-[44rem] max-w-full" brand={<Brand />} links={links} current="#pricing" actions={<Actions />} />,
  Floating: () => (
    <div className="w-[44rem] max-w-full bg-surface-muted p-4">
      <Navbar variant="floating" brand={<Brand />} links={links} current="#docs" actions={<Actions />} />
    </div>
  ),
  Mobile: () => <Navbar className="w-80 rounded-xl border border-border" brand={<Brand />} links={links} current="#product" actions={<Actions />} />,
}

Source: packages/ui/src/navbar/navbar.tsx

Catalog

Category: navigation
Priority: Core
Primitive: composed
React Aria: Link
Base UI: Navigation Menu