Breadcrumbs

What are breadcrumbs?

Breadcrumbs are a secondary navigation trail that shows where the current page sits in the site hierarchy, for example Home / Products / Laptops / Model X. Each step except the last is a link, so users can jump back to a parent level in one click. Breadcrumbs are common on e-commerce sites, documentation, blogs with categories and any site with deep structure.

When to use breadcrumbs

Use them when pages are nested at least two or three levels deep and visitors often arrive from search engines directly on inner pages. They give instant context and an easy way to explore related content. Flat sites with only a few pages do not need them, and they should never replace the main navigation.

Breadcrumb best practices

• Wrap the trail in <nav aria-label="Breadcrumb"> and use an ordered list (<ol>) for the items.
• Mark the last item with aria-current="page" and do not make it a link.
• Add separators with CSS (for example a ::before pseudo-element) rather than as text, so screen readers do not read every slash.
• Place breadcrumbs above the page title, near the top of the content.
• On small screens, truncate long labels or collapse middle levels into an ellipsis instead of wrapping onto several lines.
• Keep link contrast and focus styles consistent with the rest of the site.
• For SEO, you can add BreadcrumbList structured data that mirrors the visible trail.

Bootstrap breadcrumb examples and other frameworks

Breadcrumb snippets come in Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS versions. Bootstrap 5 breadcrumbs use the breadcrumb and breadcrumb-item classes with a customisable divider variable; the Bootstrap 6 alpha versions follow the same idea with theme-* colour roles. Tailwind and pure CSS breadcrumbs show icon, chevron, pill and arrow styles in plain HTML and CSS. Use the framework filter, compare styles in the live preview, then copy the markup or download it and plug in your own page hierarchy.