---
outline: deep
---

# Breadcrumb

A breadcrumb shows the current page's position in the site hierarchy and lets users step back up the trail. Commonly used at the top of content pages, product categories, and settings sections.

Built on native markup — a `<nav>` landmark wrapping an ordered list of links — following the [WAI-ARIA breadcrumb pattern](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/). No JavaScript required.

**`.l-breadcrumb`** — Native HTML Element

## Options

### Basic

Add `class="l-breadcrumb"` to a `<nav>` with an `aria-label`, then list one `<li><a>` per crumb inside a single `<ol>`. Mark the current page's link with `aria-current="page"` — it renders as a non-interactive emphasis.

```html
<nav
  class="l-breadcrumb"
  aria-label="Breadcrumb"
>
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Bags</a></li>
    <li>
      <a
        href="#"
        aria-current="page"
        >Leather tote</a
      >
    </li>
  </ol>
</nav>
```

### With icons

Drop an `<l-icon>` inside any crumb's `<a>` — for a leading home glyph or to label a section. Give a standalone icon a `label` so it has an accessible name.

```html
<nav
  class="l-breadcrumb"
  aria-label="Breadcrumb"
>
  <ol>
    <li>
      <a href="#">
        <l-icon
          name="lucide:house"
          label="Home"
        ></l-icon>
      </a>
    </li>
    <li>
      <a href="#">
        <l-icon name="lucide:folder"></l-icon>
        Projects
      </a>
    </li>
    <li>
      <a
        href="#"
        aria-current="page"
        >Acme redesign</a
      >
    </li>
  </ol>
</nav>
```

### Custom separator

The divider is a decorative oblique `/`. Recolor it with `--separator-color`, or swap the glyph with any character (e.g. `'›'`) or a `url()` image via `--separator`.

```html
<div class="flex flex-col gap-4">
  <!-- Recolor the divider with --separator-color -->
  <nav
    class="l-breadcrumb [--separator-color:var(--l-color-text-info)]"
    aria-label="Breadcrumb"
  >
    <ol>
      <li><a href="#">Home</a></li>
      <li><a href="#">Library</a></li>
      <li>
        <a
          href="#"
          aria-current="page"
          >Data</a
        >
      </li>
    </ol>
  </nav>

  <!-- Swap the glyph with any character via --separator -->
  <nav
    class="l-breadcrumb [--separator:'›']"
    aria-label="Breadcrumb"
  >
    <ol>
      <li><a href="#">Home</a></li>
      <li><a href="#">Library</a></li>
      <li>
        <a
          href="#"
          aria-current="page"
          >Data</a
        >
      </li>
    </ol>
  </nav>
</div>
```

### Long trails

The trail never wraps — when it overflows it scrolls horizontally (with touch momentum on mobile). To shorten a deep path instead, keep the first and last crumbs visible and fold the middle ones into an [`l-dropdown`](/elements/dropdown). Label the trigger so its purpose is announced.

```html
<!--
  Long trails: keep the first and last crumbs visible and collapse the middle
  ones into an l-dropdown. The trigger is a plain button styled to sit inline
  with the trail; the hidden ancestors become links inside the menu.
-->
<nav
  class="l-breadcrumb"
  aria-label="Breadcrumb"
>
  <ol>
    <li><a href="#">Home</a></li>
    <li>
      <l-dropdown class="inline-flex items-center">
        <button
          slot="trigger"
          class="inline-flex items-center rounded-[--l-radius-sm] px-1 text-tertiary hover:text-primary"
          aria-label="Show 3 more breadcrumbs"
        >
          <l-icon name="lucide:ellipsis"></l-icon>
        </button>
        <l-dropdown-item><a href="#">Products</a></l-dropdown-item>
        <l-dropdown-item><a href="#">Bags</a></l-dropdown-item>
        <l-dropdown-item><a href="#">Leather</a></l-dropdown-item>
      </l-dropdown>
    </li>
    <li><a href="#">Totes</a></li>
    <li>
      <a
        href="#"
        aria-current="page"
        >Weekend tote</a
      >
    </li>
  </ol>
</nav>
```

### Custom link styles

Add `data-unstyled-links` to opt out of Luxen's link theming and apply your own link class (or framework link component). Layout, separators, horizontal scroll, and the current-page behavior stay intact.

```html
<!--
  data-unstyled-links turns off Luxen's link theming (color, underline, hover)
  so your own class fully owns the look. Structure, separators, the horizontal
  scroll, and the current-page behavior all stay. Here the links use plain
  Tailwind utilities instead.
-->
<nav
  class="l-breadcrumb"
  data-unstyled-links
  aria-label="Breadcrumb"
>
  <ol>
    <li>
      <a
        href="#"
        class="font-semibold text-primary underline-offset-4 hover:underline"
        >Home</a
      >
    </li>
    <li>
      <a
        href="#"
        class="font-semibold text-primary underline-offset-4 hover:underline"
        >Products</a
      >
    </li>
    <li>
      <a
        href="#"
        aria-current="page"
        class="font-semibold text-tertiary"
        >Bags</a
      >
    </li>
  </ol>
</nav>
```

## Accessibility

### Criteria

- **Landmark** — A `<nav>` with an `aria-label` of `Breadcrumb` exposes the trail as a named navigation region
- **Structure** — Crumbs sit in an ordered list (`<ol>`/`<li>`), conveying sequence to assistive tech
- **Current page** — An `aria-current` of `page` on the last crumb identifies the user's location
- **Decorative separators** — Separators are CSS pseudo-elements, never in the DOM, so they are not announced
- **Color contrast** — Link and separator colors meet contrast against the background

### Rules

- Wrap the trail in a `<nav>` with an `aria-label` of `Breadcrumb` and use a single `<ol>` of `<li>` crumbs
- Mark the current page with `aria-current` set to `page` on its `<a>`
- Give standalone icons (e.g. a home glyph) an accessible name via the `label` attribute

### Keyboard interactions

- `Tab` — Moves focus to the next crumb link
- `Shift + Tab` — Moves focus to the previous crumb link
- `Enter` — Follows the focused crumb link

## API reference

### Importing

```css
@import 'luxen-ui/css/breadcrumb';
```

### Attributes

- **aria-label** — Names the navigation landmark (use `"Breadcrumb"`).
- **aria-current** — Set to `page` on the current crumb's `<a>`.
- **data-unstyled-links** — Opt out of Luxen's link theming (color, underline, hover) so you can apply your own link class. Layout, separators, scroll, and current-page behavior stay.

### CSS classes

- `.l-breadcrumb` — Breadcrumb navigation on a `<nav>` wrapping an `<ol>` of `<li><a>` crumbs.

### CSS custom properties

- `--gap` (default: `0.5rem`) — Space between crumbs and around the separator.
- `--separator-color` (default: `var(--l-color-text-tertiary)`) — Separator glyph color.
- `--separator` (default: `'/'`) — Divider glyph; any character (e.g. `'›'`) or a `url()` image.