> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Breadcrumbs

> Navigation breadcrumbs component with automatic path generation and collapsible items

export const BreadcrumbsCollapsiblePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/BreadcrumbsCollapsible" frameBorder="0" width="100%" height="260"></iframe>;

export const BreadcrumbsWithIconsPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/BreadcrumbsWithIcons" frameBorder="0" width="100%" height="260"></iframe>;

export const BreadcrumbsBasicPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/BreadcrumbsBasic" frameBorder="0" width="100%" height="260"></iframe>;

## Overview

The Breadcrumbs component provides navigation breadcrumbs with support for automatic path generation, collapsible items, and custom separators.

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Breadcrumbs } from '@peppermint-design/devreadykit-custom';

    export default function BreadcrumbsBasic() {
      const items = [
        { id: 'home', label: 'Home', href: '/' },
        { id: 'products', label: 'Products', href: '/products' },
        { id: 'item', label: 'Item Name', href: '/products/item', active: true }
      ];

    return <Breadcrumbs items={items} />;
    }

    ```
  </Tab>

  <Tab title="Preview">
    <BreadcrumbsBasicPreview />
  </Tab>
</Tabs>

## Automatic Path Generation

If no items are provided, Breadcrumbs will automatically generate items from the current route.

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Breadcrumbs } from '@peppermint-design/devreadykit-custom';

    <Breadcrumbs />
    ```
  </Tab>

  <Tab title="Preview">
    <BreadcrumbsBasicPreview />
  </Tab>
</Tabs>

## With Icons

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Breadcrumbs } from '@peppermint-design/devreadykit-custom';
    import { Home, Folder } from '@/assets/icons';

    const items = [
    { id: 'home', label: 'Home', href: '/', icon: <Home /> },
    { id: 'folder', label: 'Folder', href: '/folder', icon: <Folder /> }
    ];

    <Breadcrumbs items={items} />
    ```
  </Tab>

  <Tab title="Preview">
    <BreadcrumbsWithIconsPreview />
  </Tab>
</Tabs>

## Collapsible Items

When there are more items than `maxItems`, the component will collapse middle items into an ellipsis menu.

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Breadcrumbs } from '@peppermint-design/devreadykit-custom';

    const items = [
    { id: 'home', label: 'Home', href: '/' },
    { id: 'level1', label: 'Level 1', href: '/level1' },
    { id: 'level2', label: 'Level 2', href: '/level1/level2' },
    { id: 'level3', label: 'Level 3', href: '/level1/level2/level3' },
    { id: 'level4', label: 'Level 4', href: '/level1/level2/level3/level4' },
    { id: 'level5', label: 'Level 5', href: '/level1/level2/level3/level4/level5', active: true }
    ];

    <Breadcrumbs items={items} maxItems={4} />
    ```
  </Tab>

  <Tab title="Preview">
    <BreadcrumbsCollapsiblePreview />
  </Tab>
</Tabs>

## Props

<PropsTable>
  \| Prop | Type | Default | Description |
  \|:------|:------|:---------|:-------------| | items | `BreadcrumbItem[]` | - |
  Array of breadcrumb items | | maxItems | `number` | `4` | Maximum visible
  items before collapsing | | className | `string` | - | Additional CSS classes
  \| | onItemClick | `(item: BreadcrumbItem, index: number) => void` | - | Click
  handler for items | | separator | `React.ReactNode` | - | Custom separator
  element |
</PropsTable>