1. Docs
  3. Components
  5. Breadcrumb

Breadcrumb

Breadcrumbs display a hierarchy of links to the current page or resource in an application.

Docs

Installation

npx shadcn@latest add @kanpeki/breadcrumb

Anatomy

import { Breadcrumb } from "~/components/ui/breadcrumb";
import { Link } from "~/components/ui/link";

<Breadcrumb.Root>
  <Breadcrumb.Item>
    <Link />
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item>
    <Breadcrumb.Ellipsis />
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item>
    <Link />
  </Breadcrumb.Item>
</Breadcrumb.Root>

Examples

Custom Separator

Use a custom component as children for <BreadcrumbSeparator /> to create a custom separator.

import { Breadcrumb } from "~/components/ui/breadcrumb";
import { SlashIcon } from "lucide-react"; 

<Breadcrumb.Root>
  {/* ... */}
  <Breadcrumb.Separator>
    <Icons.Slash className="size-4" />
  </Breadcrumb.Separator>
  {/* ... */}
</Breadcrumb.Root>;

Dropdown

You can compose <BreadcrumbItem /> with a <Menu /> to create a dropdown in the breadcrumb.

import { Button } from "react-aria-components"; 
import { Breadcrumb } from "~/components/ui/breadcrumb"; 
import { Menu } from "~/components/ui/menu"; 
import { LinkStyles } from "~/components/ui/link"; 
import { Popover } from "~/components/ui/popover"; 

<Breadcrumb.Root>
  {/* ... */}
  <Breadcrumb.Item>
    <Menu.Root>
      <Button className={LinkStyles({ variant: "default" })}>Components</Button>

      <Popover.Content>
        <Popover.Arrow />

        <Menu.Content>
          <Menu.Item>Documentation</Menu.Item>
          <Menu.Item>Themes</Menu.Item>
          <Menu.Item>GitHub</Menu.Item>
        </Menu.Content>
      </Popover.Content>
    </Menu.Root>
  </Breadcrumb.Item>
  {/* ... */}
</Breadcrumb.Root>;

Collapsed

There's a <BreadcrumbEllipsis /> component to show a collapsed state when the breadcrumb is too long.

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

<Breadcrumb.Root>
  {/* ... */}
  <Breadcrumb.Item>
    <Breadcrumb.Ellipsis className="size-4" />
  </Breadcrumb.Item>
  {/* ... */}
</Breadcrumb.Root>;
BadgeButton