What Is Breadcrumbs?
Breadcrumbs are a secondary navigation element that shows users their current location within a website's hierarchy — typically displayed as a horizontal trail of links near the top of a page, e.g. Home > Blog > Web Design > What Is Responsive Design. Named after the Hansel and Gretel fairy tale, breadcrumbs help users understand site structure, navigate back to parent sections, and provide search engines with hierarchical context for pages.
Types of breadcrumbs
Location-based breadcrumbs show where a page sits in the site hierarchy (most common). Attribute-based breadcrumbs show the attributes of the current page — common in e-commerce (Home > Clothing > Mens > Jackets). History-based breadcrumbs show the user's navigation path (browser-like). For SEO purposes, location-based breadcrumbs are most valuable as they reflect the site's information architecture.
Breadcrumbs and SEO
Google displays breadcrumbs in search results instead of the full URL — e.g. 'canvasbuilder.co > Glossary > Bootstrap 5'. This makes results more readable and can improve click-through rate. To enable breadcrumb rich results, implement BreadcrumbList schema markup with JSON-LD. Breadcrumbs also distribute internal link equity from deep pages up through the site hierarchy — benefiting parent category pages.
Bootstrap 5 breadcrumb component
Bootstrap 5 includes a built-in breadcrumb component using the `<nav aria-label='breadcrumb'>` and `<ol class='breadcrumb'>` pattern. The `aria-current='page'` attribute on the last item ensures screen reader compatibility. Canvas Builder generated pages include semantic breadcrumb navigation on template and tool pages.
Breadcrumbs & Canvas Builder
canvasbuilder.co implements breadcrumb navigation and BreadcrumbList schema on all deep pages — template pages, glossary terms, and blog posts — enabling breadcrumb display in Google search results.
Try Canvas Builder →