Docs
Components
Breadcrumb

Breadcrumb

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

Docs

Preview

Code

Home
Components
Breadcrumb

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/breadcrumb

Anatomy

Single import

Multiple imports

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.

Preview

Code

Home
Components
Breadcrumb

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

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

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

Preview

Code

Docs
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.

Preview

Code

Home
Components
Breadcrumb

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

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

API Reference

Breadcrumb.Root

Prop	Type	Default
`children`	`ReactNode`
`isDisabled`	`boolean`
`onAction`	`function`

Breadcrumb.Item

Prop	Type	Default
`id`	`Key`
`children`	`ReactNode`

Breadcrumb.Separator

Prop	Type	Default
`children`	`ReactNode`

Breadcrumb.Ellipsis

Prop	Type	Default
`children`	`ReactNode`

Badge Button Group

On This Page

Installation
Anatomy
Examples
Custom Separator
Dropdown
Collapsed
API Reference
Breadcrumb.Root
Breadcrumb.Item
Breadcrumb.Separator
Breadcrumb.Ellipsis

Contribute