|$ curl https://forge-ai.dev/api/markdown?path=docs/components/breadcrumbs

$cat docs/breadcrumbs.md

updated Recently·10 min read·published

Breadcrumbs

◆CSS◆HTML◆UI◆Navigation◆Intermediate🎯Free Tools

Breadcrumb navigation shows users their location within a site hierarchy and provides a path back to parent pages. These examples cover basic text paths, icon separators, collapsed middle items with ellipsis, dropdown menus for lateral navigation, and fully semantic nav elements with ARIA attributes.

Basic Breadcrumbs

Simple text-based breadcrumbs with a slash separator. The current page is non-interactive and visually distinct from clickable ancestors. This is the most common pattern for documentation sites and blogs.

basic-breadcrumbs

Live

untitled.html

HTML

1	<nav class="breadcrumbs" aria-label="Breadcrumb">
2	<ol>
3	<li>
4	<a href="#">
5	Home
6	</a>
7	</li>
8	<li>
9	<a href="#">
10	Products
11	</a>
12	</li>
13	<li>
14	<a href="#">
15	Electronics
16	</a>
17	</li>
18	<li aria-current="page">
19	Wireless Headphones
20	</li>
21	</ol>
22	</nav>

preview

Chevron Separators

SVG chevron icons as separators provide a cleaner, more modern look than text characters. The CSS ::after pseudo-element uses a data URI for the SVG, keeping the HTML clean. Inline SVGs on the home icon provide crisp rendering at any size.

chevron-breadcrumbs

Live

untitled.html

HTML

1	<nav class="breadcrumbs chev" aria-label="Breadcrumb">
2	<ol>
3	<li>
4	<a href="#">
5	<svg width="14" height="14" viewBox="0 0 24 24" fill="none"
6	stroke="currentColor" stroke-width="2" stroke-linecap="round"
7	stroke-linejoin="round">
8	<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
9	<polyline points="9 22 9 12 15 12 15 22"/>
10	</svg>
11	<span>
12	Home
13	</span>
14	</a>
15	</li>
16	<li>
17	<a href="#">
18	Documentation
19	</a>
20	</li>
21	<li>
22	<a href="#">
23	Components
24	</a>
25	</li>
26	<li aria-current="page">
27	Breadcrumbs
28	</li>
29	</ol>
30	</nav>

preview

With Favicon Icons

Adding contextual icons next to breadcrumb labels helps users quickly identify each level. Use small inline SVGs or emoji icons for recognition. This pattern works well in file managers and CMS admin interfaces where each level has a distinct type.

icon-breadcrumbs

Live

untitled.html

HTML

1	<nav class="breadcrumbs icons" aria-label="Breadcrumb">
2	<ol>
3	<li>
4	<a href="#">
5	<svg width="14" height="14" viewBox="0 0 24 24" fill="none"
6	stroke="currentColor" stroke-width="2" stroke-linecap="round"
7	stroke-linejoin="round">
8	<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
9	</svg>
10	</a>
11	</li>
12	<li>
13	<a href="#">
14	<svg width="14" height="14" viewBox="0 0 24 24" fill="none"
15	stroke="currentColor" stroke-width="2" stroke-linecap="round"
16	stroke-linejoin="round">
17	<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
18	</svg>
19	<span>
20	Projects
21	</span>
22	</a>
23	</li>
24	<li>
25	<a href="#">
26	<svg width="14" height="14" viewBox="0 0 24 24" fill="none"
27	stroke="currentColor" stroke-width="2" stroke-linecap="round"
28	stroke-linejoin="round">
29	<polyline points="16 18 22 12 16 6"/>
30	<polyline points="8 6 2 12 8 18"/>
31	</svg>
32	<span>
33	Source Code
34	</span>
35	</a>
36	</li>
37	<li aria-current="page">
38	<svg width="14" height="14" viewBox="0 0 24 24" fill="none"
39	stroke="currentColor" stroke-width="2" stroke-linecap="round"
40	stroke-linejoin="round">
41	<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/>
42	<polyline points="13 2 13 9 20 9"/>
43	</svg>
44	<span>
45	index.tsx
46	</span>
47	</li>
48	</ol>
49	</nav>

