15 CSS Navigation Menu Designs 09 / 15

CSS Breadcrumb Navigation

A versatile breadcrumb navigation component with three style variants: classic arrow separators, rounded pill badges, and a slash-separated minimal style.

Pure CSS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="nav-09">

  <div class="nav-09__section">
    <p class="nav-09__section-label">Chevron Separator (default)</p>
    <ol class="nav-09__crumb" aria-label="Breadcrumb">
      <li><a href="#">Home</a></li>
      <li>
        <svg class="nav-09__sep" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
        <a href="#">Documentation</a>
      </li>
      <li>
        <svg class="nav-09__sep" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
        <a href="#">CSS Guides</a>
      </li>
      <li>
        <svg class="nav-09__sep" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
        <span aria-current="page">Navigation Patterns</span>
      </li>
    </ol>
  </div>

  <div class="nav-09__section">
    <p class="nav-09__section-label">Slash Separator</p>
    <ol class="nav-09__crumb nav-09__crumb--slash" aria-label="Breadcrumb">
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Website Redesign</a></li>
      <li><span aria-current="page">Assets</span></li>
    </ol>
  </div>

  <div class="nav-09__section">
    <p class="nav-09__section-label">With Icons</p>
    <ol class="nav-09__crumb" aria-label="Breadcrumb">
      <li>
        <a href="#" style="display:flex;align-items:center">
          <svg class="nav-09__crumb-icon" viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg>Home
        </a>
      </li>
      <li>
        <svg class="nav-09__sep" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
        <a href="#" style="display:flex;align-items:center">
          <svg class="nav-09__crumb-icon" viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>Components
        </a>
      </li>
      <li>
        <svg class="nav-09__sep" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
        <span aria-current="page" style="display:flex;align-items:center">
          <svg class="nav-09__crumb-icon" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>Navigation
        </span>
      </li>
    </ol>
  </div>

  <div class="nav-09__section">
    <p class="nav-09__section-label">Filled Pill Style</p>
    <ol class="nav-09__crumb nav-09__crumb--filled" aria-label="Breadcrumb">
      <li><a href="#">Home</a></li>
      <li>
        <svg class="nav-09__sep" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
        <a href="#">Products</a>
      </li>
      <li>
        <svg class="nav-09__sep" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
        <span aria-current="page">Navigation Bars</span>
      </li>
    </ol>
  </div>

  <div class="nav-09__section">
    <p class="nav-09__section-label">Mobile Back Button</p>
    <a href="#" class="nav-09__back" aria-label="Back to CSS Guides">
      <svg viewBox="0 0 24 24"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
      CSS Guides
    </a>
  </div>

  <div class="nav-09__section">
    <p class="nav-09__section-label">In Context — Documentation Layout</p>
    <div class="nav-09__doc">
      <div class="nav-09__doc-bar">
        <ol class="nav-09__crumb" style="background:transparent;border:none;padding:0" aria-label="Breadcrumb">
          <li><a href="#">Docs</a></li>
          <li><svg class="nav-09__sep" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg><a href="#">Navigation</a></li>
          <li><svg class="nav-09__sep" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg><span aria-current="page">Breadcrumbs</span></li>
        </ol>
      </div>
      <div class="nav-09__doc-body">
        <h2>Breadcrumb Navigation</h2>
        <p>Breadcrumbs show users where they are in the site hierarchy and let them jump up to any ancestor page. Built entirely with CSS using <code>flex</code>, pseudo-elements for separators, and <code>:hover</code> transitions — no JavaScript needed.</p>
      </div>
    </div>
  </div>

