39 CSS Breadcrumbs33 / 39

Pure CSSMIT licensed

Truncated Ellipsis Compact CSS Mobile Breadcrumb

A single-line breadcrumb engineered for tight mobile widths: each crumb caps its width and truncates long titles with an ellipsis, the trail never wraps or overflows, and the current page always stays fully visible while ancestors shrink first. Pure CSS overflow management for constrained viewports.

Published Updated

Live Demo
Try it

The code

<nav class="bc-33" aria-label="Breadcrumb">
  <ol>
    <li><a href="#" title="Home">Home</a></li>
    <li><a href="#" title="Electronics &amp; Accessories">Electronics &amp; Accessories</a></li>
    <li><a href="#" title="Headphones and Earbuds">Headphones and Earbuds</a></li>
    <li><a href="#" aria-current="page" title="Wireless Over-Ear Noise-Cancelling">Wireless Over-Ear Noise-Cancelling</a></li>
  </ol>
</nav>
.bc-33 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 26px;
  background: oklch(0.98 0.004 240);
  place-items: center;
}

.bc-33 * {
  box-sizing: border-box;
}

.bc-33 ol {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  list-style: none;
  margin: 0 auto;
  padding: 10px 12px;
  max-width: 340px;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  border: 1px solid oklch(0.9 0.008 240);
}

.bc-33 li {
  display: flex;
  align-items: center;
  min-width: 0;
}

.bc-33 li + li::before {
  content: "›";
  flex: none;
  margin: 0 6px;
  color: oklch(0.7 0.02 240);
}

.bc-33 a {
  min-width: 0;
  max-width: 12ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 500 13px/1 system-ui,sans-serif;
  color: oklch(0.5 0.09 250);
  text-decoration: none;
  padding: 2px 3px;
  border-radius: 5px;
}

.bc-33 li:not(:last-child) a {
  flex-shrink: 1;
}

.bc-33 a:hover {
  color: oklch(0.4 0.13 250);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bc-33 a:focus-visible {
  outline: 2px solid oklch(0.5 0.14 250);
  outline-offset: 1px;
}

.bc-33 li:first-child a,
.bc-33 li[aria-current="page"] a {
  flex-shrink: 0;
}

.bc-33 li[aria-current="page"] a {
  max-width: none;
  color: oklch(0.3 0.02 240);
  font-weight: 600;
}
/* No JavaScript — flex-shrink priorities + min-width:0 + text-overflow:ellipsis truncate ancestors first while the current page (flex-shrink:0) stays fully visible; nothing ever overflows. */
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Breadcrumb from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Truncated Ellipsis Compact CSS Mobile Breadcrumb
Source: https://codefronts.com/navigation/css-breadcrumbs/glassmorphism-bar/

A single-line breadcrumb engineered for tight mobile widths: each crumb caps its width and truncates long titles with an ellipsis, the trail never wraps or overflows, and the current page always stays fully visible while ancestors shrink first. Pure CSS overflow management for constrained viewports.
## HTML
```html
<nav class="bc-33" aria-label="Breadcrumb">
  <ol>
    <li><a href="#" title="Home">Home</a></li>
    <li><a href="#" title="Electronics &amp; Accessories">Electronics &amp; Accessories</a></li>
    <li><a href="#" title="Headphones and Earbuds">Headphones and Earbuds</a></li>
    <li><a href="#" aria-current="page" title="Wireless Over-Ear Noise-Cancelling">Wireless Over-Ear Noise-Cancelling</a></li>
  </ol>
</nav>
```
## CSS
```css
.bc-33 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 26px;
  background: oklch(0.98 0.004 240);
  place-items: center;
}

.bc-33 * {
  box-sizing: border-box;
}

.bc-33 ol {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  list-style: none;
  margin: 0 auto;
  padding: 10px 12px;
  max-width: 340px;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  border: 1px solid oklch(0.9 0.008 240);
}

.bc-33 li {
  display: flex;
  align-items: center;
  min-width: 0;
}

.bc-33 li + li::before {
  content: "›";
  flex: none;
  margin: 0 6px;
  color: oklch(0.7 0.02 240);
}

.bc-33 a {
  min-width: 0;
  max-width: 12ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 500 13px/1 system-ui,sans-serif;
  color: oklch(0.5 0.09 250);
  text-decoration: none;
  padding: 2px 3px;
  border-radius: 5px;
}

.bc-33 li:not(:last-child) a {
  flex-shrink: 1;
}

.bc-33 a:hover {
  color: oklch(0.4 0.13 250);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bc-33 a:focus-visible {
  outline: 2px solid oklch(0.5 0.14 250);
  outline-offset: 1px;
}

.bc-33 li:first-child a,
.bc-33 li[aria-current="page"] a {
  flex-shrink: 0;
}

.bc-33 li[aria-current="page"] a {
  max-width: none;
  color: oklch(0.3 0.02 240);
  font-weight: 600;
}
```

## JavaScript
```js
/* No JavaScript — flex-shrink priorities + min-width:0 + text-overflow:ellipsis truncate ancestors first while the current page (flex-shrink:0) stays fully visible; nothing ever overflows. */
```

How this works

The trail is a single display:flex;flex-wrap:nowrap row. Each crumb link is white-space:nowrap;overflow:hidden;text-overflow:ellipsis with a max-width cap, so a long category name becomes 'Wireless Over-Ear…' instead of pushing the row wide. The key move is priority: intermediate crumbs get flex-shrink:1 and a tight min-width, while the current page gets flex-shrink:0 and no truncation — so as space runs out, ancestors give up width first and the page you're on stays fully readable.

The whole row sits in an overflow:hidden container so nothing ever escapes the viewport, and separators are compact chevrons. On a comfortable width all labels show in full; squeeze the container and the truncation kicks in progressively from the least-important crumb. This is the pragmatic mobile pattern — no JS measuring, no layout jank, just CSS flex priorities and text-overflow doing their jobs.

Make it yours

  • Per-crumb max-width (in ch) is the truncation aggressiveness dial — 8ch is tight, 16ch is roomy.
  • Protect two crumbs (home + current) from shrinking by giving both flex-shrink:0.
  • Add a full-title title attribute (or a tooltip) so truncated labels are recoverable on hover/long-press.
  • Pair with demo 03's ellipsis-collapse for an even denser trail on the narrowest phones.

Gotchas — read before shipping

  • text-overflow:ellipsis needs all three: overflow:hidden, white-space:nowrap, and a constraining width — miss one and it won't clip.
  • A flex item won't shrink below its content unless you set min-width:0 — the classic flexbox truncation gotcha; it's required here.
  • Don't truncate the current page — users need to know where they are; give it flex-shrink:0.
  • Provide the full text somewhere (title attr / visually-hidden) so truncation doesn't hide information from screen readers or hover.

Browser support

ChromeSafariFirefoxEdge
111+15.4+113+111+

Floor set by oklch() as this demo is written. The core technique itself goes back further — Chrome all.

text-overflow, flex-shrink and min-width:0 are universally supported. This is a compatibility-first pattern with zero modern dependencies.

Techniques used in this demo

place-items / place-contentMDN ↗oklch()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →