# Breadcrumb

Displays the path to the current resource using a hierarchy of links.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentPreview name="breadcrumb-demo">
  <div className="flex items-center justify-center py-12">
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">
            Home
          </BreadcrumbLink>
        </BreadcrumbItem>

        <BreadcrumbSeparator />

        <BreadcrumbItem>
          <BreadcrumbLink href="/docs/components/">
            Components
          </BreadcrumbLink>
        </BreadcrumbItem>

        <BreadcrumbSeparator />

        <BreadcrumbItem>
          <BreadcrumbPage>
            Breadcrumb
          </BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/breadcrumb.json"
```

## Usage [#usage]

After you add the component with the CLI, import it from your UI folder:

```tsx
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

export function BreadcrumbDemo() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/docs/components/">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}
```

## Examples [#examples]

### Custom Separator [#custom-separator]

Use a custom component as `<BreadcrumbSeparator>` children to change the separator icon.

<ComponentPreview name="breadcrumb-separator">
  <div className="flex items-center justify-center py-12">
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">
            Home
          </BreadcrumbLink>
        </BreadcrumbItem>

        <BreadcrumbSeparator>
          <SlashIcon className="size-4" />
        </BreadcrumbSeparator>

        <BreadcrumbItem>
          <BreadcrumbLink href="/docs/components/">
            Components
          </BreadcrumbLink>
        </BreadcrumbItem>

        <BreadcrumbSeparator>
          <SlashIcon className="size-4" />
        </BreadcrumbSeparator>

        <BreadcrumbItem>
          <BreadcrumbPage>
            Breadcrumb
          </BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  </div>
</ComponentPreview>

### Dropdown [#dropdown]

You can compose `BreadcrumbEllipsis` with a `DropdownMenu` to navigate deep hierarchies without cluttering the screen.

<ComponentPreview name="breadcrumb-dropdown">
  <div className="flex items-center justify-center py-12">
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">
            Home
          </BreadcrumbLink>
        </BreadcrumbItem>

        <BreadcrumbSeparator />

        <BreadcrumbItem>
          <DropdownMenu>
            <DropdownMenuTrigger className="flex items-center gap-1 rounded-none focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring">
              <BreadcrumbEllipsis className="size-4" />

              <span className="sr-only">
                Toggle menu
              </span>
            </DropdownMenuTrigger>

            <DropdownMenuContent align="start">
              <DropdownMenuItem>
                Documentation
              </DropdownMenuItem>

              <DropdownMenuItem>
                Themes
              </DropdownMenuItem>

              <DropdownMenuItem>
                GitHub
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </BreadcrumbItem>

        <BreadcrumbSeparator />

        <BreadcrumbItem>
          <BreadcrumbLink href="/docs/components/">
            Components
          </BreadcrumbLink>
        </BreadcrumbItem>

        <BreadcrumbSeparator />

        <BreadcrumbItem>
          <BreadcrumbPage>
            Breadcrumb
          </BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  </div>
</ComponentPreview>

## API Reference [#api-reference]

The breadcrumb components are built using standard HTML elements (`<nav>`, `<ol>`, `<li>`) and Radix Slot for composition.

| Prop      | Type      | Default | Description                                                                                                         |
| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| `asChild` | `boolean` | `false` | Render as a different element using Radix Slot (available on `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`). |