39 CSS Breadcrumbs
07 / 39

All 39 in 39 CSS Breadcrumbs

  1. 01Accessible Breadcrumb Navigation with Schema.org Microdata & ARIA
  2. 02Responsive Collapsing CSS Breadcrumb Bar using :has() Selector
  3. 03Adaptive Light & Dark Mode Breadcrumb Bar with CSS Custom Properties
  4. 04E-Commerce Filter & Attribute Breadcrumb Navigation Component
  5. 05Modern Glassmorphism Floating Breadcrumb Bar UI Design
  6. 06Neumorphic Soft UI Breadcrumb Navigation with Dual Box Shadows
  7. 07Sticky Top CSS Navigation Header with Shrinking Breadcrumb Trail
  8. 08Material Design Flat Breadcrumb Navigation Bar
  9. 09Isometric 3D Layered CSS Breadcrumb Navigation
  10. 10Breadcrumb Bar with Built-In Dropdown Sibling Menus
  11. 11Full-Width Block-Style Segmented CSS Breadcrumb Bar
  12. 12CSS Custom-Property Accent-Color Toggle Breadcrumb
  13. 13Seamless Arrow-Cutout CSS3 Breadcrumb Trail
  14. 14Compact Icon-Only Home Node CSS Breadcrumb Bar
  15. 15Segmented Rounded-Outline Pill CSS Breadcrumb
  16. 16Neumorphic Soft Inset-Shadow CSS Breadcrumbs
  17. 17CSS Grid Auto-Fitting Responsive Breadcrumb Trail
  18. 18NFT/Web3 Holographic Shimmer Breadcrumb Component
  19. 19SaaS Marketing Site Gradient Text Breadcrumb Bar
  20. 20Airbnb-Style Filter Chip Breadcrumb Navigation with Icons
  21. 21Editorial Blog Breadcrumb with Animated Wave Underline Hover
  22. 22Developer Docs Breadcrumb with One-Click Path Copy to Clipboard
  23. 23Modern Pure CSS Arrow Breadcrumb Bar using clip-path Polygons
  24. 24Multi-Line Aligned CSS Grid Subgrid Breadcrumb Layout
  25. 25Interactive Breadcrumb Links with Animated CSS Underline Glow
  26. 26Minimalist CSS Breadcrumb with Custom SVG Separators
  27. 27Multi-Step Checkout & Form Wizard CSS Breadcrumb Indicator
  28. 28Pure CSS Ribbon-Style Chevron Breadcrumb Trail
  29. 29Pill-Shape Badge CSS Breadcrumb Bar UI
  30. 30Clean Line-Separator Minimalist CSS Breadcrumbs
  31. 31Gradient Background Glow CSS Breadcrumb Bar
  32. 32Floating Card Shadow CSS Breadcrumb Navigation
  33. 33Truncated Ellipsis Compact CSS Mobile Breadcrumb
  34. 34Inline Bullet-Point Dot Separator CSS Breadcrumb
  35. 35Skewed Parallel Quadrilateral CSS Breadcrumb Bar
  36. 36Outline Border-Only Geometric CSS Breadcrumbs
  37. 37Circular Icon & Numbered CSS Step Breadcrumbs
  38. 38Frosted Glass Dark UI CSS Breadcrumb Component
  39. 39Modern Micro-Interaction Animated Hover Breadcrumbs
CSS + JSMIT licensed

Sticky Top CSS Navigation Header with Shrinking Breadcrumb Trail

A sticky page header whose breadcrumb trail shrinks as you scroll — font size, padding and vertical footprint all contract into a compact bar that stays pinned to the top. Modern build uses CSS scroll-driven animation-timeline:scroll(); a tiny IntersectionObserver fallback ships for engines without it.

Live Demo
Plain CSSTailwind v4
Try it

Build interactive UI like this from scratch: 20 HTML, CSS & JavaScript projects

ZTM · JavaScript Web Projects · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

The code

