# SilkeBreadcrumbs

A navigation component that shows the user's location within a hierarchical structure. Breadcrumbs help users understand where they are and navigate back to parent pages.

## Features

- **Accessible navigation**: Semantic `<nav>` and `<ol>` elements with ARIA labels
- **Interactive items**: Click handlers for navigation
- **Icons support**: Add icons or emoji to breadcrumb items
- **Separator**: Automatic chevron separators between items
- **Overflow handling**: Text truncation for long labels

## Basic Usage

```js
<SilkeBreadcrumbs>
  <SilkeBreadcrumb label="Home" onClick={() => console.log('Home')} />
  <SilkeBreadcrumb label="Products" onClick={() => console.log('Products')} />
  <SilkeBreadcrumb label="Electronics" onClick={() => console.log('Electronics')} />
  <SilkeBreadcrumb label="Phones" noSlash />
</SilkeBreadcrumbs>
```

## With Icons

Add icons to breadcrumb items:

```js
<SilkeBreadcrumbs>
  <SilkeBreadcrumb label="Home" icon="home" onClick={() => {}} />
  <SilkeBreadcrumb label="Settings" icon="settings" onClick={() => {}} />
  <SilkeBreadcrumb label="Profile" icon="user" noSlash />
</SilkeBreadcrumbs>
```

## With Emoji

Use emoji icons:

```js
<SilkeBreadcrumbs>
  <SilkeBreadcrumb label="Home" icon={{ type: 0, value: '🏠' }} onClick={() => {}} />
  <SilkeBreadcrumb label="Projects" icon={{ type: 0, value: '📁' }} onClick={() => {}} />
  <SilkeBreadcrumb label="My Project" icon={{ type: 0, value: '📄' }} noSlash />
</SilkeBreadcrumbs>
```

## Current Page (Non-Interactive)

The last item is typically non-interactive (no `onClick`):

```js
<SilkeBreadcrumbs>
  <SilkeBreadcrumb label="Dashboard" onClick={() => console.log('Dashboard')} />
  <SilkeBreadcrumb label="Users" onClick={() => console.log('Users')} />
  <SilkeBreadcrumb label="John Doe" noSlash />
</SilkeBreadcrumbs>
```

## Dynamic Breadcrumbs

Build breadcrumbs from data:

```js
const path = [
  { label: 'Home', id: 'home' },
  { label: 'Documents', id: 'docs' },
  { label: 'Projects', id: 'projects' },
  { label: 'Report.pdf', id: 'file' },
];

<SilkeBreadcrumbs>
  {path.map((item, index) => (
    <SilkeBreadcrumb
      key={item.id}
      label={item.label}
      onClick={index < path.length - 1 ? () => console.log(`Navigate to ${item.id}`) : undefined}
      noSlash={index === path.length - 1}
    />
  ))}
</SilkeBreadcrumbs>;
```

## Interactive Navigation

Navigate through levels:

```js
const [path, setPath] = React.useState(['Home', 'Products', 'Electronics', 'Phones', 'iPhone']);

const navigateTo = (index) => {
  setPath(path.slice(0, index + 1));
};

<SilkeBox column gap="m">
  <SilkeBreadcrumbs>
    {path.map((item, index) => (
      <SilkeBreadcrumb
        key={index}
        label={item}
        onClick={index < path.length - 1 ? () => navigateTo(index) : undefined}
        noSlash={index === path.length - 1}
      />
    ))}
  </SilkeBreadcrumbs>
  <SilkeText size="s" color="neutral-60">Click a breadcrumb to navigate back</SilkeText>
</SilkeBox>;
```

## In a Page Header

```js
<SilkeBox column gap="m" pad="m" bg="neutral-10" rounded>
  <SilkeBreadcrumbs>
    <SilkeBreadcrumb label="Dashboard" icon="home" onClick={() => {}} />
    <SilkeBreadcrumb label="Projects" onClick={() => {}} />
    <SilkeBreadcrumb label="My Project" noSlash />
  </SilkeBreadcrumbs>
  <SilkeText kind="title">My Project</SilkeText>
  <SilkeText color="neutral-60">Project description and details</SilkeText>
</SilkeBox>
```

## Props

### SilkeBreadcrumbs

| Prop       | Type              | Default | Description                    |
| ---------- | ----------------- | ------- | ------------------------------ |
| `children` | `React.ReactNode` | -       | SilkeBreadcrumb items          |
| `maxItems` | `number`          | -       | Maximum items to display       |

Also accepts `SilkeBox` navigation props.

### SilkeBreadcrumb

| Prop      | Type                                       | Default | Description                              |
| --------- | ------------------------------------------ | ------- | ---------------------------------------- |
| `label`   | `React.ReactNode`                          | -       | Breadcrumb text                          |
| `icon`    | `IEmojiIcon \| SilkeIcons`                 | -       | Icon or emoji to display                 |
| `noSlash` | `boolean`                                  | `false` | Hide the chevron separator               |
| `onClick` | `(e: React.MouseEvent) => void`            | -       | Click handler (makes item interactive)   |

## Accessibility

- Uses semantic `<nav>` element with `aria-label="Breadcrumbs"`
- Uses ordered list `<ol>` for proper document structure
- Interactive items render as `<a>` elements
- Current page (last item) should not have an `onClick` handler

## Styling Notes

- Interactive items show hover/focus states
- Long labels are truncated with ellipsis
- Chevron separators are automatically added between items
- Use `noSlash` on the last item to hide its separator