</div>
.nav-09,.nav-09 *,.nav-09 *::before,.nav-09 *::after{box-sizing:border-box;margin:0;padding:0}
.nav-09 ::selection{background:#0d9488;color:#fff}
.nav-09{
  --bg:#f0fdfa;--surface:#fff;--border:#ccfbf1;
  --text:#0f172a;--muted:#64748b;--link:#0d9488;--link-h:#0f766e;
  font-family:'Source Sans 3',system-ui,sans-serif;
  background:var(--bg);min-height:100vh;
  display:flex;flex-direction:column;align-items:center;
  padding:60px 24px;gap:48px;
}
.nav-09__section{width:100%;max-width:700px}
.nav-09__section-label{
  font-size:.7rem;font-weight:700;color:#0d9488;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;
}

/* base breadcrumb */
.nav-09__crumb{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:0;list-style:none;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;
  padding:12px 18px;
}
.nav-09__crumb li{display:flex;align-items:center}
.nav-09__crumb li a{
  color:var(--link);text-decoration:none;font-size:.9rem;font-weight:500;
  padding:3px 6px;border-radius:5px;transition:background .15s,color .15s;
}
.nav-09__crumb li a:hover{background:#ccfbf1;color:var(--link-h)}
.nav-09__crumb li span{
  font-size:.9rem;font-weight:600;color:var(--text);
  padding:3px 6px;
}
/* separator with chevron */
.nav-09__sep{
  width:16px;height:16px;margin:0 2px;opacity:.35;flex-shrink:0;
  stroke:var(--text);fill:none;stroke-width:2;
}
/* separator with slash */
.nav-09__crumb--slash li:not(:last-child)::after{
  content:'/';margin:0 8px;color:rgba(0,0,0,.2);font-size:.9rem;
}
.nav-09__crumb--slash .nav-09__sep{display:none}
/* separator with dot */
.nav-09__crumb--dot li:not(:last-child)::after{
  content:'·';margin:0 8px;color:rgba(0,0,0,.25);font-size:1.2rem;line-height:1;
}
.nav-09__crumb--dot .nav-09__sep{display:none}

/* icons in crumbs */
.nav-09__crumb-icon{
  width:14px;height:14px;margin-right:5px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;
}

/* filled crumb style */
.nav-09__crumb--filled{background:transparent;border:none;padding:0;gap:4px}
.nav-09__crumb--filled li a{
  background:var(--surface);border:1px solid var(--border);
  padding:6px 12px;border-radius:8px;
  display:flex;align-items:center;
}
.nav-09__crumb--filled li a:hover{background:#ccfbf1;border-color:#5eead4}
.nav-09__crumb--filled li span{
  background:var(--link);color:#fff;padding:6px 12px;border-radius:8px;border:1px solid transparent;
}
.nav-09__crumb--filled .nav-09__sep{stroke:var(--muted)}

/* compact / mobile crumb with back only */
.nav-09__back{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--link);text-decoration:none;font-size:.9rem;font-weight:600;
  padding:8px 14px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);transition:background .15s,border-color .15s;
}
.nav-09__back:hover{background:#ccfbf1;border-color:#5eead4}
.nav-09__back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.5}

/* doc layout */
.nav-09__doc{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;
}
.nav-09__doc-bar{
  padding:16px 24px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.nav-09__doc-body{padding:28px 24px}
.nav-09__doc-body h2{font-size:1.375rem;font-weight:700;color:var(--text);margin-bottom:10px}
.nav-09__doc-body p{font-size:.9375rem;color:var(--muted);line-height:1.7}

@media(prefers-reduced-motion:reduce){.nav-09__crumb li a,.nav-09__back{transition:none}}

How this works

Arrow separators use `::after` pseudo-elements with `border` tricks to create CSS triangles, colored to match the item background for a seamless chain effect. Pill variants use `border-radius: 9999px` with background fills. The slash variant uses `content: '/'` in `::before`.

Customize

  • Swap the `content` value in `::after`/`::before` to use `/`, `>`, or Unicode arrows like `›`. Change `--accent` for active item color. Add `aria-label='breadcrumb'` and `aria-current='page'` on the last item for accessibility.

Watch out for

  • CSS triangle arrows (border trick) require matching background colors between the triangle and the element behind it — they don't work over gradients or images. Use SVG arrows or `clip-path` for non-solid backgrounds.

Browser support

ChromeSafariFirefoxEdge
all modern all modern all modern all modern

More from 15 CSS Navigation Menu Designs

CSS Horizontal Navigation Bar with Hover UnderlineCSS Dropdown Navigation MenuCSS Mega Menu NavigationCSS Hamburger Menu with Slide-Out DrawerCSS Full-Screen Overlay NavigationCSS Sidebar Navigation MenuCSS Tab Navigation with Animated IndicatorCSS Navigation with Glassmorphism EffectCSS Animated Navigation Icons with LabelsCSS Multi-Level Accordion NavigationCSS Neon Glow Navigation MenuCSS Morphing Navigation Pill Indicator
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →