# Breadcrumb Item

> Source: https://design.nanatec.co.ke/components/breadcrumb-item/
> A single step in a `nana-breadcrumb` trail. Renders as a link when `href` is set, otherwise as plain text. Mark the final step with `current` so it is announced as the current page and rendered as non-interactive text. Item variants compose through attributes: - **Icon / Icon-only** — slot a `nana-icon` into `prefix` (add `aria-label` when there is no text). - **Disabled / Loading** — `disabled`, `loading` (skeleton placeholder). - **Dropdown** — `dropdown` turns the item into a menu trigger; put the menu entries in the `menu` slot. - **Ellipsis** — `ellipsis` renders a static `⋯`. - **Status / Badge** — `status` (success·warning·error·info) and `badge`. The `data-*` attributes are driven by the parent `nana-breadcrumb` (variant, step index, collapse/compact state) — you normally don't set them by hand.

A single step in a `nana-breadcrumb` trail. Renders as a link when `href` is set, otherwise as plain text. Mark the final step with `current` so it is announced as the current page and rendered as non-interactive text. Item variants compose through attributes: - **Icon / Icon-only** — slot a `nana-icon` into `prefix` (add `aria-label` when there is no text). - **Disabled / Loading** — `disabled`, `loading` (skeleton placeholder). - **Dropdown** — `dropdown` turns the item into a menu trigger; put the menu entries in the `menu` slot. - **Ellipsis** — `ellipsis` renders a static `⋯`. - **Status / Badge** — `status` (success·warning·error·info) and `badge`. The `data-*` attributes are driven by the parent `nana-breadcrumb` (variant, step index, collapse/compact state) — you normally don't set them by hand.

## Preview

```html
<nana-breadcrumb>
  <nana-breadcrumb-item href="#">Home</nana-breadcrumb-item>
  <nana-breadcrumb-item current>Current</nana-breadcrumb-item>
</nana-breadcrumb>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/breadcrumb-item";
```

## Basic usage

```html
<nana-breadcrumb>
  <nana-breadcrumb-item href="#">Home</nana-breadcrumb-item>
  <nana-breadcrumb-item current>Current</nana-breadcrumb-item>
</nana-breadcrumb>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-click` | `CustomEvent` | Fired when an interactive item (link or overflow trigger) is activated |
| `nana-toggle` | `CustomEvent` | Fired when a `dropdown` item opens or closes (`detail.open`) |

## Slots

| Slot | Description |
|---|---|
| `(default)` | The item label |
| `prefix` | Content before the label (e.g. a leading `nana-icon`) |
| `menu` | Dropdown menu entries (shown when `dropdown` is open) |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-breadcrumb-color` | — | Link/label text colour |
| `--nana-breadcrumb-color-hover` | — | Link text colour on hover |
| `--nana-breadcrumb-current-color` | — | Current page text colour |
| `--nana-breadcrumb-separator-color` | — | Separator glyph colour |

## CSS Parts

| Part | Description |
|---|---|
| `separator` | The glyph before the item |
| `marker` | The step number marker (step variant) |
| `link` | The `<a>` / `<button>` element (non-current, interactive items) |
| `label` | The text wrapper (current / static items) |
| `badge` | The trailing badge |
| `status` | The status dot |
| `skeleton` | The loading placeholder |
| `menu` | The item dropdown menu |

## Related components

<ul class="related not-content">
  <li><a href="/components/breadcrumb/">Breadcrumb</a></li>
  <li><a href="/components/menu/">Menu</a></li>
  <li><a href="/components/menu-item/">Menu Item</a></li>
  <li><a href="/components/menu-label/">Menu Label</a></li>
  <li><a href="/components/menubar/">Menubar</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-breadcrumb-item--docs