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>

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——

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