v0.14.0

Appearance

Breadcrumb <nav> ​

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. No JavaScript required.

HTML tag<nav>
⏣Native
⬡Progressive
◇Plain
⬢Shadow-DOM
Native 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.

Code
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.

Code
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.

Code
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. Label the trigger so its purpose is announced.

Code
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>

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.

Code
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

WCAG1.3.1
RGAA9.2
Structure

Crumbs sit in an ordered list (<ol>/<li>), conveying sequence to assistive tech

WCAG1.3.1
Current page

An aria-current of page on the last crumb identifies the user's location

WCAG4.1.2
Decorative separators

Separators are CSS pseudo-elements, never in the DOM, so they are not announced

WCAG1.3.1
Color contrast

Link and separator colors meet contrast against the background

WCAG1.4.3
RGAA3.2

Keyboard interactions ​

Tab
Moves focus to the next crumb link
ShiftTab
Moves focus to the previous crumb link
Enter
Follows the focused crumb link

API reference ​

Importing ​

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

Attributes ​

aria-labelAttribute
Names the navigation landmark (use "Breadcrumb").
aria-currentAttribute
Set to page on the current crumb's <a>.
data-unstyled-linksAttribute
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-breadcrumbClass
Breadcrumb navigation on a <nav> wrapping an <ol> of <li><a> crumbs.

CSS custom properties ​

--gapdefault:0.5remCustom property
Space between crumbs and around the separator.
--separator-colordefault:var(--l-color-text-tertiary)Custom property
Separator glyph color.
--separatordefault:'/'Custom property
Divider glyph; any character (e.g. '›') or a url() image.