Breadcrumbs component — web, editorial style

Breadcrumbs UI component for websites and web apps, shown in Juniper Supply, a fictional commerce product. Shows a full breadcrumb trail with the current page, a long trail collapsed behind a show-more button, a mobile back-to-parent form, and every link state (default, hover, focus-visible, current, collapsed). Editorial style: warm paper tones, Instrument Serif headlines with Inter body text and tabular figures, square corners. Comes with copyable HTML, CSS and a few lines of plain JavaScript (keyboard support and ARIA per the WAI-ARIA Authoring Practices), a live demo, and a DESIGN.md with light and dark colour tokens.

Open live HTML ↗ Download DESIGN.md

Pattern: Breadcrumbs
Device: Web
Style: Editorial
Product (fictional): Juniper Supply
Category: Commerce

Spec

Colours (light): background #fffaf5 · surface #f9eade · text #2c1f13 · muted #715f51 · primary #b5594f · accent #0093aa
Colours (dark): background #1a1008 · surface #2b1f14 · text #f9f1eb · muted #beaea0 · primary #f69c90 · accent #4bd0ec
Fonts: Instrument Serif (headings), Inter (body), JetBrains Mono (code) · Google Fonts, under their own licences
Light and dark: Both included; follows the system setting
ARIA pattern: Breadcrumb (WAI-ARIA Authoring Practices)
Keyboard: Tab between links; Enter follows
States: default, hover, focus-visible, current, collapsed

breadcrumbswebcommerce

Code

Paste the HTML where the component goes, the CSS into your stylesheet and the script before </body>. The tokens block holds the light and dark colours; swap in your own.

HTML

<div class="mgd-crumbs-demo">
<div><h3>Full trail (folds to a back link on phones)</h3>
<nav class="mgd-crumbs mgd-crumbs--fold" aria-label="Breadcrumb">
  <ol>
    <li><a class="mgd-crumbs__link" href="/">Home</a></li>
    <li><a class="mgd-crumbs__link" href="/kitchen">Kitchen</a></li>
    <li><a class="mgd-crumbs__link" href="/kitchen/coffee">Coffee &amp; tea</a></li>
    <li><a class="mgd-crumbs__link" href="/kitchen/coffee/pour-over">Pour-over</a></li>
    <li><a class="mgd-crumbs__link" href="#" aria-current="page">Stoneware pour-over set</a></li>
  </ol>
</nav></div>
<div><h3>Long trail, collapsed</h3>
<nav class="mgd-crumbs" aria-label="Breadcrumb, help centre">
  <ol>
    <li><a class="mgd-crumbs__link" href="/help">Help</a></li>
    <li><button class="mgd-crumbs__more" type="button" aria-expanded="false" aria-label="Show 3 more levels">…</button></li>
    <li data-crumb-hidden><a class="mgd-crumbs__link" href="/help/orders">Orders</a></li>
    <li data-crumb-hidden><a class="mgd-crumbs__link" href="/help/orders/delivery">Delivery</a></li>
    <li data-crumb-hidden><a class="mgd-crumbs__link" href="/help/orders/delivery/international">International</a></li>
    <li><a class="mgd-crumbs__link" href="/help/orders/delivery/international/customs">Customs</a></li>
    <li><a class="mgd-crumbs__link" href="#" aria-current="page">Duties on orders over $150</a></li>
  </ol>
</nav></div>
</div>

CSS

/* Tokens (light + dark) */
:root{--bg:#fffaf5;--surface:#f9eade;--border:#dac9bb;--text:#2c1f13;--muted:#715f51;--primary:#b5594f;--on-primary:#ffffff;--accent:#0093aa;--font-h:"Instrument Serif",Georgia,serif;--font-b:"Inter",system-ui,sans-serif;--hw:400;
--c-bw:1px;--c-line:var(--text);--c-r:2px;--c-pill:2px;--c-sh:none;--c-pop:0 10px 30px rgb(0 0 0 / .12);--c-tt:none;--c-ls:0;--c-fw:500;--c-fs:14px;--c-ring:2px solid var(--text);--c-ind:1px;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1a1008;--surface:#2b1f14;--border:#43352a;--text:#f9f1eb;--muted:#beaea0;--primary:#f69c90;--on-primary:#111111;--accent:#4bd0ec;color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#1a1008;--surface:#2b1f14;--border:#43352a;--text:#f9f1eb;--muted:#beaea0;--primary:#f69c90;--on-primary:#111111;--accent:#4bd0ec;color-scheme:dark}

/* Component */
.mgd-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mgd-crumbs{font:500 14px/1.4 var(--font-b);text-transform:var(--c-tt);letter-spacing:var(--c-ls)}
.mgd-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mgd-crumbs li{display:inline-flex;align-items:center;gap:6px;min-width:0}
.mgd-crumbs li+li::before{content:"";flex:none;width:7px;height:7px;border:solid var(--muted);border-width:1.5px 1.5px 0 0;transform:rotate(45deg);margin:0 6px 0 2px}
.mgd-crumbs__link{color:var(--muted);text-decoration:none;padding:4px 2px;border-radius:4px;transition:color .12s}
.mgd-crumbs__link:hover,.mgd-crumbs__link.is-hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.mgd-crumbs__link:focus-visible,.mgd-crumbs__link.is-focus{outline:var(--c-ring);outline-offset:2px}
.mgd-crumbs [aria-current="page"],.mgd-crumbs__link.is-on{color:var(--text);font-weight:600;text-decoration:none;}
.mgd-crumbs__more{min-width:32px;height:28px;padding:0 8px;border:1px solid var(--text);border-radius:var(--c-pill);background:var(--surface);color:var(--text);font:600 14px/1 var(--font-b);cursor:pointer}
.mgd-crumbs__more:hover,.mgd-crumbs__more.is-hover{background:color-mix(in oklab,var(--primary) 10%,var(--surface))}
.mgd-crumbs__more:focus-visible,.mgd-crumbs__more.is-focus{outline:var(--c-ring);outline-offset:2px}
.mgd-crumbs [data-crumb-hidden]{display:none}
.mgd-crumbs-demo{display:grid;gap:26px}
.mgd-crumbs-demo h3{margin:0 0 10px;font:600 12px var(--font-b);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (max-width:520px){.mgd-crumbs--fold li{display:none}
.mgd-crumbs--fold li:nth-last-child(2){display:inline-flex}
.mgd-crumbs--fold li:nth-last-child(2)::before{content:"";width:7px;height:7px;border:solid var(--muted);border-width:0 0 1.5px 1.5px;transform:rotate(45deg);margin:0 4px 0 2px}}
@media (prefers-reduced-motion:reduce){.mgd-crumbs,.mgd-crumbs *{transition:none!important;animation-duration:2.4s!important}}

JavaScript

document.querySelectorAll(".mgd-crumbs__more").forEach(function (b) {
  b.addEventListener("click", function () {
    var hidden = [].slice.call(b.closest("ol").querySelectorAll("[data-crumb-hidden]"));
    hidden.forEach(function (li) { li.removeAttribute("data-crumb-hidden"); });
    var li = b.parentNode, first = hidden[0] && hidden[0].querySelector("a");
    li.parentNode.removeChild(li);
    if (first) first.focus();
  });
});

DESIGN.md

Component section (states, ARIA, keyboard)

## Component: Breadcrumbs

Where the current page sits in the site. On narrow screens the middle levels fold into a back link to the parent.

- **Pattern:** WAI-ARIA Authoring Practices, Breadcrumb (https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/)
- **Roles and attributes:** <nav aria-label="Breadcrumb"> around an ordered list of links; the last item is the current page with aria-current="page"; separators are drawn with CSS so screen readers do not read them.
- **States drawn:** default, hover, focus-visible, current, collapsed
- **Focus:** a visible `:focus-visible` outline (2px solid text), never removed
- **Style knobs (editorial):** border 1px, corners 2px, shadow none, labels sentence case
- **Motion:** transitions are short (≤160ms) and switched off under `prefers-reduced-motion: reduce`
- **Code:** HTML + CSS + a few lines of plain JavaScript (no libraries); colours come only from the tokens above, so light and dark both work

### Keyboard
- **Tab:** move between the links
- **Enter:** follow a link

### Licence
Original Made Good Designs code: free to use and adapt in any project, including commercial ones, with no credit needed. Fonts are Google Fonts under their own licences.

Build this with your AI

Fonts: Instrument Serif + Inter (Google Fonts)

Ask your AIClaude ChatGPT Gemini

More ▾

Writing about this component?

More breadcrumbs components

web · minimal

web · brutalist

web · luxury

web · playful

web · corporate

web · retro

web · monochrome

mobile · editorial

Building with an AI coding agent? Every screen here is also in the free Made Good Designs MCP server: ask Claude, Cursor or ChatGPT to search_ui_screens (e.g. “billing settings, editorial style”), get_ui_flow for a whole journey, and get_ui_screen_code to pull the HTML and DESIGN.md straight into your project.