Navigation

A primary navigation component with active state indicators.

Install

npx @beaket/ui add navigation

Import

import { Navigation } from "@/components/ui/navigation"

Examples

Variants

export const AllVariants = () => (
  <div className="space-y-6">
    <div>
      <p className="text-steel mb-2 text-xs">Horizontal navigation</p>
      <Navigation>
        <Navigation.List>
          <Navigation.Item>
            <Navigation.Link href="/" active>
              Home
            </Navigation.Link>
          </Navigation.Item>
          <Navigation.Item>
            <Navigation.Link href="/docs">Docs</Navigation.Link>
          </Navigation.Item>
          <Navigation.Item>
            <Navigation.Link href="/about">About</Navigation.Link>
          </Navigation.Item>
        </Navigation.List>
      </Navigation>
    </div>
    <div>
      <p className="text-steel mb-2 text-xs">Vertical navigation</p>
      <Navigation>
        <Navigation.List className="w-48 flex-col">
          <Navigation.Item>
            <Navigation.Link href="/" active className="w-full">
              Dashboard
            </Navigation.Link>
          </Navigation.Item>
          <Navigation.Item>
            <Navigation.Link href="/settings" className="w-full">
              Settings
            </Navigation.Link>
          </Navigation.Item>
        </Navigation.List>
      </Navigation>
    </div>
  </div>
);

Props

Name	Type	Default	Description
Link.active	boolean	—	Whether this link represents the current page