preview

Collapsed with Ellipsis

For deep hierarchies, collapse middle items into a clickable ellipsis button. This saves horizontal space while keeping the root and current page visible at all times. Hovering or clicking the ellipsis reveals the hidden items in a dropdown, preserving the full path context.

collapsed-breadcrumbs

Live

untitled.html

HTML

1	<nav class="breadcrumbs collapsed" aria-label="Breadcrumb">
2	<ol>
3	<li>
4	<a href="#">
5	Home
6	</a>
7	</li>
8	<li class="collapsed-item">
9	<button class="ellipsis-btn"
10	aria-label="Show hidden breadcrumbs">
11	···
12	</button>
13	<div class="collapsed-dropdown">
14	<a href="#">
15	Library
16	</a>
17	<a href="#">
18	Media
19	</a>
20	<a href="#">
21	Images
22	</a>
23	<a href="#">
24	Uploads
25	</a>
26	</div>
27	</li>
28	<li>
29	<a href="#">
30	Projects
31	</a>
32	</li>
33	<li>
34	<a href="#">
35	Website Redesign
36	</a>
37	</li>
38	<li>
39	<a href="#">
40	Assets
41	</a>
42	</li>
43	<li aria-current="page">
44	hero-banner.png
45	</li>
46	</ol>
47	</nav>

preview

Dropdown Breadcrumbs

Each breadcrumb level can open a dropdown showing siblings at that depth. Users can jump laterally without going back up the tree — ideal for file managers, CMS interfaces, and deep product catalogs. The chevron-down icon rotates on hover to indicate interactivity.

dropdown-breadcrumbs

Live

untitled.html

HTML

1	<nav class="breadcrumbs dropdown-bc" aria-label="Breadcrumb">
2	<ol>
3	<li class="bc-dropdown">
4	<button class="bc-drop-btn">
5	<svg width="12" height="12" viewBox="0 0 24 24" fill="none"
6	stroke="currentColor" stroke-width="2" stroke-linecap="round"
7	stroke-linejoin="round">
8	<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
9	</svg>
10	<svg class="chev-down" width="10" height="10" viewBox="0 0 24 24"
11	fill="none" stroke="currentColor" stroke-width="2">
12	<polyline points="6 9 12 15 18 9"/>
13	</svg>
14	</button>
15	<div class="bc-menu">
16	<a href="#">
17	Dashboard
18	</a>
19	<a href="#">
20	Settings
21	</a>
22	<a href="#">
23	Analytics
24	</a>
25	<a href="#">
26	Team
27	</a>
28	</div>
29	</li>
30	<li class="bc-dropdown">
31	<button class="bc-drop-btn">
32	Engineering
33	<svg class="chev-down" width="10" height="10" viewBox="0 0 24 24"
34	fill="none" stroke="currentColor" stroke-width="2">
35	<polyline points="6 9 12 15 18 9"/>
36	</svg>
37	</button>
38	<div class="bc-menu">
39	<a href="#">
40	Design
41	</a>
42	<a href="#">
43	Marketing
44	</a>
45	<a href="#">
46	Sales
47	</a>
48	<a href="#">
49	Support
50	</a>
51	</div>
52	</li>
53	<li class="bc-dropdown">
54	<button class="bc-drop-btn">
55	Frontend
56	<svg class="chev-down" width="10" height="10" viewBox="0 0 24 24"
57	fill="none" stroke="currentColor" stroke-width="2">
58	<polyline points="6 9 12 15 18 9"/>
59	</svg>
60	</button>
61	<div class="bc-menu">
62	<a href="#">
63	Backend
64	</a>
65	<a href="#">
66	DevOps
67	</a>
68	<a href="#">
69	Mobile
70	</a>
71	<a href="#">
72	Data
73	</a>
74	</div>
75	</li>
76	<li aria-current="page">
77	Components
78	</li>
79	</ol>
80	</nav>

