Breadcrumb

Single-line navigation trail. A flex row of .breadcrumb__item children separated by a single themed pseudo-element glyph parked in --kc-breadcrumb-separator (default: right arrow). Three alignment modifiers, two size modifiers. Zero JavaScript.

Live

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol>
    <li class="breadcrumb__item"><a href="/">Home</a></li>
    <li class="breadcrumb__item"><a href="/docs">Docs</a></li>
    <li class="breadcrumb__item"><a href="/docs/reference">Reference</a></li>
    <li class="breadcrumb__item" aria-current="page"><a href="#">Breadcrumb</a></li>
  </ol>
</nav>

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'module-breadcrumb')
);

<nav class="breadcrumb is-centered" aria-label="Breadcrumb">
  <ol>
    <li class="breadcrumb__item"><a href="/">Home</a></li>
    <li class="breadcrumb__item"><a href="/docs">Docs</a></li>
    <li class="breadcrumb__item is-current"><a href="#">Breadcrumb</a></li>
  </ol>
</nav>

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'module-breadcrumb')
);

Markup

The component accepts both <ol> (semantically correct for navigation breadcrumbs per the WAI-ARIA APG) and <ul> children — both render identically. The separator is painted as a ::before pseudo-element on every .breadcrumb__item except the first; :first-child::before strips the glyph regardless of flex order: overrides or wrapper markup.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol>
    <li class="breadcrumb__item"><a href="/">Home</a></li>
    <li class="breadcrumb__item"><a href="/docs">Docs</a></li>
    <li class="breadcrumb__item"><a href="/docs/reference">Reference</a></li>
    <li class="breadcrumb__item" aria-current="page"><a href="#">Breadcrumb</a></li>
  </ol>
</nav>

Separator

A single glyph drives every item separator, configured at compile time via the $separator SCSS variable and exposed at runtime via the --kc-breadcrumb-separator custom property. Two override paths:

• Theme level (SCSS) — @use 'krysalicss/module/breadcrumb' with ($separator: '\\002F') bakes the glyph at build time.
• Per-instance (CSS) — set --kc-breadcrumb-separator: '\203A' at any scope (page, modifier class, single instance) to swap the glyph without a recompile.

Default: \2192 (→). Common alternatives: \002F (/), \203A (›), \2022 (•), \00B7 (·).

Current-page state

Both selectors target the active crumb identically:

• [aria-current="page"] — the WAI-ARIA contract; screen readers announce "current page".
• .is-current — the styling-only equivalent for static-site generators that can't render the ARIA attribute.

Both branches paint identically (heavier font-weight, no link underline, pointer-events: none on the nested anchor) so the visual and a11y states stay coupled. Pair both when authoring by hand for maximum portability.

Variables

Override example

// Swap the separator glyph at theme level.
@use '@adnap/krysalicss/module/breadcrumb' with (
  $separator: '\\002F',         // back to a slash
  $gap: 0.75rem,
  $separator-mix: 60%,
  $current-font-weight: 700,
);

// Or override at runtime via the custom property (no recompile).
.breadcrumb.compact {
  --kc-breadcrumb-separator: '\\203A'; // ›
}

Tokens consumed

Accessibility

• Wrap the breadcrumb in <nav aria-label="Breadcrumb"> so assistive tech announces the landmark.
• Use <ol> for the inner list — order is meaningful in a breadcrumb.
• Mark the final crumb with aria-current="page". The class-only .is-current is a visual fallback; pair both when possible.
• The separator is a pseudo-element, invisible to AT by construction; no aria-hidden markup is needed.