<div class="bc-07" data-shrunk="false">
  <header class="bc-07__bar">
    <span class="bc-07__logo" aria-hidden="true"></span>
    <nav aria-label="Breadcrumb">
      <ol>
        <li><a href="#">Home</a></li>
        <li><a href="#">Docs</a></li>
        <li><a href="#" aria-current="page">Scroll-driven UI</a></li>
      </ol>
    </nav>
  </header>
  <div class="bc-07__sentinel" aria-hidden="true"></div>
  <div class="bc-07__content">
    <h1 class="bc-07__h1">Scroll-driven sticky breadcrumb header</h1>
    <p class="bc-07__lede">Scroll this panel &darr; and watch the sticky breadcrumb header at the top compress into a slim pinned bar. Padding, type scale, and logo size all contract via CSS <code>animation-timeline: scroll()</code> — no JavaScript scroll listener needed.</p>
    <h2 class="bc-07__h2">How the shrink is wired</h2>
    <p>Modern browsers support scroll-driven animations natively (Chrome 115+, Safari 26+, Firefox 134+). The trick is one <code>@keyframes</code> block plus <code>animation-timeline: scroll(nearest)</code> on the sticky header. As the user scrolls past a sentinel div, the timeline advances from 0 to 1 and the browser interpolates the keyframe values.</p>
    <p>This is the exact pattern <strong>Docusaurus 3</strong>, <strong>Mintlify</strong>, <strong>Nextra</strong>, <strong>VitePress</strong>, <strong>Starlight</strong>, and <strong>Fumadocs</strong> ship on their generated docs sites. No IntersectionObserver, no scroll event listener, no rAF throttle needed — the browser&rsquo;s own compositor drives the animation.</p>
    <h2 class="bc-07__h2">Accessibility contract</h2>
    <p>The breadcrumb still needs to satisfy WCAG 2.4.8 (Location) and WCAG 1.4.3 (Contrast Minimum) regardless of shrink state. Both expanded and compact states use a token-based color system that maintains AA contrast against the frosted-glass backdrop.</p>
    <p>Motion is gated behind <code>@media (prefers-reduced-motion: no-preference)</code> — users who opted out of motion at the OS level see a static bar at the compact size, never the animation. This is WCAG 2.3.3 (Animation from Interactions) compliance.</p>
    <h2 class="bc-07__h2">Falling back gracefully</h2>
    <p>Older Safari and Firefox versions that don&rsquo;t support <code>animation-timeline: scroll()</code> just render the base state — a sticky bar with the expanded padding. The demo also ships a 12-line IntersectionObserver fallback that toggles a <code>.is-shrunk</code> class when the sentinel exits the viewport, so the shrink still works for the ~5% of users on older engines.</p>
    <p>Feature-detect once at page load: <code>if (CSS.supports(&#39;animation-timeline&#39;, &#39;scroll()&#39;)) &#123; /* skip JS fallback */ &#125;</code>. Ship both paths; let the browser pick.</p>
    <h2 class="bc-07__h2">Try it: scroll to the bottom</h2>
    <p>The last paragraph sits at the far bottom so you can watch the header shrink smoothly as the sentinel scrolls out of view. Grab the scrollbar or two-finger swipe to see the full range of the animation.</p>
    <p>Keep scrolling &darr;</p>
    <p>The shrink kicks in at the sentinel boundary, then holds at the compact size all the way to the bottom.</p>
    <p>Once you scroll back up past the sentinel, the header expands smoothly back to its original size &mdash; the animation is bidirectional.</p>
    <p>The frosted-glass <code>backdrop-filter</code> stays consistent throughout, so body text never fights the header for contrast.</p>
    <p>This is the scroll-driven pattern behind every modern docs-site UX from 2024 onward.</p>
    <p>End of scroll region.</p>
  </div>
</div>
.bc-07 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  font-family: system-ui,'Segoe UI',sans-serif;
  height: 300px;
  overflow-y: auto;
  background: oklch(0.97 0.006 255);
  position: relative;
  scrollbar-width: thin;
  place-items: center;
}

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

.bc-07__bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: oklch(1 0 0/.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid oklch(0.9 0.01 255);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: padding .3s ease,box-shadow .3s ease;
}

.bc-07__logo {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  background: conic-gradient(from 210deg,oklch(0.62 0.17 265),oklch(0.6 0.16 210));
  transition: width .3s ease,height .3s ease;
}

.bc-07 ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-07 li {
  display: flex;
  align-items: center;
}

.bc-07 li + li::before {
  content: "›";
  margin: 0 8px;
  color: oklch(0.72 0.02 255);
}

.bc-07 a {
  font: 600 15px/1 system-ui,sans-serif;
  color: oklch(0.5 0.1 260);
  text-decoration: none;
  padding: 3px 5px;
  border-radius: 6px;
  transition: font-size .3s ease,color .15s ease;
}

.bc-07 a:hover {
  color: oklch(0.42 0.14 260);
}

.bc-07 a:focus-visible {
  outline: 2px solid oklch(0.5 0.15 260);
  outline-offset: 2px;
}

.bc-07 li[aria-current="page"] a {
  color: oklch(0.28 0.02 255);
  font-weight: 700;
}

.bc-07[data-shrunk="true"] .bc-07__bar {
  padding: 9px 24px;
  box-shadow: 0 4px 18px rgba(0,0,0,.1);
}

.bc-07[data-shrunk="true"] .bc-07__logo {
  width: 24px;
  height: 24px;
}

.bc-07[data-shrunk="true"] .bc-07 a {
  font-size: 13px;
}

.bc-07__sentinel {
  height: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .bc-07__bar,
    .bc-07__logo,
    .bc-07 a {
    transition: none;
  }
}

.bc-07 .bc-07__h1 {
  font: 700 22px/1.3 system-ui,sans-serif;
  color: oklch(0.25 0.02 255);
  margin: 0 0 8px;
}

.bc-07 .bc-07__h2 {
  font: 700 15px/1.3 system-ui,sans-serif;
  color: oklch(0.3 0.02 255);
  margin: 24px 0 6px;
}

.bc-07 .bc-07__lede {
  font: 500 15px/1.55 system-ui,sans-serif;
  color: oklch(0.42 0.02 255);
  margin: 0 0 20px;
  max-width: 60ch;
}

.bc-07 .bc-07__content {
  padding: 24px 24px 40px;
}

.bc-07 .bc-07__content p {
  margin: 0 0 14px;
  color: oklch(0.42 0.02 255);
  font-size: 14px;
  line-height: 1.65;
  max-width: 60ch;
}

.bc-07 .bc-07__content code {
  font: 500 12.5px/1 ui-monospace,Menlo,monospace;
  color: oklch(0.35 0.05 260);
  background: oklch(0.94 0.01 255);
  padding: 2px 6px;
  border-radius: 4px;
}

.bc-07 .bc-07__content strong {
  color: oklch(0.28 0.02 255);
  font-weight: 700;
}
/* Scroll-shrink via IntersectionObserver (universal fallback for animation-timeline:scroll()) */
document.querySelectorAll('.bc-07').forEach((root) => {
  const sentinel = root.querySelector('.bc-07__sentinel');
  const io = new IntersectionObserver(
    ([e]) => root.setAttribute('data-shrunk', String(!e.isIntersecting)),
    { root, threshold: 0 }
  );
  io.observe(sentinel);
});
/* Pure-CSS alternative: give .bc-07__bar { animation: shrink linear both; animation-timeline: scroll(nearest); } and keyframe the same properties. */
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: Sticky Top CSS Navigation Header with Shrinking Breadcrumb Trail
Source: https://codefronts.com/navigation/css-breadcrumbs/sticky-top-css-navigation-header-with-shrinking-breadcrumb-trail/

A sticky page header whose breadcrumb trail shrinks as you scroll — font size, padding and vertical footprint all contract into a compact bar that stays pinned to the top. Modern build uses CSS scroll-driven animation-timeline:scroll(); a tiny IntersectionObserver fallback ships for engines without it.
## HTML
```html
<div class="bc-07" data-shrunk="false">
  <header class="bc-07__bar">
    <span class="bc-07__logo" aria-hidden="true"></span>
    <nav aria-label="Breadcrumb">
      <ol>
        <li><a href="#">Home</a></li>
        <li><a href="#">Docs</a></li>
        <li><a href="#" aria-current="page">Scroll-driven UI</a></li>
      </ol>
    </nav>
  </header>
  <div class="bc-07__sentinel" aria-hidden="true"></div>
  <div class="bc-07__content">
    <h1 class="bc-07__h1">Scroll-driven sticky breadcrumb header</h1>
    <p class="bc-07__lede">Scroll this panel &darr; and watch the sticky breadcrumb header at the top compress into a slim pinned bar. Padding, type scale, and logo size all contract via CSS <code>animation-timeline: scroll()</code> — no JavaScript scroll listener needed.</p>
    <h2 class="bc-07__h2">How the shrink is wired</h2>
    <p>Modern browsers support scroll-driven animations natively (Chrome 115+, Safari 26+, Firefox 134+). The trick is one <code>@keyframes</code> block plus <code>animation-timeline: scroll(nearest)</code> on the sticky header. As the user scrolls past a sentinel div, the timeline advances from 0 to 1 and the browser interpolates the keyframe values.</p>
    <p>This is the exact pattern <strong>Docusaurus 3</strong>, <strong>Mintlify</strong>, <strong>Nextra</strong>, <strong>VitePress</strong>, <strong>Starlight</strong>, and <strong>Fumadocs</strong> ship on their generated docs sites. No IntersectionObserver, no scroll event listener, no rAF throttle needed — the browser&rsquo;s own compositor drives the animation.</p>
    <h2 class="bc-07__h2">Accessibility contract</h2>
    <p>The breadcrumb still needs to satisfy WCAG 2.4.8 (Location) and WCAG 1.4.3 (Contrast Minimum) regardless of shrink state. Both expanded and compact states use a token-based color system that maintains AA contrast against the frosted-glass backdrop.</p>
    <p>Motion is gated behind <code>@media (prefers-reduced-motion: no-preference)</code> — users who opted out of motion at the OS level see a static bar at the compact size, never the animation. This is WCAG 2.3.3 (Animation from Interactions) compliance.</p>
    <h2 class="bc-07__h2">Falling back gracefully</h2>
    <p>Older Safari and Firefox versions that don&rsquo;t support <code>animation-timeline: scroll()</code> just render the base state — a sticky bar with the expanded padding. The demo also ships a 12-line IntersectionObserver fallback that toggles a <code>.is-shrunk</code> class when the sentinel exits the viewport, so the shrink still works for the ~5% of users on older engines.</p>
    <p>Feature-detect once at page load: <code>if (CSS.supports(&#39;animation-timeline&#39;, &#39;scroll()&#39;)) &#123; /* skip JS fallback */ &#125;</code>. Ship both paths; let the browser pick.</p>
    <h2 class="bc-07__h2">Try it: scroll to the bottom</h2>
    <p>The last paragraph sits at the far bottom so you can watch the header shrink smoothly as the sentinel scrolls out of view. Grab the scrollbar or two-finger swipe to see the full range of the animation.</p>
    <p>Keep scrolling &darr;</p>
    <p>The shrink kicks in at the sentinel boundary, then holds at the compact size all the way to the bottom.</p>
    <p>Once you scroll back up past the sentinel, the header expands smoothly back to its original size &mdash; the animation is bidirectional.</p>
    <p>The frosted-glass <code>backdrop-filter</code> stays consistent throughout, so body text never fights the header for contrast.</p>
    <p>This is the scroll-driven pattern behind every modern docs-site UX from 2024 onward.</p>
    <p>End of scroll region.</p>
  </div>
</div>
```
## CSS
```css
.bc-07 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  font-family: system-ui,'Segoe UI',sans-serif;
  height: 300px;
  overflow-y: auto;
  background: oklch(0.97 0.006 255);
  position: relative;
  scrollbar-width: thin;
  place-items: center;
}

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

.bc-07__bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: oklch(1 0 0/.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid oklch(0.9 0.01 255);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: padding .3s ease,box-shadow .3s ease;
}

.bc-07__logo {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  background: conic-gradient(from 210deg,oklch(0.62 0.17 265),oklch(0.6 0.16 210));
  transition: width .3s ease,height .3s ease;
}

.bc-07 ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-07 li {
  display: flex;
  align-items: center;
}

.bc-07 li + li::before {
  content: "›";
  margin: 0 8px;
  color: oklch(0.72 0.02 255);
}

.bc-07 a {
  font: 600 15px/1 system-ui,sans-serif;
  color: oklch(0.5 0.1 260);
  text-decoration: none;
  padding: 3px 5px;
  border-radius: 6px;
  transition: font-size .3s ease,color .15s ease;
}

.bc-07 a:hover {
  color: oklch(0.42 0.14 260);
}

.bc-07 a:focus-visible {
  outline: 2px solid oklch(0.5 0.15 260);
  outline-offset: 2px;
}

.bc-07 li[aria-current="page"] a {
  color: oklch(0.28 0.02 255);
  font-weight: 700;
}

.bc-07[data-shrunk="true"] .bc-07__bar {
  padding: 9px 24px;
  box-shadow: 0 4px 18px rgba(0,0,0,.1);
}

.bc-07[data-shrunk="true"] .bc-07__logo {
  width: 24px;
  height: 24px;
}

.bc-07[data-shrunk="true"] .bc-07 a {
  font-size: 13px;
}

.bc-07__sentinel {
  height: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .bc-07__bar,
    .bc-07__logo,
    .bc-07 a {
    transition: none;
  }
}

.bc-07 .bc-07__h1 {
  font: 700 22px/1.3 system-ui,sans-serif;
  color: oklch(0.25 0.02 255);
  margin: 0 0 8px;
}

.bc-07 .bc-07__h2 {
  font: 700 15px/1.3 system-ui,sans-serif;
  color: oklch(0.3 0.02 255);
  margin: 24px 0 6px;
}

.bc-07 .bc-07__lede {
  font: 500 15px/1.55 system-ui,sans-serif;
  color: oklch(0.42 0.02 255);
  margin: 0 0 20px;
  max-width: 60ch;
}

.bc-07 .bc-07__content {
  padding: 24px 24px 40px;
}

.bc-07 .bc-07__content p {
  margin: 0 0 14px;
  color: oklch(0.42 0.02 255);
  font-size: 14px;
  line-height: 1.65;
  max-width: 60ch;
}

.bc-07 .bc-07__content code {
  font: 500 12.5px/1 ui-monospace,Menlo,monospace;
  color: oklch(0.35 0.05 260);
  background: oklch(0.94 0.01 255);
  padding: 2px 6px;
  border-radius: 4px;
}

.bc-07 .bc-07__content strong {
  color: oklch(0.28 0.02 255);
  font-weight: 700;
}
```

## JavaScript
```js
/* Scroll-shrink via IntersectionObserver (universal fallback for animation-timeline:scroll()) */
document.querySelectorAll('.bc-07').forEach((root) => {
  const sentinel = root.querySelector('.bc-07__sentinel');
  const io = new IntersectionObserver(
    ([e]) => root.setAttribute('data-shrunk', String(!e.isIntersecting)),
    { root, threshold: 0 }
  );
  io.observe(sentinel);
});
/* Pure-CSS alternative: give .bc-07__bar { animation: shrink linear both; animation-timeline: scroll(nearest); } and keyframe the same properties. */
```

How this works

The header is position:sticky;top:0;z-index:100 so it pins as the page scrolls. The shrink is driven by a scroll progress signal: the modern path is a CSS animation-timeline:scroll(root) that ties a keyframed --shrink (0→1) to the document's scroll position, and the header interpolates padding, font-size and logo scale from that variable — zero JS. Because some engines and some embedded contexts (like a gallery tile that scrolls internally) don't expose a usable scroll timeline, the demo ships a 12-line IntersectionObserver that toggles a data-shrunk attribute when a sentinel scrolls out of view — a robust, universally-supported fallback that drives the exact same CSS transitions.

Either way the visual contract is identical: a set of properties transition between a 'tall' and 'compact' state. Keeping the trail readable while compact matters — the current page label never shrinks below 13px, and the whole bar keeps its accessible <nav> semantics throughout. The transition is guarded by prefers-reduced-motion, which pins the compact state immediately instead of animating on every scroll tick.

Make it yours

  • Prefer pure CSS? Delete the JS and use animation-timeline:scroll() + @keyframes driving --shrink — supported in Chrome 115+.
  • Shrink threshold is the sentinel height (or the scroll-timeline range) — 80px feels natural; raise it to delay the collapse.
  • Add a subtle box-shadow that fades in only when shrunk to lift the pinned bar off the content.
  • Hide intermediate crumbs when compact (combine with demo 03's collapse) for an ultra-dense scrolled state.

Gotchas — read before shipping

  • position:sticky silently fails if any ancestor has overflow:hidden/auto — the demo's stage is the scroll container, so the sticky is relative to it.
  • Scroll-driven animation-timeline needs a scroll container with actual overflow; in a non-scrolling embed it never advances — that's exactly why the JS fallback exists.
  • Animate padding/font-size transitions, not layout-thrashing properties in a scroll handler — set a class/attr and let CSS transition, as here.
  • Debounce is unnecessary with IntersectionObserver (it fires only on threshold crossing) — don't reintroduce a scroll listener.

Browser support

ChromeSafariFirefoxEdge
115+ (CSS) / all (JS fallback)all (JS fallback)all (JS fallback)115+ (CSS) / all (JS fallback)

animation-timeline:scroll() is Chrome 115+/Firefox 111+; the IntersectionObserver fallback (shipped here) runs everywhere back to 2019.

Techniques used in this demo

scrollbar-gutter / -width / -colorMDN ↗conic-gradient()MDN ↗backdrop-filterMDN ↗place-items / place-contentMDN ↗:focus-visibleMDN ↗box-shadowMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →