Breadcrumb Navigation — Free HTML CSS Snippet

A breadcrumb is a horizontal trail of links showing the user's path through a site hierarchy — Home / Products / Electronics / Headphones. It complements primary navigation like the sidebar nav and mega menu. It answers "where am I?" at a glance, reduces navigation friction, and tells search engines how your pages are structured. Google uses breadcrumb markup to display the path inside search result snippets, which can improve click-through rate.

This snippet gives you a complete, production-ready breadcrumb in plain HTML and CSS — no JavaScript required. It uses semantic markup, CSS-generated separators, and proper ARIA attributes out of the box.

Why ol and li instead of div and span

Breadcrumbs use <ol> (ordered list) rather than divs because the items have a meaningful hierarchical order. Screen readers announce ordered lists differently from generic containers — a VoiceOver user hears "list, 4 items" and can navigate between items with arrow keys. The <nav aria-label="Breadcrumb"> wrapper registers as a landmark region, so screen reader users can jump directly to it via landmark navigation. The last item uses aria-current="page" to tell assistive technology that this item represents the current location — it is not a link, just text.

How the CSS separator trick works

The separators between items are generated entirely in CSS using the adjacent sibling combinator and the ::before pseudo-element: li + li::before { content: '/'; margin: 0 8px; color: #cbd5e1; }. This selector reads "for every li that directly follows another li, insert a / before it." The first item gets no separator because there is no preceding sibling. This approach is better than putting separators in the HTML because they are purely presentational — screen readers ignore ::before content by default, so they read "Home, Products, Electronics, Headphones" without announcing the slashes.

Changing the separator

To change the separator, find content: '/' in the CSS panel and update the value. Use content: '>' for a chevron style, content: '\2192' for a right arrow (→), or content: '\00BB' for a double angle quote (»). You can also replace the text with a short SVG data URI to use an icon separator.

Adding breadcrumb schema for Google

To get Google to show the breadcrumb path in search results, add a JSON-LD script block alongside the HTML. The BreadcrumbList schema lists each item with its name and URL. This snippet's HTML structure already mirrors that schema — each <li> maps to a ListItem. Add the script tag with type="application/ld+json" and Google will parse it at crawl time with no extra rendering needed.

Responsive wrapping

The breadcrumb uses flex-wrap: wrap so it automatically wraps to multiple lines on narrow screens. On very small screens you may want to show only the last two levels — hide earlier items with display: none at a media query breakpoint and add an ellipsis item to indicate the hidden path.

Saving your customised version

After editing, click "Save as" in the editor header, type a name, and press Enter. Saves to IndexedDB and appears in the Saved tab in the sidebar.