Breadcrumb

A navigation trail showing the user's location within a site hierarchy.

Install

npx @beaket/ui add breadcrumb

Import

import { Breadcrumb } from "@/components/ui/breadcrumb"

Examples

Variants

export const AllVariants = () => (
  <div className="space-y-4">
    <div>
      <p className="text-steel mb-2 text-xs">Default separator</p>
      <Breadcrumb>
        <Breadcrumb.List>
          <Breadcrumb.Item>
            <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            <Breadcrumb.Separator />
            <Breadcrumb.Page>Current</Breadcrumb.Page>
          </Breadcrumb.Item>
        </Breadcrumb.List>
      </Breadcrumb>
    </div>
    <div>
      <p className="text-steel mb-2 text-xs">Chevron separator</p>
      <Breadcrumb>
        <Breadcrumb.List>
          <Breadcrumb.Item>
            <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            <Breadcrumb.Separator>&gt;</Breadcrumb.Separator>
            <Breadcrumb.Page>Current</Breadcrumb.Page>
          </Breadcrumb.Item>
        </Breadcrumb.List>
      </Breadcrumb>
    </div>
  </div>
);

Props

—