Breadcrumb

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

$ npx @beaket/ui add breadcrumb

Source

import { useState } from "react";
import { Breadcrumb } from "@/components/ui/breadcrumb";

const items = ["Home", "Documentation", "Components"];

export default function Example() {
  const [active, setActive] = useState("Components");

  return (
    <Breadcrumb>
      <Breadcrumb.List>
        {items.map((item, index) => (
          <Breadcrumb.Item key={item}>
            {index > 0 && <Breadcrumb.Separator />}
            {active === item ? (
              <Breadcrumb.Page>{item}</Breadcrumb.Page>
            ) : (
              <Breadcrumb.Link href={`#${item.toLowerCase()}`} onClick={() => setActive(item)}>
                {item}
              </Breadcrumb.Link>
            )}
          </Breadcrumb.Item>
        ))}
      </Breadcrumb.List>
    </Breadcrumb>
  );
}

Examples

Default separator

Chevron separator

Source

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

export default () => (
  <div className="space-y-4">
    <div>
      <p className="text-fg-muted mb-2 text-xs">Default separator</p>
      <Breadcrumb>
        <Breadcrumb.List>
          <Breadcrumb.Item>
            <Breadcrumb.Link href="#home">Home</Breadcrumb.Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            <Breadcrumb.Separator />
            <Breadcrumb.Page>Current</Breadcrumb.Page>
          </Breadcrumb.Item>
        </Breadcrumb.List>
      </Breadcrumb>
    </div>
    <div>
      <p className="text-fg-muted mb-2 text-xs">Chevron separator</p>
      <Breadcrumb>
        <Breadcrumb.List>
          <Breadcrumb.Item>
            <Breadcrumb.Link href="#home">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

Name	Type	Default	Description
Link.asChild	boolean	false	Renders the consumer's own element (a router `Link`) instead of an `<a>`

Examples

All Variants

Props