preview

Compact Pill Style

Compact breadcrumb pills with backgrounds on each segment. Works well in toolbars, dashboards, and narrow sidebar layouts where vertical space is at a premium. The active item uses a green accent background.

compact-breadcrumbs

Live

untitled.html

HTML

1	<nav class="breadcrumbs pill-bc" aria-label="Breadcrumb">
2	<ol>
3	<li>
4	<a href="#">
5	Home
6	</a>
7	</li>
8	<li>
9	<a href="#">
10	Dashboard
11	</a>
12	</li>
13	<li>
14	<a href="#">
15	Analytics
16	</a>
17	</li>
18	<li aria-current="page">
19	Revenue Report
20	</li>
21	</ol>
22	</nav>

preview

Gray-Scale Minimal

Ultra-minimal breadcrumbs with no separator character — just spacing and color hierarchy. Links are medium gray, the current page is white and bold. This works well when the breadcrumb lives inside a card or panel.

gray-breadcrumbs

Live

untitled.html

HTML

1	<div class="gray-bc-wrap">
2	<nav class="breadcrumbs gray-bc" aria-label="Breadcrumb">
3	<ol>
4	<li>
5	<a href="#">
6	Home
7	</a>
8	</li>
9	<li>
10	<a href="#">
11	Blog
12	</a>
13	</li>
14	<li>
15	<a href="#">
16	Engineering
17	</a>
18	</li>
19	<li aria-current="page">
20	Building Design Systems at Scale
21	</li>
22	</ol>
23	</nav>
24	</div>

preview

Semantic HTML Structure

Breadcrumbs should use a <nav> element with aria-label="Breadcrumb", an ordered list, and aria-current="page" on the last item. This ensures screen readers announce the full path correctly and distinguish the breadcrumb from other navigation landmarks.

breadcrumb-structure.html

HTML

1	<nav class="breadcrumbs" aria-label="Breadcrumb">
2	<ol>
3	<li>
4	<a href="/"><!-- home icon --> Home</a>
5	</li>
6	<li>
7	<a href="/products">Products</a>
8	</li>
9	<li>
10	<a href="/products/electronics">Electronics</a>
11	</li>
12	<li aria-current="page">
13	Wireless Headphones
14	</li>
15	</ol>
16	</nav>

ℹ

info

Always wrap breadcrumbs in a <nav> element with aria-label="Breadcrumb" so screen readers distinguish it from other navigation. Use an ordered list (<ol>) to convey hierarchy, and mark the current page with aria-current="page".

✓

best practice

For pages with more than 4 levels, collapse middle items behind an ellipsis or use dropdown menus. Showing every level in a flat list becomes overwhelming on mobile viewports and hinders quick scanning. Keep the root link (usually Home) visible even when collapsing.

⚠

warning

Avoid using breadcrumbs as the primary navigation. They are a supplementary pattern — users should still be able to reach any page from the main navigation. Breadcrumbs shine in deep hierarchies like e-commerce categories, documentation sites, and file systems.

Best Practices

Use aria-label="Breadcrumb" on the nav element to distinguish it from primary navigation.
Mark the current page with aria-current="page" and make it visually distinct (bold, different color).
Keep the root link visible even when collapsing middle items with ellipsis.
Use semantic <ol> instead of <div> to convey ordering information.
Ensure touch targets are at least 44×44px on mobile for each breadcrumb link.
Truncate long labels with ellipsis rather than letting them overflow the container.
Sync breadcrumb links with the URL structure so deep links work correctly.

X GitHub YouTube Instagram Facebook Discord Telegram Buy me a coffee Sponsor

