Breadcrumb — RenDS Components

About

Overview

Breadcrumbs help orient the user when pages live deep in a hierarchy: Docs › Components › Breadcrumb. Each step links upward; the leaf (current page) is text, not a link. Use them for hierarchical content (docs, file systems, e-commerce categories) — not for chronological flows like multi-step forms (use a stepper for that).

Live

Demo

<nav class="ren-breadcrumb" aria-label="Breadcrumb">
  <ol>
    <li><a href="/docs">Docs</a></li>
    <li><a href="/docs/components">Components</a></li>
    <li><a href="/docs/components/primitives">Primitives</a></li>
    <li aria-current="page">Breadcrumb</li>
  </ol>
</nav>

Shapes

Variants

Default separator

Slash separator

Truncated

Middle items collapse to … under .ren-breadcrumb-truncated — first and last two stay visible.

Reference

API

CSS classes & tokens

Class / token	Effect
`.ren-breadcrumb`	Wraps the `<nav>`. Sets the typography and color.
`.ren-breadcrumb > ol`	The list itself. Inline-flex with gap; resets list styling.
`--breadcrumb-separator`	CSS custom property for the separator glyph. Default `'›'`. Use `'/'` or `'›'` for variants.
`.ren-breadcrumb-truncated`	Collapses middle items to `…`; keeps first and last two.
`[aria-current="page"]`	Marks the leaf. Renders as plain text, no underline. Required.

Inclusive by default

Accessibility

Wrap in <nav aria-label="Breadcrumb">. Without the label, screen readers announce a generic "navigation".
Use a real <ol>, not a sequence of spans. Order matters in a breadcrumb; the list reflects that.
Mark the current page with aria-current="page". It's a plain <li> with no link — assistive tech announces it as the active step.
Don't link the current page to itself. Confusing for everyone.

Patterns

Examples

App documentation

<nav class="ren-breadcrumb" aria-label="Breadcrumb">
  <ol>
    <li><a href="/docs">Docs</a></li>
    <li><a href="/docs/getting-started">Getting started</a></li>
    <li aria-current="page">Install</li>
  </ol>
</nav>

File path

<nav class="ren-breadcrumb" style="--breadcrumb-separator: '/';" aria-label="File path">
  <ol>
    <li><a href="/files">files</a></li>
    <li><a href="/files/projects">projects</a></li>
    <li aria-current="page">atlas.md</li>
  </ol>
</nav>