---
title: Breadcrumb
description: Displays the path to the current resource using a hierarchy of links.
---

<ComponentPreview name="p-breadcrumb-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>
<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/breadcrumb
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="breadcrumb" title="components/ui/breadcrumb.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

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

```tsx
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```

## API Reference

This is a custom component, not a Base UI wrapper.

### Breadcrumb

Root navigation container with `aria-label="breadcrumb"`.

### BreadcrumbList

Ordered list container for breadcrumb items.

### BreadcrumbItem

Individual breadcrumb item container.

### BreadcrumbLink

Link element for navigable breadcrumb items. Supports the `render` prop to use custom link components (e.g., Next.js Link).

| Prop     | Type                   | Default | Description                                      |
| -------- | ---------------------- | ------- | ------------------------------------------------ |
| `render` | `React.ReactElement`   | -       | Render as a different element (e.g., Next.js Link) |

### BreadcrumbPage

Non-interactive element representing the current page. Includes `aria-current="page"`.

### BreadcrumbSeparator

Separator between breadcrumb items. Defaults to a chevron icon but accepts custom children.

### BreadcrumbEllipsis

Ellipsis indicator for collapsed breadcrumb items.

## Examples

### With custom separator

<ComponentPreview name="p-breadcrumb-2" />