Skip to main content

​
Overview

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

​
Basic Usage

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} />;
}

​
Automatic Path Generation

If no items are provided, Breadcrumbs will automatically generate items from the current route. 
import { Breadcrumbs } from '@peppermint-design/devreadykit-custom';

<Breadcrumbs />

​
With Icons

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} />

​
Collapsible Items

When there are more items than maxItems, the component will collapse middle items into an ellipsis menu. 
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} />

​
Props