Breadcrumb Generator
Build breadcrumb navigation with five separator styles, colour control and an active last item. Copy the CSS.
- Home/
- Docs/
- Components/
- Breadcrumb
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; list-style: none; margin: 0; padding: 0; }
.breadcrumb a { color: #94a3b8; text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: #e2e8f0; }
.breadcrumb li:last-child { color: #e2e8f0; font-weight: 600; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 8px; color: #475569; }About this tool
Breadcrumbs show where a page sits in the site hierarchy. They matter for deep sites, and they matter for search: paired with BreadcrumbList structured data, Google replaces the raw URL in search results with a readable trail.
The separator is inserted with a pseudo-element rather than typed into the markup, which keeps the HTML clean and stops screen readers from reading the separator aloud.
How it works
- 1Choose a separator character.
- 2Set the link, active and separator colours.
- 3Adjust font size and gap.
- 4Copy the CSS, then pair it with the Breadcrumb structured data generator.
Frequently asked
Why put the separator in CSS instead of the HTML?
Because it is decorative. In a pseudo-element it stays out of the document text, so screen readers do not announce a slash between every item.
Do breadcrumbs help SEO?
Yes, when paired with BreadcrumbList JSON-LD. Google then shows the trail instead of the URL in search results, which is easier to read and tends to improve clicks.
Should the last item be a link?
No. It is the current page, so it should be plain text and marked with aria-current="page".