# Breadcrumb

> Source: https://design.nanatec.co.ke/components/breadcrumb/
> A navigation trail showing the user's location in a hierarchy. Compose it from `nana-breadcrumb-item` children; the last item is usually `current`. One element covers the common professional patterns through orthogonal attributes: - **Standard / Chevron / Path** — `separator` (`slash` · `chevron` · `arrow` · `dot`, or any custom glyph) and `variant="path"`. - **Pill · Card · Step** — `variant`. - **Truncated / Dropdown** — `max-items` collapses the middle into a `…`, either inline (`collapse="expand"`) or into a menu (`collapse="dropdown"`). - **Mobile compact / back-nav** — `responsive` collapses to `← Parent` below `compact-width`. - **Underlined** — `underline` emphasises the current page (composes with any variant).

A navigation trail showing the user's location in a hierarchy. Compose it from `nana-breadcrumb-item` children; the last item is usually `current`. One element covers the common professional patterns through orthogonal attributes: - **Standard / Chevron / Path** — `separator` (`slash` · `chevron` · `arrow` · `dot`, or any custom glyph) and `variant="path"`. - **Pill · Card · Step** — `variant`. - **Truncated / Dropdown** — `max-items` collapses the middle into a `…`, either inline (`collapse="expand"`) or into a menu (`collapse="dropdown"`). - **Mobile compact / back-nav** — `responsive` collapses to `← Parent` below `compact-width`. - **Underlined** — `underline` emphasises the current page (composes with any variant).

## Preview

```html
<nana-breadcrumb>
  <nana-breadcrumb-item href="#">Home</nana-breadcrumb-item>
  <nana-breadcrumb-item href="#">Components</nana-breadcrumb-item>
  <nana-breadcrumb-item>Breadcrumb</nana-breadcrumb-item>
</nana-breadcrumb>
```

## Installation

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

## Import

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

## Basic usage

```html
<nana-breadcrumb>
  <nana-breadcrumb-item href="#">Home</nana-breadcrumb-item>
  <nana-breadcrumb-item href="#">Components</nana-breadcrumb-item>
  <nana-breadcrumb-item>Breadcrumb</nana-breadcrumb-item>
</nana-breadcrumb>
```

## Item states

`current` marks the active page; `disabled` dims a crumb.

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

## Variants

The `variant` attribute restyles the trail — `default`, `path`, `pill`, `card`,
or `step`.

```html
<nana-breadcrumb variant="pill">
  <nana-breadcrumb-item href="#">Home</nana-breadcrumb-item>
  <nana-breadcrumb-item href="#">Library</nana-breadcrumb-item>
  <nana-breadcrumb-item current>Data</nana-breadcrumb-item>
</nana-breadcrumb>
<nana-breadcrumb variant="step">
  <nana-breadcrumb-item href="#">Cart</nana-breadcrumb-item>
  <nana-breadcrumb-item href="#">Shipping</nana-breadcrumb-item>
  <nana-breadcrumb-item current>Payment</nana-breadcrumb-item>
</nana-breadcrumb>
<nana-breadcrumb variant="card">
  <nana-breadcrumb-item href="#">Home</nana-breadcrumb-item>
  <nana-breadcrumb-item href="#">Docs</nana-breadcrumb-item>
  <nana-breadcrumb-item current>Guide</nana-breadcrumb-item>
</nana-breadcrumb>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-expand` | `CustomEvent` | Fired when a truncated trail is expanded inline |

## Slots

| Slot | Description |
|---|---|
| `(default)` | One or more `nana-breadcrumb-item` elements |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-breadcrumb-separator` | — | Separator glyph between items |
| `--nana-breadcrumb-gap` | — | Space around each separator |

## CSS Parts

| Part | Description |
|---|---|
| `base` | The `<nav>` landmark |
| `list` | The `<ol>` that lays out the items |
| `menu` | The overflow dropdown menu |

## Accessibility

<ul class="a11y-grid not-content">
  <li>Keyboard accessible</li>
  <li>Screen-reader labels</li>
  <li>Focus-visible states</li>
  <li>ARIA roles and states</li>
  <li>WCAG 2.2 AA contrast</li>
</ul>

## Related components

<ul class="related not-content">
  <li><a href="/components/breadcrumb-item/">Breadcrumb Item</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--docs