1	.breadcrumbs {
2	padding:20px 24px;
3	font-family:system-ui,
4	sans-serif
5	}
6	.breadcrumbs ol {
7	list-style:none;
8	display:flex;
9	flex-wrap:wrap;
10	align-items:center;
11	gap:0;
12	margin:0;
13	padding:0
14	}
15	.breadcrumbs li {
16	display:flex;
17	align-items:center;
18	font-size:13px;
19	color:#808080
20	}
21	.breadcrumbs li:not(:last-child)::after {
22	content:'/';
23	margin:0 10px;
24	color:#444;
25	font-size:12px
26	}
27	.breadcrumbs a {
28	color:#808080;
29	text-decoration:none;
30	transition:color .2s
31	}
32	.breadcrumbs a:hover {
33	color:#00FF41
34	}
35	.breadcrumbs li[aria-current="page"] {
36	color:#E0E0E0;
37	font-weight:600
38	}

1	.breadcrumbs.chev {
2	padding:20px 24px;
3	font-family:system-ui,
4	sans-serif
5	}
6	.breadcrumbs.chev ol {
7	list-style:none;
8	display:flex;
9	flex-wrap:wrap;
10	align-items:center;
11	gap:0;
12	margin:0;
13	padding:0
14	}
15	.breadcrumbs.chev li {
16	display:flex;
17	align-items:center;
18	font-size:13px;
19	color:#808080
20	}
21	.breadcrumbs.chev li:not(:last-child)::after {
22	content:'';
23	display:inline-block;
24	width:14px;
25	height:14px;
26	margin:0 8px;
27	background-image:url("data:image/svg+xml,
28	%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
29	background-repeat:no-repeat;
30	background-position:center;
31	background-size:contain;
32	flex-shrink:0
33	}
34	.breadcrumbs.chev a {
35	display:inline-flex;
36	align-items:center;
37	gap:5px;
38	color:#808080;
39	text-decoration:none;
40	transition:color .2s
41	}
42	.breadcrumbs.chev a:hover {
43	color:#00FF41
44	}
45	.breadcrumbs.chev a svg {
46	flex-shrink:0
47	}
48	.breadcrumbs.chev li[aria-current="page"] {
49	color:#E0E0E0;
50	font-weight:600
51	}

1	.breadcrumbs.icons {
2	padding:20px 24px;
3	font-family:system-ui,
4	sans-serif
5	}
6	.breadcrumbs.icons ol {
7	list-style:none;
8	display:flex;
9	flex-wrap:wrap;
10	align-items:center;
11	gap:0;
12	margin:0;
13	padding:0
14	}
15	.breadcrumbs.icons li {
16	display:flex;
17	align-items:center;
18	font-size:13px;
19	color:#808080
20	}
21	.breadcrumbs.icons li:not(:last-child)::after {
22	content:'/';
23	margin:0 10px;
24	color:#333;
25	font-size:11px
26	}
27	.breadcrumbs.icons a {
28	display:inline-flex;
29	align-items:center;
30	gap:5px;
31	color:#808080;
32	text-decoration:none;
33	transition:color .2s
34	}
35	.breadcrumbs.icons a:hover {
36	color:#00FF41
37	}
38	.breadcrumbs.icons a svg,
39	.breadcrumbs.icons li[aria-current="page"] svg {
40	flex-shrink:0
41	}
42	.breadcrumbs.icons li[aria-current="page"] {
43	color:#E0E0E0;
44	font-weight:600;
45	display:inline-flex;
46	align-items:center;
47	gap:5px
48	}

1	.breadcrumbs.collapsed {
2	padding:20px 24px;
3	font-family:system-ui,
4	sans-serif
5	}
6	.breadcrumbs.collapsed ol {
7	list-style:none;
8	display:flex;
9	flex-wrap:wrap;
10	align-items:center;
11	gap:0;
12	margin:0;
13	padding:0
14	}
15	.breadcrumbs.collapsed li {
16	display:flex;
17	align-items:center;
18	font-size:13px;
19	color:#808080;
20	position:relative
21	}
22	.breadcrumbs.collapsed li:not(:last-child):not(.collapsed-item)::after {
23	content:'›';
24	margin:0 8px;
25	color:#444;
26	font-size:14px
27	}
28	.breadcrumbs.collapsed a {
29	color:#808080;
30	text-decoration:none;
31	transition:color .2s
32	}
33	.breadcrumbs.collapsed a:hover {
34	color:#00FF41
35	}
36	.breadcrumbs.collapsed li[aria-current="page"] {
37	color:#E0E0E0;
38	font-weight:600
39	}
40	.ellipsis-btn {
41	background:none;
42	border:1px solid #2A2A2A;
43	color:#808080;
44	padding:2px 10px;
45	border-radius:4px;
46	cursor:pointer;
47	font-size:14px;
48	font-weight:700;
49	letter-spacing:2px;
50	transition:all .2s;
51	font-family:system-ui,
52	sans-serif
53	}
54	.ellipsis-btn:hover {
55	border-color:#00FF41;
56	color:#00FF41;
57	background:rgba(0,
58	255,
59	65,
60	.05)
61	}
62	.collapsed-dropdown {
63	display:none;
64	position:absolute;
65	top:100%;
66	left:-8px;
67	margin-top:6px;
68	background:#1A1A2E;
69	border:1px solid #2A2A3E;
70	border-radius:8px;
71	padding:6px;
72	min-width:140px;
73	z-index:10;
74	box-shadow:0 8px 24px rgba(0,
75	0,
76	0,
77	.4);
78	flex-direction:column
79	}
80	.collapsed-item:hover .collapsed-dropdown {
81	display:flex
82	}
83	.collapsed-dropdown a {
84	padding:8px 12px;
85	border-radius:6px;
86	font-size:12px;
87	color:#A0A0A0;
88	white-space:nowrap
89	}
90	.collapsed-dropdown a:hover {
91	background:rgba(255,
92	255,
93	255,
94	.05);
95	color:#00FF41
96	}

1	document.querySelectorAll('.ellipsis-btn').forEach(btn=>{
2	btn.addEventListener('click',e=>{
3	e.stopPropagation();
4	const dd=btn.nextElementSibling;
5	const isOpen=dd.style.display==='flex';
6	dd.style.display=isOpen?'none':'flex';
7	});
8	document.addEventListener('click',()=>{
9	btn.nextElementSibling.style.display='none';
10	});
11	})

1	.breadcrumbs.dropdown-bc {
2	padding:20px 24px;
3	font-family:system-ui,
4	sans-serif
5	}
6	.breadcrumbs.dropdown-bc ol {
7	list-style:none;
8	display:flex;
9	flex-wrap:wrap;
10	align-items:center;
11	gap:0;
12	margin:0;
13	padding:0
14	}
15	.breadcrumbs.dropdown-bc li {
16	display:flex;
17	align-items:center;
18	font-size:13px;
19	color:#808080;
20	position:relative
21	}
22	.breadcrumbs.dropdown-bc li:not(:last-child)::after {
23	content:'›';
24	margin:0 8px;
25	color:#444;
26	font-size:14px
27	}
28	.breadcrumbs.dropdown-bc li[aria-current="page"] {
29	color:#E0E0E0;
30	font-weight:600
31	}
32	.bc-drop-btn {
33	display:inline-flex;
34	align-items:center;
35	gap:4px;
36	background:none;
37	border:none;
38	color:#808080;
39	cursor:pointer;
40	font-size:13px;
41	font-family:system-ui,
42	sans-serif;
43	padding:4px 6px;
44	border-radius:4px;
45	transition:all .2s
46	}
47	.bc-drop-btn:hover {
48	color:#00FF41;
49	background:rgba(255,
50	255,
51	255,
52	.05)
53	}
54	.chev-down {
55	transition:transform .2s
56	}
57	.bc-dropdown:hover .chev-down {
58	transform:rotate(180deg)
59	}
60	.bc-menu {
61	display:none;
62	position:absolute;
63	top:100%;
64	left:-6px;
65	margin-top:4px;
66	background:#1A1A2E;
67	border:1px solid #2A2A3E;
68	border-radius:8px;
69	padding:6px;
70	min-width:150px;
71	z-index:10;
72	box-shadow:0 8px 24px rgba(0,
73	0,
74	0,
75	.4);
76	flex-direction:column
77	}
78	.bc-dropdown:hover .bc-menu {
79	display:flex
80	}
81	.bc-menu a {
82	padding:8px 12px;
83	border-radius:6px;
84	font-size:12px;
85	color:#A0A0A0;
86	text-decoration:none;
87	white-space:nowrap;
88	transition:all .15s
89	}
90	.bc-menu a:hover {
91	background:rgba(255,
92	255,
93	255,
94	.05);
95	color:#00FF41
96	}

1	.breadcrumbs.pill-bc {
2	padding:20px 24px;
3	font-family:system-ui,
4	sans-serif
5	}
6	.breadcrumbs.pill-bc ol {
7	list-style:none;
8	display:flex;
9	flex-wrap:wrap;
10	align-items:center;
11	gap:6px;
12	margin:0;
13	padding:0
14	}
15	.breadcrumbs.pill-bc li {
16	display:flex;
17	align-items:center;
18	font-size:12px;
19	color:#808080
20	}
21	.breadcrumbs.pill-bc li:not(:last-child)::after {
22	content:'';
23	margin-left:6px;
24	width:0;
25	height:0;
26	border-left:4px solid #444;
27	border-top:4px solid transparent;
28	border-bottom:4px solid transparent;
29	flex-shrink:0
30	}
31	.breadcrumbs.pill-bc a {
32	display:inline-flex;
33	align-items:center;
34	padding:4px 10px;
35	border-radius:20px;
36	color:#A0A0A0;
37	text-decoration:none;
38	background:rgba(255,
39	255,
40	255,
41	.04);
42	border:1px solid #2A2A2A;
43	transition:all .2s
44	}
45	.breadcrumbs.pill-bc a:hover {
46	color:#00FF41;
47	border-color:#00FF41/30;
48	background:rgba(0,
49	255,
50	65,
51	.06)
52	}
53	.breadcrumbs.pill-bc li[aria-current="page"] {
54	display:inline-flex;
55	align-items:center;
56	padding:4px 10px;
57	border-radius:20px;
58	background:rgba(0,
59	255,
60	65,
61	.1);
62	color:#00FF41;
63	font-weight:600;
64	border:1px solid rgba(0,
65	255,
66	65,
67	.2)
68	}

1	.gray-bc-wrap {
2	padding:16px 24px;
3	background:#111;
4	border-radius:10px;
5	border:1px solid #222;
6	margin:0 16px;
7	font-family:system-ui,
8	sans-serif
9	}
10	.breadcrumbs.gray-bc ol {
11	list-style:none;
12	display:flex;
13	flex-wrap:wrap;
14	align-items:center;
15	gap:0;
16	margin:0;
17	padding:0
18	}
19	.breadcrumbs.gray-bc li {
20	display:flex;
21	align-items:center;
22	font-size:13px;
23	color:#555
24	}
25	.breadcrumbs.gray-bc li:not(:last-child) {
26	margin-right:14px
27	}
28	.breadcrumbs.gray-bc li:not(:last-child)::after {
29	content:'';
30	position:absolute;
31	right:-10px;
32	width:4px;
33	height:4px;
34	border-radius:50%;
35	background:#333
36	}
37	.breadcrumbs.gray-bc li {
38	position:relative
39	}
40	.breadcrumbs.gray-bc a {
41	color:#777;
42	text-decoration:none;
43	transition:color .2s
44	}
45	.breadcrumbs.gray-bc a:hover {
46	color:#00FF41
47	}
48	.breadcrumbs.gray-bc li[aria-current="page"] {
49	color:#E0E0E0;
50	font-weight:600
51	}