Bootstrap 5Navigation

Bootstrap 5 Breadcrumb with Schema

A Bootstrap 5 breadcrumb with schema is a navigation trail component that shows a user's current location within a site hierarchy, combined with JSON-LD or inline Schema.org BreadcrumbList markup so search engines can parse and display the path in rich results. It uses Bootstrap's built-in breadcrumb classes alongside structured data to satisfy both UX and SEO requirements simultaneously. Use it on any page that sits more than one level deep in your site architecture, such as product pages, blog posts, or documentation articles.

Primary Class

.breadcrumb-schema

Common Use Cases

→E-commerce product pages where the path (Home > Clothing > Men > Jackets) needs to appear in Google search snippets to improve click-through rates
→Multi-section documentation sites where readers need to orient themselves within a chapter or sub-topic and return to parent sections quickly
→Travel booking platforms listing destination pages several levels deep (Home > Europe > Italy > Rome > Hotels) that benefit from rich breadcrumb display in SERPs
→News and editorial sites with categorised archives (Home > Technology > AI > Article Title) where structured breadcrumbs help Google index category relationships accurately

Variants & Classes

Variant	Description	Classes
Breadcrumb with Schema Default	Standard breadcrumb with schema with Bootstrap's default styling.	`breadcrumb-schema`
Breadcrumb with Schema Responsive	Responsive variant that adapts to different screen sizes.	`breadcrumb-schema breadcrumb-schema-responsive`

Code Example

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    <li class="breadcrumb-item"><a href="/clothing">Clothing</a></li>
    <li class="breadcrumb-item"><a href="/clothing/mens">Men</a></li>
    <li class="breadcrumb-item active" aria-current="page">Jackets</li>
  </ol>
</nav>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Clothing",
      "item": "https://www.example.com/clothing"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Men",
      "item": "https://www.example.com/clothing/mens"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Jackets",
      "item": "https://www.example.com/clothing/mens/jackets"
    }
  ]
}
</script>

Live Examples

Basic Breadcrumb with Schema

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated breadcrumb with schema with custom colours
✓Breadcrumb with Schema with interactive states
✓Responsive breadcrumb with schema for all screen sizes

Best Practices

Match JSON-LD URLs exactly to canonical page URLs

If your canonical URL includes a trailing slash, the schema item URL must include it too. Mismatches between the visible href and the schema item URL can cause Google Search Console to flag breadcrumb errors.

Always include the current page in the JSON-LD even though it is marked active in HTML

Google expects the full path including the current page as the final ListItem. Omitting the last item causes incomplete breadcrumb rich results in search.

Use the CSS custom property for the breadcrumb divider

Bootstrap 5 controls the separator via the CSS variable --bs-breadcrumb-divider. Set it to a custom character or SVG in your stylesheet rather than overriding it inline, which keeps your markup clean.

Wrap the nav element with aria-label for screen reader clarity

Bootstrap requires aria-label="breadcrumb" on the wrapping nav element so assistive technologies announce it as a distinct landmark, separate from primary or footer navigation.

FAQ

Does the JSON-LD script block need to be inside the nav element to work?

No. The JSON-LD script block can be placed anywhere in the document, either in the head or directly after the nav element in the body. Google parses it independently of DOM position. Placing it adjacent to the visible breadcrumb in the body is a common convention that makes the relationship obvious to developers maintaining the code, but it carries no technical SEO advantage over putting it in the head.

How do I change the breadcrumb divider from the default slash to an arrow or custom character?

In Bootstrap 5, override the CSS custom property --bs-breadcrumb-divider in your own stylesheet: :root { --bs-breadcrumb-divider: '>'; }. For an SVG icon, use the escaped SVG syntax: --bs-breadcrumb-divider: url("data:image/svg+xml,..."). You can also scope the override to a specific breadcrumb container using a parent class rather than :root if you need different dividers in different sections.

How does Canvas Builder handle Breadcrumb with Schema generation?

Canvas Builder generates both the Bootstrap 5 HTML breadcrumb markup and the corresponding JSON-LD BreadcrumbList block from a single prompt describing your site hierarchy. It applies your brand colours to link states using Bootstrap utility classes, outputs fully responsive markup that collapses gracefully on small screens, and inserts absolute canonical URLs into the schema automatically based on the domain you configure in your project settings.