7 Pure CSS1 with JSPublished 2026-10-04Free · no sign-up
Eight breadcrumb trails that show people where they are and let them jump back up the hierarchy. They range from a simple slash trail to arrow-shaped steps, pills, a trail that collapses its middle levels, a version with structured data for search engines and a page header layout.
The standard breadcrumb: a nav landmark with aria-label="Breadcrumb", an ordered list, and slash separators added with ::before so they are not read aloud. The current page is plain text marked with aria-current="page".
A breadcrumb that starts with a house icon and uses CSS chevrons between steps. The icon link has an accessible name, the chevrons are drawn with borders on a pseudo-element, and the trail truncates long names with an ellipsis.
Breadcrumb links shaped like arrows that point to the next step, built with clip-path polygons rather than border tricks. The current step is filled with the accent colour, and each arrow overlaps the next slightly with a negative margin.
Each level is a rounded pill with a subtle border, separated by a dot. It reads clearly on busy dark dashboards, and the hover and focus states raise the pill slightly so it is obvious which level you are about to open.
Long trails collapse their middle levels into an ellipsis button, so the first and last levels always fit. Pressing the button reveals the hidden levels; the button has aria-expanded and a clear name, and the full trail stays in the HTML.
const nav = document.querySelector('.bc5'), more = nav.querySelector('.more button');
more.addEventListener('click', () => {
nav.classList.add('open');
more.setAttribute('aria-expanded', 'true');
nav.querySelector('.mid a').focus();
});
06. Breadcrumb with Structured Data
SEOSchema
A breadcrumb marked up with schema.org BreadcrumbList microdata, so search engines can show the trail in results. Each item carries its position, name and URL, and the visual design stays the same as an ordinary breadcrumb.
A page header that pairs a small breadcrumb with the large page title and an action button, as admin dashboards often do. The breadcrumb sits above the h1 in its own nav landmark, and the layout wraps the button below the title on narrow screens.
A minimal breadcrumb where each link gets an underline that slides in from the left on hover or focus. The underline is a background gradient that grows in width, and the motion is disabled for people who prefer reduced motion.
Wrap the trail in <nav aria-label="Breadcrumb"> so it is a named landmark, and use an ordered list because the order matters. The last item is the current page: show it as plain text with aria-current="page" rather than a link to itself.
Separators in CSS
Add the slash, chevron or arrow with li + li::before. Separators drawn by CSS are not read aloud as part of each link, so screen reader users hear clean link names without repeated symbols.
Long trails on small screens
Deep hierarchies overflow on phones. Either let the list wrap, truncate the current page with text-overflow: ellipsis, or collapse the middle levels behind a button with aria-expanded, as the collapsing demo does.
Breadcrumbs and search
Search engines can show a breadcrumb trail in results when the page carries BreadcrumbList structured data, either as JSON-LD or as microdata like the schema demo. Keep the names and URLs identical to the visible trail.
Frequently asked questions
Should the current page be a link?
No. Mark it with aria-current="page" and show it as text, since linking to the page you are on is confusing.
Do breadcrumbs help SEO?
They help people and search engines understand your site structure, and structured data can make the trail appear in results.
Which demos use JavaScript?
Only the collapsing breadcrumb, to reveal the hidden levels.