Back to search
48Views
0Likes
0Downloads
Code · Live Preview
Componenthtml
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Breadcrumb Patterns - Formfield</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@300;400;500;600&display=swap"
rel="stylesheet"
/>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
serif: ["DM Serif Display", "serif"],
sans: ["DM Sans", "sans-serif"],
},
colors: {
ink: "#111110",
"off-white": "#f5f4f1",
"warm-muted": "#888580",
"warm-border": "#2a2927",
"warm-mid": "#e8e7e4",
"warm-card": "#ffffff",
"warm-bg": "#f5f4f1",
},
},
},
};
</script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- NAVBAR -->
<nav
style="
background: rgba(245, 244, 241, 0.92);
border-bottom: 1px solid #e8e7e4;
backdrop-filter: blur(12px);
position: sticky;
top: 0;
z-index: 100;
"
>
<div class="max-w-[1280px] mx-auto px-6 lg:px-10">
<div class="flex items-center justify-between h-[64px]">
<a href="#" class="flex items-center gap-2 no-underline">
<div
class="w-7 h-7 flex items-center justify-center rounded-[3px]"
style="background: #111110"
>
<span
class="font-serif text-[14px] leading-none"
style="color: #f5f4f1"
>F</span
>
</div>
<span
class="font-serif text-[19px] text-ink tracking-tight leading-none"
>
Formfield<span style="color: #888580">.</span>
</span>
</a>
<span class="section-label hidden sm:block">Components</span>
<div></div>
</div>
</div>
</nav>
<!-- MAIN -->
<main class="max-w-[1280px] mx-auto px-6 lg:px-10 py-12">
<!-- Page header -->
<div class="mb-10">
<p class="section-label mb-2">UI Patterns</p>
<h1
class="font-serif text-[2rem] text-ink leading-tight mb-2"
style="letter-spacing: -0.02em"
>
Breadcrumb Components
</h1>
<p class="text-[14px] text-warm-muted max-w-lg leading-relaxed">
5 breadcrumb patterns - each with a distinct visual approach. Same
design system, different personality.
</p>
</div>
<div class="divider mb-10"></div>
<!-- Cards grid -->
<div class="flex flex-col gap-6">
<!-- PATTERN 1 - Slash Separator -->
<div class="pattern-card">
<div class="pattern-header">
<div>
<p class="section-label mb-1">Pattern 01</p>
<h2
class="font-serif text-[1.2rem] text-ink leading-none"
style="letter-spacing: -0.01em"
>
Slash Separator
</h2>
</div>
<p
class="text-[12px] text-warm-muted leading-relaxed max-w-xs text-right hidden sm:block"
>
Classic slash-divided links. Clean, minimal, universally
understood.
</p>
</div>
<div class="pattern-body">
<nav aria-label="breadcrumb" class="bc1">
<a href="#" class="bc1-link">Home</a>
<span class="bc1-sep" aria-hidden="true">/</span>
<a href="#" class="bc1-link">Products</a>
<span class="bc1-sep" aria-hidden="true">/</span>
<a href="#" class="bc1-link">Design</a>
<span class="bc1-sep" aria-hidden="true">/</span>
<span class="bc1-current" aria-current="page"
>Brand Identity Kit</span
>
</nav>
</div>
<!-- Code snippet -->
<div
class="px-6 py-4"
style="border-top: 1px solid #e8e7e4; background: #faf9f7"
>
<p class="section-label mb-2">Separator</p>
<p class="text-[12px] text-warm-muted font-sans">
Character
<code
style="
background: #e8e7e4;
padding: 1px 5px;
border-radius: 3px;
font-size: 11px;
"
>/</code
>
- padding
<code
style="
background: #e8e7e4;
padding: 1px 5px;
border-radius: 3px;
font-size: 11px;
"
>0 10px</code
>
- color
<code
style="
background: #e8e7e4;
padding: 1px 5px;
border-radius: 3px;
font-size: 11px;
"
>#e8e7e4</code
>
</p>
</div>
</div>
<!-- PATTERN 2 - Pill / Tag Style -->
<div class="pattern-card">
<div class="pattern-header">
<div>
<p class="section-label mb-1">Pattern 02</p>
<h2
class="font-serif text-[1.2rem] text-ink leading-none"
style="letter-spacing: -0.01em"
>
Pill Tags
</h2>
</div>
<p
class="text-[12px] text-warm-muted leading-relaxed max-w-xs text-right hidden sm:block"
>
Each crumb is a bordered tag. Current page gets the solid dark
fill.
</p>
</div>
<div class="pattern-body">
<nav aria-label="breadcrumb" class="bc2">
<a href="#" class="bc2-link">Home</a>
<span class="bc2-sep" aria-hidden="true">›</span>
<a href="#" class="bc2-link">Products</a>
<span class="bc2-sep" aria-hidden="true">›</span>
<a href="#" class="bc2-link">Design</a>
<span class="bc2-sep" aria-hidden="true">›</span>
<span class="bc2-current" aria-current="page"
>Brand Identity Kit</span
>
</nav>
</div>
<div
class="px-6 py-4"
style="border-top: 1px solid #e8e7e4; background: #faf9f7"
>
<p class="section-label mb-2">Active state</p>
<p class="text-[12px] text-warm-muted font-sans">
Background
<code
style="
background: #e8e7e4;
padding: 1px 5px;
border-radius: 3px;
font-size: 11px;
"
>#111110</code
>
- text
<code
style="
background: #e8e7e4;
padding: 1px 5px;
border-radius: 3px;
font-size: 11px;
"
>#f5f4f1</code
>
- border-radius
<code
style="
background: #e8e7e4;
padding: 1px 5px;
border-radius: 3px;
font-size: 11px;
"
>4px</code
>
</p>
</div>
</div>
<!-- PATTERN 3 - Dot + Underline -->
<div class="pattern-card">
<div class="pattern-header">
<div>
<p class="section-label mb-1">Pattern 03</p>
<h2
class="font-serif text-[1.2rem] text-ink leading-none"
style="letter-spacing: -0.01em"
>
Dot & Underline
</h2>
</div>
<p
class="text-[12px] text-warm-muted leading-relaxed max-w-xs text-right hidden sm:block"
>
A small dot separates items. Links underline on hover. Current
page stays underlined.
</p>
</div>
<div class="pattern-body">
<nav aria-label="breadcrumb" class="bc3">
<a href="#" class="bc3-link">Home</a>
<span class="bc3-sep" aria-hidden="true"></span>
<a href="#" class="bc3-link">Products</a>
<span class="bc3-sep" aria-hidden="true"></span>
<a href="#" class="bc3-link">Design</a>
<span class="bc3-sep" aria-hidden="true"></span>
<span class="bc3-current" aria-current="page"
>Brand Identity Kit</span
>
</nav>
</div>
<div
class="px-6 py-4"
style="border-top: 1px solid #e8e7e4; background: #faf9f7"
>
<p class="section-label mb-2">Separator</p>
<p class="text-[12px] text-warm-muted font-sans">
4×4px circle - color
<code
style="
background: #e8e7e4;
padding: 1px 5px;
border-radius: 3px;
font-size: 11px;
"
>#e8e7e4</code
>
- margin
<code
style="
background: #e8e7e4;
padding: 1px 5px;
border-radius: 3px;
font-size: 11px;
"
>0 12px</code
>
</p>
</div>
</div>
<!-- PATTERN 4 - Home Icon + Chevron -->
<div class="pattern-card">
<div class="pattern-header">
<div>
<p class="section-label mb-1">Pattern 04</p>
<h2
class="font-serif text-[1.2rem] text-ink leading-none"
style="letter-spacing: -0.01em"
>
Icon & Chevron
</h2>
</div>
<p
class="text-[12px] text-warm-muted leading-relaxed max-w-xs text-right hidden sm:block"
>
Home is an icon button. Chevron arrows separate the rest. Compact
and structured.
</p>
</div>
<div class="pattern-body">
<nav aria-label="breadcrumb" class="bc4">
<!-- Home icon -->
<a href="#" class="bc4-home" aria-label="Home">
<svg width="13" height="13" viewBox="0 0 13 13" fill="none">
<path
d="M1.5 6L6.5 1.5L11.5 6V11.5H8.5V8.5H4.5V11.5H1.5V6Z"
stroke="currentColor"
stroke-width="1.2"
stroke-linejoin="round"
/>
</svg>
</a>
<span class="bc4-sep" aria-hidden="true">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
<path
d="M4 2.5L8 6L4 9.5"
stroke="currentColor"
stroke-width="1.3"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</span>
<a href="#" class="bc4-link">Products</a>
<span class="bc4-sep" aria-hidden="true">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
<path
d="M4 2.5L8 6L4 9.5"
stroke="currentColor"
stroke-width="1.3"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</span>
<a href="#" class="bc4-link">Design</a>
<span class="bc4-sep" aria-hidden="true">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
<path
d="M4 2.5L8 6L4 9.5"
stroke="currentColor"
stroke-width="1.3"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</span>
<span class="bc4-current" aria-current="page"
>Brand Identity Kit</span
>
</nav>
</div>
<div
class="px-6 py-4"
style="border-top: 1px solid #e8e7e4; background: #faf9f7"
>
<p class="section-label mb-2">Home icon</p>
<p class="text-[12px] text-warm-muted font-sans">
28×28px bordered box - border-radius
<code
style="
background: #e8e7e4;
padding: 1px 5px;
border-radius: 3px;
font-size: 11px;
"
>4px</code
>
- chevron separator SVG
</p>
</div>
</div>
<!-- PATTERN 5 - Stepped / Numbered -->
<div class="pattern-card">
<div class="pattern-header">
<div>
<p class="section-label mb-1">Pattern 05</p>
<h2
class="font-serif text-[1.2rem] text-ink leading-none"
style="letter-spacing: -0.01em"
>
Stepped Numbers
</h2>
</div>
<p
class="text-[12px] text-warm-muted leading-relaxed max-w-xs text-right hidden sm:block"
>
Numbered steps with a line connector. Shows progress through a
hierarchy or flow.
</p>
</div>
<div class="pattern-body flex-col gap-6">
<!-- State A: step 3 active -->
<div>
<p class="section-label text-center mb-4">Step 3 active</p>
<nav aria-label="breadcrumb" class="bc5">
<a href="#" class="bc5-step done" aria-label="Step 1: Home">
<div class="bc5-num">
<!-- Checkmark for completed -->
<svg width="9" height="9" viewBox="0 0 9 9" fill="none">
<path
d="M1.5 4.5L3.5 6.5L7.5 2.5"
stroke="currentColor"
stroke-width="1.4"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<span class="bc5-text">Home</span>
</a>
<div class="bc5-sep"></div>
<a href="#" class="bc5-step done" aria-label="Step 2: Products">
<div class="bc5-num">
<svg width="9" height="9" viewBox="0 0 9 9" fill="none">
<path
d="M1.5 4.5L3.5 6.5L7.5 2.5"
stroke="currentColor"
stroke-width="1.4"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<span class="bc5-text">Products</span>
</a>
<div class="bc5-sep"></div>
<a href="#" class="bc5-step done" aria-label="Step 3: Design">
<div class="bc5-num">
<svg width="9" height="9" viewBox="0 0 9 9" fill="none">
<path
d="M1.5 4.5L3.5 6.5L7.5 2.5"
stroke="currentColor"
stroke-width="1.4"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<span class="bc5-text">Design</span>
</a>
<div class="bc5-sep"></div>
<span class="bc5-step active" aria-current="page">
<div class="bc5-num">4</div>
<span class="bc5-text">Brand Identity Kit</span>
</span>
</nav>
</div>
<div class="w-full h-px" style="background: #e8e7e4"></div>
<!-- State B: step 2 active -->
<div>
<p class="section-label text-center mb-4">Step 2 active</p>
<nav aria-label="breadcrumb" class="bc5">
<a href="#" class="bc5-step done">
<div class="bc5-num">
<svg width="9" height="9" viewBox="0 0 9 9" fill="none">
<path
d="M1.5 4.5L3.5 6.5L7.5 2.5"
stroke="currentColor"
stroke-width="1.4"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<span class="bc5-text">Home</span>
</a>
<div class="bc5-sep"></div>
<span class="bc5-step active" aria-current="page">
<div class="bc5-num">2</div>
<span class="bc5-text">Products</span>
</span>
<div class="bc5-sep"></div>
<span class="bc5-step">
<div class="bc5-num">3</div>
<span class="bc5-text">Design</span>
</span>
<div class="bc5-sep"></div>
<span class="bc5-step">
<div class="bc5-num">4</div>
<span class="bc5-text">Brand Identity Kit</span>
</span>
</nav>
</div>
</div>
<div
class="px-6 py-4"
style="border-top: 1px solid #e8e7e4; background: #faf9f7"
>
<p class="section-label mb-2">States</p>
<p class="text-[12px] text-warm-muted font-sans">
<code
style="
background: #e8e7e4;
padding: 1px 5px;
border-radius: 3px;
font-size: 11px;
"
>.done</code
>
- completed with checkmark ·
<code
style="
background: #e8e7e4;
padding: 1px 5px;
border-radius: 3px;
font-size: 11px;
"
>.active</code
>
- current, filled dark · default - upcoming, muted
</p>
</div>
</div>
</div>
<!-- end cards -->
<!-- Bottom note -->
<div class="mt-12 pt-8" style="border-top: 1px solid #e8e7e4">
<div
class="flex flex-col sm:flex-row sm:items-center justify-between gap-3"
>
<p class="text-[12px] text-warm-muted">
All patterns use DM Sans 13px · warm neutral palette · 0.15s ease
transitions
</p>
<p class="text-[12px] text-warm-muted">
© 2026 Formfield. All rights reserved.
</p>
</div>
</div>
</main>
</body>
</html>Detecting libraries...
Component details
Overview, install command, dependencies, and project links.
Five distinct breadcrumb navigation patterns built with pure HTML and Tailwind CSS — no JavaScript, no dependencies. Each pattern follows the same warm monochrome design system but takes a completely different visual approach. Pattern 01 uses a classic slash separator with muted-to-ink hover transitions. Pattern 02 wraps each crumb in a bordered pill tag, with the current page getting a solid dark fill matching the CTA button style. Pattern 03 uses a 4×4px circular dot separator with underline hover states on links and a permanent underline on the active crumb. Pattern 04 replaces the home link with a bordered icon button and uses SVG chevron arrows as separators — structured and compact. Pattern 05 is a stepped numbered breadcrumb with a horizontal line connector and three distinct states: completed (checkmark), active (dark fill), and upcoming (muted) — useful for multi-step flows and deep hierarchies. All five are horizontally scrollable on mobile with hidden scrollbars, fully accessible with aria-label and aria-current="page", and use DM Serif Display for headings and DM Sans for all breadcrumb text on a warm #f5f4f1 background.
Added Apr 20, 2026
Discussion
Feedback, implementation tips, and usage notes.
0 threads
Comments
Sign in to join the conversation