# Breadcrumbs (/navigation/breadcrumbs)





<ComponentPreview name="breadcrumbs-demo" description="A breadcrumb navigation component." />

## Installation [#installation]

```bash
npx shadcn@latest add @preskok/breadcrumbs
```

## Usage [#usage]

```tsx
import {
  Breadcrumbs,
  BreadcrumbsItem,
} from "@/components/ui/preskok-ui/breadcrumbs"

export function BreadcrumbsDemo() {
  return (
    <Breadcrumbs>
      <BreadcrumbsItem href="/">Home</BreadcrumbsItem>
      <BreadcrumbsItem href="/products">Products</BreadcrumbsItem>
      <BreadcrumbsItem href="/products/electronics">
        Electronics
      </BreadcrumbsItem>
      <BreadcrumbsItem>Laptop</BreadcrumbsItem>
    </Breadcrumbs>
  )
}
```

## Components [#components]

### Breadcrumbs [#breadcrumbs]

The root breadcrumbs container.

| Prop        | Type                              | Default     | Description                  |
| ----------- | --------------------------------- | ----------- | ---------------------------- |
| `separator` | `"chevron" \| "slash" \| boolean` | `"chevron"` | Separator type between items |
| `className` | `string`                          | -           | Additional CSS classes       |

### BreadcrumbsItem [#breadcrumbsitem]

Individual breadcrumb items.

| Prop        | Type                              | Default | Description                      |
| ----------- | --------------------------------- | ------- | -------------------------------- |
| `href`      | `string`                          | -       | Link URL (optional)              |
| `separator` | `"chevron" \| "slash" \| boolean` | `true`  | Override separator for this item |
| `className` | `string`                          | -       | Additional CSS classes           |

## Examples [#examples]

<ComponentPreview name="breadcrumbs-demo" description="Chevron, slash, and item-level separator behavior." />

## Features [#features]

* **Flexible separators** - Chevron, slash, or custom separators
* **Accessible navigation** - Proper ARIA labels and structure
* **Link support** - Optional href for navigation
* **Current page indication** - Automatic styling for current page
* **Customizable styling** - Full control over appearance
* **Responsive design** - Adapts to container width