Breadcrumb
Hierarchical path indicator showing a user's location within a site. Covers separators, icons, truncation, responsive collapse, and structured-data output.
1. Separators
DaisyUI's breadcrumbs uses a CSS ::before pseudo-element for the separator. Override content per context to change the glyph.
Chevron › (DaisyUI default)
Slash /
Arrow →
Dot ·
Pipe |
2. SVG Icon Separator
When a custom SVG is needed (e.g. a branded separator), suppress DaisyUI's ::before and insert the icon manually between items.
SVG chevron separator
Home icon as root crumb
Home icon + label
3. Sizes
Control size via Tailwind's text-xs / text-sm / text-base on the .breadcrumbs wrapper.
text-xs — compact toolbar / table header
text-sm — standard (most common)
text-base — large / hero placement
4. Visual Styles
Surface treatment options suited to different page contexts: bare, pill, and contained.
5. Truncated Long Paths
Deep hierarchies (5+ levels) need truncation. DaisyUI's .breadcrumbs handles horizontal overflow with overflow-x: auto — but a collapsed ellipsis pattern is better UX on mobile.
DaisyUI default — overflow-x auto (scrollable on narrow viewport)
Collapsed — shows first + last, expands on click
Click ··· to reveal intermediate crumbs. Once expanded, stays open for the session.
Label truncation — long crumb text clamped with max-width
6. Structured Data — schema.org
Add JSON-LD alongside the visible breadcrumb so search engines can display rich sitelinks. The markup below is the production-ready pattern — visual output is identical to the default breadcrumb; the schema lives in a <script> tag.
JSON-LD (place in <head> or before </body>)
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://example.com#"
},
{
"@type": "ListItem",
"position": 2,
"name": "Collections",
"item": "https://example.com#"
},
{
"@type": "ListItem",
"position": 3,
"name": "Men",
"item": "https://example.com#"
},
{
"@type": "ListItem",
"position": 4,
"name": "Footwear",
"item": "https://example.com#"
},
{
"@type": "ListItem",
"position": 5,
"name": "Sneakers",
"item": null
}
]
}
Use either itemscope/itemprop microdata on the visible HTML or JSON-LD in a script tag — not both. JSON-LD is generally preferred as it decouples markup from data.
7. States
Accessibility and interaction states every breadcrumb implementation must handle.
aria-current="page" — last crumb is not a link
Loading skeleton
Single crumb — root / home page (no separator needed)
Dark surface
8. Edge Cases
Real-world inputs that break naive implementations.
Very long single crumb label — must not blow out layout
Special characters in label — must be HTML-escaped
Two crumbs — root + current (minimal meaningful breadcrumb)