Navigation

Navbar

Compound component: `Navbar`, `Navbar.Brand`, `Navbar.Links`, `Navbar.Link`, `Navbar.Actions`, `Navbar.Toggle`.

Client component6 exportsSource

Import

import { Navbar, NavbarActions, NavbarBrand, NavbarLink, NavbarLinks, NavbarToggle } from '@the_viveksingh/vivek-ui'

A site header

NavbarToggle handles the mobile menu, including aria-expanded and aria-controls. NavbarLink takes asChild, so a Next.js Link keeps client-side routing.

<Navbar bordered container="lg">
  <NavbarBrand href="/">VivekUI</NavbarBrand>
  <NavbarToggle />
  <NavbarLinks>
    <NavbarLink asChild active>
      <Link href="/docs">Docs</Link>
    </NavbarLink>
    <NavbarLink asChild>
      <Link href="/docs/components">Components</Link>
    </NavbarLink>
  </NavbarLinks>
  <NavbarActions>
    <Button size="sm">Install</Button>
  </NavbarActions>
</Navbar>

Sticky

<Navbar sticky bordered container="lg">
  {/* same parts */}
</Navbar>

Transparent over a hero, links centred

variant="transparent" drops the surface and border so the bar sits over a hero backdrop; layout="center" centres the links on a wide bar. variant="floating" is the third option: an inset, rounded, shadowed bar with a sticky offset to match.

<Navbar variant="transparent" layout="center" sticky>
  <NavbarBrand href="/">Summit</NavbarBrand>
  <NavbarToggle />
  <NavbarLinks>
    <NavbarLink href="/range">Range</NavbarLink>
    <NavbarLink href="/stories">Stories</NavbarLink>
    <NavbarLink href="/stockists">Stockists</NavbarLink>
  </NavbarLinks>
  <NavbarActions>
    <Button size="sm">Shop</Button>
  </NavbarActions>
</Navbar>

<Navbar variant="floating" layout="end" sticky>
  ...
</Navbar>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Navbar
PropTypeDefaultDescription
stickyboolean—Pin to the top of the scroll container. Default `false`.
borderedboolean—Hairline rule along the bottom edge. Default `true`.
size'sm' | 'md' | 'lg'—Bar height. Default `md`.
containerContainerProps['size']—Max width of the inner `Container`. Default `lg`.
openboolean—Controlled state of the collapsed mobile menu.
defaultOpenboolean—Initial state of the collapsed mobile menu while uncontrolled. Default `false`.
onOpenChange(open: boolean) => void——
collapseAt'md' | 'lg'—The container width at which the links leave the sheet and line up in the bar. `md` (48rem, the default) suits four or five links; `lg` (64rem) is for a bar that also carries actions, where six links plus a theme toggle do not fit at 768px once fonts are a few pixels wider than the ones they were designed against - Linux and Android fallback faces, for instance.
variant'solid' | 'transparent' | 'floating'—`solid` is a surface with a border; `transparent` sits over a hero with no background; `floating` is an inset, rounded, shadowed bar. Default `solid`.
layout'start' | 'center' | 'end'—Where the links sit on a wide bar: after the brand, centred, or pushed to the actions. Default `start`.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Exports

NavbarNavbarActionsNavbarBrandNavbarLinkNavbarLinksNavbarToggle

Rendering