22 CSS Breadcrumbs

navigation css-only animation interactive

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.

22 unique designs 21 Pure CSS 1 CSS + JS 100% copy-paste ready Published May 4, 2026

01 / 22

Underline Grow

Pure CSS

A gradient underline grows from left to right on hover.

Live Demo Try it

02 / 22

Pill Breadcrumbs

Pure CSS

Each crumb is a rounded pill.

Live Demo Try it

03 / 22

Diagonal Slash

Pure CSS

Parallelogram-shaped crumbs using clip-path.

Live Demo Try it

04 / 22

Neon Trail

Pure CSS

Neon glow builds along each separator arrow.

Live Demo Try it

05 / 22

Brutalist Hard Shadow

Pure CSS

Hard offset box-shadows.

Live Demo Try it

06 / 22

Frosted Glass

Pure CSS

Glass pill breadcrumbs with backdrop-filter over a gradient background.

Live Demo Try it

07 / 22

Vertical Stacked

Pure CSS

Vertical timeline-style breadcrumb with connecting dots and a glowing active indicator.

Live Demo Try it

08 / 22

Editorial Numbered

Pure CSS

Magazine-style numbered breadcrumbs.

Live Demo Try it

09 / 22

Retro Terminal Path

Pure CSS

Unix path-style breadcrumbs with a blinking cursor — looks like navigating a filesystem.

Live Demo Try it

10 / 22

Gradient Text

Pure CSS

Each crumb shifts from muted grey to a full gradient on hover.

Live Demo Try it

11 / 22

Chip with Icon

Pure CSS

Rounded chip breadcrumbs each with an icon.

Live Demo Try it

12 / 22

Subway Line

Pure CSS

Crumbs as metro stops on a horizontal line.

Live Demo Try it

13 / 22

Floating Island

Pure CSS

Each crumb is a floating card that springs upward on hover with a shadow bloom.

Live Demo Try it

14 / 22

Scale Peek

Pure CSS

On hover the whole list dims and scales down — only the hovered crumb scales up to full.

Live Demo Try it

15 / 22

Holographic Shimmer

Pure CSS

Current page gets a looping rainbow holographic background.

Live Demo Try it

16 / 22

Arrow Chain

Pure CSS

CSS arrow-chevron breadcrumbs using border triangles — no SVG or images needed.

Live Demo Try it

17 / 22

Dotted Separator

Pure CSS

Ellipsis dots between crumbs that expand on hover for a subtle kinetic effect.

Live Demo Try it

18 / 22

Bordered Box

Pure CSS

All crumbs share one bordered container with dividers.

Live Demo Try it

19 / 22

Progress Track

Pure CSS

Stepper-style breadcrumb with numbered nodes connected by a track line — great for multi-step flows.

Live Demo Try it

20 / 22

Glassmorphism Bar

Pure CSS

All crumbs live inside a single frosted glass pill container with blur and saturation.

Live Demo Try it

21 / 22

Wave Underline

Pure CSS

An animated SVG wave appears under each link on hover — the current page keeps the wave active.

Live Demo Try it

22 / 22

Copy Path

CSS+JS

Standard breadcrumb with a copy button that copies the current URL path and shows a toast.

Live Demo Try it

Build your own

Tweak the exact look in our visual generators — no signup, instant copy-paste.

Generator

CSS Animation Generator

Build CSS keyframe animations visually — pick a preset, tune duration, easing, direction…

Generator

CSS Transform Generator

Stack 2D and 3D CSS transforms visually — translate, rotate, scale, skew, perspective and…

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 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 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

20 CSS Hamburger Menus

20 hand-coded CSS hamburger menus with live demos — pure-CSS checkbox-hack toggle (no JavaScript), morphing icon animations, full-screen overlay, slide-out sidebar with push-canvas, responsive navbar, floating FAB radial menu, Tailwind CDN build, Bootstrap 5 navbar, WCAG-accessible aria pattern, grid-template-rows accordion, blur overlay, mobile bottom nav, multi-level nested dropdown, flexbox right-aligned, circular ripple expand, sticky shrinking header, neumorphic toggle, brutalist border, and a 3D rotating canvas push. 16 with a small vanilla JS snippet, 4 truly pure CSS. prefers-reduced-motion respected, scoped class names, WCAG 2.2 aria-expanded + aria-controls patterns demonstrated, MIT-licensed.

css hamburger menu css hamburger menu no javascript pure css hamburger menu Responsive