Breadcrumbs

Renders a horizontal navigation trail from an array of path items. All items except the last are rendered as clickable buttons; the last item is displayed as bold non-interactive text representing the current location. Optional icons are supported on each item.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | path | BreadcrumbItem[] | Yes | — | Ordered array of breadcrumb items to render. | | onNavigate | (item: BreadcrumbItem, index: number) => void | Yes | — | Callback fired when a clickable breadcrumb item is pressed. | | containerStyle | React.CSSProperties | No | — | Inline styles for the <nav> container. | | buttonStyle | React.CSSProperties | No | — | Inline styles for each clickable breadcrumb button. |

BreadcrumbItem shape

| Field | Type | Required | Description | |-------|------|----------|-------------| | name | string | Yes | Unique identifier for the item. | | label | string | Yes | Human-readable display text. | | icon | string \| null | No | Icon name displayed before the label. | | color | string \| null | No | Color associated with the item (not applied in default render). |

Usage

Basic

import Breadcrumbs from '@/components/Breadcrumbs';

const path = [
  { name: 'home', label: 'Home' },
  { name: 'products', label: 'Products' },
  { name: 'detail', label: 'Product Detail' },
];

export default function Example() {
  const handleNavigate = (item, index) => {
    console.log('Navigate to:', item.name, 'at index', index);
  };

  return <Breadcrumbs path={path} onNavigate={handleNavigate} />;
}

With icons

import Breadcrumbs from '@/components/Breadcrumbs';

const path = [
  { name: 'dashboard', label: 'Dashboard', icon: 'home' },
  { name: 'sales', label: 'Sales', icon: 'chart' },
  { name: 'report', label: 'Monthly Report', icon: 'document' },
];

export default function Example() {
  return (
    <Breadcrumbs
      path={path}
      onNavigate={(item, index) => console.log(item.name)}
    />
  );
}