22 CSS Breadcrumbs
Advertisement
A CSS breadcrumb is a navigation trail that shows where the visitor sits in a site's hierarchy. These 22 hand-coded designs are drop-in trail components for documentation sites, e-commerce categories, and dashboards — copy the markup, point each link at your routes, and ship.
01 / 22
Underline Grow
Pure CSS 
A gradient underline grows from left to right on hover. Current page uses a solid accent line.
02 / 22
Pill Breadcrumbs
Pure CSS 
Each crumb is a rounded pill. Hover blooms a background. Current page shows solid accent fill.
03 / 22
Diagonal Slash
Pure CSS 
Parallelogram-shaped crumbs using clip-path. Active fills with gradient; hover lifts slightly.
04 / 22
Neon Trail
Pure CSS 
Neon glow builds along each separator arrow. Current page pulses with a multi-layer glow.
05 / 22
Brutalist Hard Shadow
Pure CSS 
Hard offset box-shadows. Hover shifts the shadow. Current page inverts to a filled block.
06 / 22
Frosted Glass
Pure CSS 
Glass pill breadcrumbs with backdrop-filter over a gradient background.
07 / 22
Vertical Stacked
Pure CSS 
Vertical timeline-style breadcrumb with connecting dots and a glowing active indicator.
08 / 22
Editorial Numbered
Pure CSS 
Magazine-style numbered breadcrumbs. Active number swells; separator is a hairline rule.
09 / 22
Retro Terminal Path
Pure CSS 
Unix path-style breadcrumbs with a blinking cursor — looks like navigating a filesystem.
10 / 22
Gradient Text
Pure CSS 
Each crumb shifts from muted grey to a full gradient on hover. Current page always shows the gradient.
11 / 22
Chip with Icon
Pure CSS 
Rounded chip breadcrumbs each with an icon. Active chip fills with accent gradient.
12 / 22
Subway Line
Pure CSS 
Crumbs as metro stops on a horizontal line. The current page is the lit "you are here" stop with a soft pulsing glow.
13 / 22
Floating Island
Pure CSS 
Each crumb is a floating card that springs upward on hover with a shadow bloom.
14 / 22
Scale Peek
Pure CSS 
On hover the whole list dims and scales down — only the hovered crumb scales up to full.
15 / 22
Holographic Shimmer
Pure CSS 
Current page gets a looping rainbow holographic background. Past crumbs are plain text.
16 / 22
Arrow Chain
Pure CSS 
CSS arrow-chevron breadcrumbs using border triangles — no SVG or images needed.
17 / 22
Dotted Separator
Pure CSS 
Ellipsis dots between crumbs that expand on hover for a subtle kinetic effect.
18 / 22
Bordered Box
Pure CSS 
All crumbs share one bordered container with dividers. Active gets an inset top+bottom accent stroke.
19 / 22
Progress Track
Pure CSS 
Stepper-style breadcrumb with numbered nodes connected by a track line — great for multi-step flows.
20 / 22
Glassmorphism Bar
Pure CSS 
All crumbs live inside a single frosted glass pill container with blur and saturation.
21 / 22
Wave Underline
Pure CSS 
An animated SVG wave appears under each link on hover — the current page keeps the wave active.
Advertisement
Build your own
Tweak the exact look in our visual generators — no signup, instant copy-paste.
FAQ
Frequently asked questions
What is the correct HTML for a breadcrumb?
Wrap the trail in a nav element with aria-label='Breadcrumb', put the items in an ordered list (ol) since the order is meaningful, and make each step a link except the current page. Mark the current page with aria-current='page'. This semantic structure is what screen readers and search engines expect — every breadcrumb in this gallery uses it.
How do I style breadcrumb separators in pure CSS?
Don't put separator characters in the HTML — add them with CSS so they stay decorative. Use a ::before pseudo-element on each list item (skipping the first) with content: '/' or '›', or a chevron drawn with borders. This keeps the markup clean and means assistive tech reads only the real link text, not the slashes.
Do CSS breadcrumbs help SEO?
Yes. Breadcrumbs show site hierarchy, and when paired with BreadcrumbList structured data (JSON-LD) Google can display the breadcrumb trail directly in search results instead of a plain URL. The semantic nav + ol markup these demos use is the foundation; add the matching BreadcrumbList schema on real pages to get the rich result.
Do these CSS breadcrumbs need JavaScript?
The layouts and hover effects are pure CSS. JavaScript is only used for a couple of interactive variants (such as a collapsing trail that expands on click for very deep paths); where used, the snippet is included with the demo. The standard breadcrumb designs need no JS at all.
Are these breadcrumb designs accessible and free?
Yes. Each demo uses nav with aria-label, an ordered list, real links, aria-current on the active page, and visible focus states; decorative separators are CSS-only so they aren't announced. All 22 designs are MIT licensed and free for personal and commercial use.
Related collections
26 CSS Accordions — Vertical & Horizontal
26
26 free CSS accordions — 17 vertical and 9 horizontal layouts with copy-paste HTML and CSS.
accordion vertical accordion horizontal accordion
Responsive
21 CSS Circular & Radial Menu Designs
21
21 free CSS circular and radial menu designs — pie, dome, orbital and skeumorphic layouts with copy-paste HTML and CSS.
css circular menu radial menu dome menu
Responsive
6 CSS Mega Menus & Dropdown Menus
6
6 hand-coded CSS mega-menu and dropdown layouts — luxury editorial fashion, cyberpunk terminal panel, biophilic architecture studio, Swiss-grid department store, precision outdoor gear finder, and flash-sale command center. Hover + click/tap. Copy-paste ready, accessible, mobile-friendly.
mega menu dropdown menu navigation
Responsive