Breadcrumbs component — web, brutalist 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). Brutalist style: high contrast, Space Grotesk, uppercase headings, thick black borders and hard offset shadows. 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: Brutalist
Product (fictional): Juniper Supply
Category: Commerce

Spec

Colours (light): background #fcfbf8 · surface #ffffff · text #27241b · muted #676357 · primary #725e00 · accent #757ae3
Colours (dark): background #15130e · surface #26241c · text #f4f4f1 · muted #b4b1a7 · primary #c2a200 · accent #b6beff
Fonts: Space Grotesk (headings and 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:#fcfbf8;--surface:#ffffff;--border:#dddacf;--text:#27241b;--muted:#676357;--primary:#725e00;--on-primary:#ffffff;--accent:#757ae3;--font-h:"Space Grotesk",Georgia,serif;--font-b:"Space Grotesk",system-ui,sans-serif;--hw:700;
--c-bw:2px;--c-line:var(--text);--c-r:0;--c-pill:0;--c-sh:3px 3px 0 var(--text);--c-pop:6px 6px 0 var(--text);--c-tt:uppercase;--c-ls:.02em;--c-fw:700;--c-fs:13px;--c-ring:3px solid var(--text);--c-ind:4px;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#15130e;--surface:#26241c;--border:#3d3a32;--text:#f4f4f1;--muted:#b4b1a7;--primary:#c2a200;--on-primary:#111111;--accent:#b6beff;color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#15130e;--surface:#26241c;--border:#3d3a32;--text:#f4f4f1;--muted:#b4b1a7;--primary:#c2a200;--on-primary:#111111;--accent:#b6beff;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(--text);border-width:2.5px 2.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;background:var(--text);color:var(--bg);padding:2px 8px}
.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 (3px solid text), never removed
- **Style knobs (brutalist):** border 2px, corners 0, shadow `3px 3px 0 var(--text)`, labels uppercase, tracked .02em
- **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: Space Grotesk (Google Fonts)

Ask your AIClaude ChatGPT Gemini

More ▾

Writing about this component?

More breadcrumbs components

web · minimal

web · editorial

web · luxury

web · playful

web · corporate

web · retro

web · monochrome

mobile · brutalist

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.