{"id":376474,"date":"2026-05-13T14:20:12","date_gmt":"2026-05-13T14:20:12","guid":{"rendered":"https:\/\/colorlib.com\/wp\/?p=376474"},"modified":"2026-05-13T14:20:13","modified_gmt":"2026-05-13T14:20:13","slug":"bootstrap-breadcrumbs","status":"publish","type":"post","link":"https:\/\/colorlib.com\/wp\/bootstrap-breadcrumbs\/","title":{"rendered":"20 Free Bootstrap Breadcrumb Examples (2026)"},"content":{"rendered":"<p><em>By <a href=\"https:\/\/colorlib.com\/wp\/aigars-silkalns\/\" rel=\"author\">Aigars Silkalns<\/a> \u00b7 Last updated May 13, 2026 \u00b7 14-min read<\/em><\/p>\n\n<p>Ecommerce category drill-downs, documentation hierarchies, admin dashboard navigation, multi-step checkout flows \u2014 Bootstrap&#8217;s breadcrumb component is the navigation primitive every hierarchical site needs. This collection gathers 20 free Bootstrap 5\u2013compatible breadcrumb examples covering the patterns developers actually ship: the canonical chevron-divider treatment, contextual color themes, icon-augmented breadcrumbs, wizard process-step visualizations, deep hierarchy patterns, mobile-friendly truncation, and Bootstrap 5.3&#8217;s native dark-mode cascade. Crucially, this article also includes a complete <code>BreadcrumbList<\/code> JSON-LD schema implementation guide \u2014 the SEO bonus most breadcrumb listicles miss entirely. Every visible breadcrumb on your site should be paired with the schema so Google can render the rich breadcrumb path directly in search results. If you&#8217;re picking a breadcrumb design, customizing the separator, or implementing schema for SEO, start here.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"what-is\">What is a Bootstrap breadcrumb?<\/h2>\n\n<p>A Bootstrap breadcrumb is a horizontal navigation aid that shows the user&#8217;s current location within a site&#8217;s hierarchy and lets them jump back to any parent level. The pattern derives its name from the Hansel-and-Gretel trail \u2014 each segment is a &#8220;crumb&#8221; pointing back to where the user came from. Bootstrap 5 ships breadcrumbs as a minimal, accessible component with a CSS-customizable separator.<\/p>\n\n<p><strong>When to use breadcrumbs:<\/strong><\/p>\n\n<ul><li>Ecommerce category navigation (&#8220;Home \u203a Electronics \u203a Laptops \u203a Gaming&#8221;)<\/li><li>Blog hierarchies (&#8220;Home \u203a Category \u203a Subcategory \u203a Article&#8221;)<\/li><li>Documentation drill-downs (&#8220;Docs \u203a API \u203a Auth \u203a OAuth&#8221;)<\/li><li>File-system or admin UIs (&#8220;Projects \u203a Acme \u203a Reports \u203a Q4&#8221;)<\/li><li>Settings panels with nested levels<\/li><li>Multi-step wizards and checkout flows<\/li><\/ul>\n\n<p><strong>Bootstrap 5 vs Bootstrap 4 breadcrumbs:<\/strong> The markup is nearly identical between versions. Bootstrap 5 introduced CSS custom properties for the separator (<code>--bs-breadcrumb-divider<\/code>), making per-breadcrumb separator customization trivial \u2014 set the property on the parent element to override the default slash. Bootstrap 4 required SCSS variable overrides for the same effect. Bootstrap 5.3 added <code>data-bs-theme<\/code> for native dark-mode support.<\/p>\n\n<p><strong>SEO and breadcrumbs:<\/strong> Breadcrumbs aren&#8217;t just navigation \u2014 they&#8217;re a signal to search engines about your site&#8217;s information architecture. Implementing <strong><code>BreadcrumbList<\/code> schema<\/strong> (separate from the visible breadcrumb) makes them eligible for Google&#8217;s rich breadcrumb display in SERPs, replacing the URL with a readable path. Every visible breadcrumb on your site should be paired with the schema markup. See the &#8220;Adding <code>BreadcrumbList<\/code> schema&#8221; pattern below for the complete implementation.<\/p>\n\n<p><strong>Browser support:<\/strong> Universal \u2014 breadcrumbs are pure HTML\/CSS and work everywhere Bootstrap 5 is supported.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"how-to-use\">How to use Bootstrap breadcrumbs (basic markup)<\/h2>\n\n<pre class=\"wp-block-code\"><code class=\"language-html\">&lt;!-- Basic breadcrumb (default slash separator) --&gt;\n&lt;nav aria-label=\"breadcrumb\"&gt;\n  &lt;ol class=\"breadcrumb\"&gt;\n    &lt;li class=\"breadcrumb-item\"&gt;&lt;a href=\"\/\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li class=\"breadcrumb-item\"&gt;&lt;a href=\"\/library\/\"&gt;Library&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li class=\"breadcrumb-item active\" aria-current=\"page\"&gt;Data&lt;\/li&gt;\n  &lt;\/ol&gt;\n&lt;\/nav&gt;\n\n&lt;!-- Custom separator (arrow) --&gt;\n&lt;nav style=\"--bs-breadcrumb-divider: '&gt;'\" aria-label=\"breadcrumb\"&gt;\n  &lt;ol class=\"breadcrumb\"&gt;\n    &lt;li class=\"breadcrumb-item\"&gt;&lt;a href=\"\/\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li class=\"breadcrumb-item active\" aria-current=\"page\"&gt;Library&lt;\/li&gt;\n  &lt;\/ol&gt;\n&lt;\/nav&gt;\n\n&lt;!-- SVG separator (chevron) --&gt;\n&lt;nav style='--bs-breadcrumb-divider: url(\"data:image\/svg+xml,%3Csvg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 width=%228%22 height=%228%22%3E%3Cpath d=%22M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z%22 fill=%22%236c757d%22\/%3E%3C\/svg%3E\");' aria-label=\"breadcrumb\"&gt;\n  &lt;ol class=\"breadcrumb\"&gt;\n    &lt;li class=\"breadcrumb-item\"&gt;&lt;a href=\"\/\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li class=\"breadcrumb-item active\" aria-current=\"page\"&gt;Products&lt;\/li&gt;\n  &lt;\/ol&gt;\n&lt;\/nav&gt;<\/code><\/pre>\n\n<p><strong>Required JS:<\/strong> None \u2014 breadcrumbs are pure CSS.<\/p>\n\n<p><strong>Common gotcha:<\/strong> The <code>aria-current=\"page\"<\/code> attribute on the final crumb is what screen readers use to identify the current location. Don&#8217;t omit it. Also, the final crumb should not be a link \u2014 it&#8217;s the current page, so there&#8217;s nowhere to go.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"examples\">Best free Bootstrap breadcrumb examples<\/h2>\n\n<p>We grouped the 20 picks by use case rather than ranking them \u2014 every example below is a viable production starting point. Each screenshot shows our Bootstrap 5.3 implementation of the pattern, inspired by the original designer credited beneath. The &#8220;Original demo&#8221; link goes to the source pen, snippet, or repository for those who want to fork, compare implementations, or see the author&#8217;s specific code style.<\/p>\n\n<p><strong>Showcase \u2014 visually distinctive breadcrumb designs<\/strong><\/p>\n\n<h3 class=\"wp-block-heading\">1. Divider Variable Swap Demo<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumb-divider-showcase-by-sitepoint.jpg\" alt=\"Bootstrap breadcrumb divider showcase \u2014 four side-by-side variations using --bs-breadcrumb-divider for slash, arrow, dot, and embedded SVG chevron\" \/><\/figure>\n<p>Four breadcrumb variations on a single page \u2014 slash, greater-than arrow, dot, and embedded SVG chevron \u2014 each driven by the <code>--bs-breadcrumb-divider<\/code> custom property. Best fit as a reference card: copy-paste the divider style you want into your project, change one inline-style attribute, ship it. Pure Bootstrap 5.3 \u2014 no JavaScript, no extra CSS. The SVG variant uses a data-URI so there&#8217;s no icon-font dependency. For documentation sites that explain breadcrumb customization to users, this side-by-side layout is the cleanest reference pattern.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/SitePoint\" rel=\"nofollow noopener\" target=\"_blank\">SitePoint<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/SitePoint\/pen\/QWvRpZw\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/SitePoint\/pen\/QWvRpZw\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">2. Multi-Size Navbar Breadcrumb<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumb-navbar-by-mdbootstrap.jpg\" alt=\"Bootstrap breadcrumb inside navbar and dashboard header \u2014 three escalating depths from simple to dashboard page-title context\" \/><\/figure>\n<p>Breadcrumb embedded inside a top navbar plus a dashboard page-header pattern showing the breadcrumb directly above the page title. Best fit for SaaS apps and admin dashboards where the breadcrumb serves both as navigation aid and contextual reference for the current page. Pure Bootstrap 5.3 \u2014 the navbar uses standard <code>.navbar<\/code> markup, the dashboard header pairs the breadcrumb with an <code>&lt;h2&gt;<\/code> for a tight visual association. Use small font size (<code>.small<\/code>) for the breadcrumb so it stays subordinate to the page title.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/mdbootstrap.com\" rel=\"nofollow noopener\" target=\"_blank\">MDBootstrap<\/a> \u00b7 License: MDB-free<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/mdbootstrap.com\/docs\/standard\/navigation\/breadcrumb\/\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/mdbootstrap.com\/docs\/standard\/navigation\/breadcrumb\/\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">3. Gallery Variant Browser<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumb-gallery-by-shuffle.jpg\" alt=\"Bootstrap breadcrumb variant gallery \u2014 basic, colored background, icon-augmented, and dark mode tiles in a 2x2 grid\" \/><\/figure>\n<p>Four-variant gallery (basic, colored background, icon-augmented, dark mode) shown as a 2\u00d72 tile grid for inspiration browsing. Best fit as a kitchen-sink reference: lets you see how different visual treatments look against each other before committing to one. Pure Bootstrap 5.3 with custom tile wrappers. Each tile demonstrates a different design decision: chrome (basic vs colored), iconography, and dark-mode treatment. The colored tile uses <code>#dbeafe<\/code> background (Bootstrap&#8217;s blue-100) for low-emphasis attention without competing with primary actions.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/shuffle.dev\" rel=\"nofollow noopener\" target=\"_blank\">Shuffle.dev<\/a> \u00b7 License: Free (Shuffle gallery)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/shuffle.dev\/components\/bootstrap\/all\/breadcrumbs\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/shuffle.dev\/components\/bootstrap\/all\/breadcrumbs\">Original demo<\/a><\/p>\n\n<p><strong>Separator variations \u2014 slash, arrow, chevron, dot, SVG<\/strong><\/p>\n\n<h3 class=\"wp-block-heading\">4. Embedded SVG Chevron<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumb-chevron-by-bootstrap.jpg\" alt=\"Bootstrap embedded SVG chevron breadcrumb \u2014 data-URI chevron divider on --bs-breadcrumb-divider without any icon font dependency\" \/><\/figure>\n<p>The canonical Bootstrap 5 chevron breadcrumb \u2014 embedded SVG via data-URI on the <code>--bs-breadcrumb-divider<\/code> custom property. Best fit as the modern default for SaaS, dashboards, and product UIs (this is the pattern Stripe, Linear, Vercel use). Pure Bootstrap 5.3 with zero icon-font dependency. The data-URI keeps the SVG inline so there&#8217;s nothing extra to load. To recolor the chevron, change the <code>fill=\"%236c757d\"<\/code> URL-encoded hex inside the data-URI. The four-level breadcrumb in this example mirrors the canonical ecommerce drill-down (Home \u203a Electronics \u203a Audio \u203a Wireless Headphones).<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/github.com\/twbs\" rel=\"nofollow noopener\" target=\"_blank\">Bootstrap (twbs)<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/breadcrumb\/\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/breadcrumb\/\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">5. Double-Arrow Divider<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumb-double-arrow-by-shahednasser.jpg\" alt=\"Bootstrap breadcrumb with double-arrow divider \u2014 chevron right-pointing double angle quotes as separator with three variations\" \/><\/figure>\n<p>Three multi-character divider variants \u2014 <code>\u00bb<\/code> (right-pointing double angle quotation), <code>&gt;&gt;<\/code> (literal double greater-than), and <code>\u2192<\/code> (arrow). Best fit for distinctive designs that want a more emphatic separator than the Bootstrap default. Pure Bootstrap 5 \u2014 set <code>--bs-breadcrumb-divider<\/code> to any single character or short string. Avoid characters longer than 2 chars; they look cramped between crumbs. Test in your live typography \u2014 some characters (like <code>\u2192<\/code>) inherit weight from the parent font and may need <code>color: #6c757d<\/code> to match the default muted treatment.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/shahednasser\" rel=\"nofollow noopener\" target=\"_blank\">shahednasser<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/shahednasser\/pen\/QWvKRrV\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/shahednasser\/pen\/QWvKRrV\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">6. Dots Arrows Bullets<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumb-utility-separators-by-tabler.jpg\" alt=\"Bootstrap breadcrumb separator utilities \u2014 three first-class classes (breadcrumb-dots, breadcrumb-arrows, breadcrumb-bullets) stacked vertically\" \/><\/figure>\n<p>Three first-class separator utility classes \u2014 <code>.breadcrumb-dots<\/code> (\u00b7), <code>.breadcrumb-arrows<\/code> (\u203a), and <code>.breadcrumb-bullets<\/code> (\u2022). Best fit for design systems where breadcrumb separators should be a controlled set rather than per-page custom values. Bootstrap-compatible CSS that extends the base <code>.breadcrumb<\/code> with utility-class overrides for the <code>--bs-breadcrumb-divider<\/code> property. Define them once in your global stylesheet, then choose by adding the class. The Tabler implementation also ships <code>.breadcrumb-muted<\/code> for low-emphasis treatment.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/github.com\/tabler\" rel=\"nofollow noopener\" target=\"_blank\">Tabler<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/github.com\/tabler\/tabler\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/docs.tabler.io\/ui\/components\/breadcrumb\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">7. No-Divider Plus Defaults<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumb-no-divider-by-fastbootstrap.jpg\" alt=\"Bootstrap breadcrumb variant matrix \u2014 default slash divider, custom arrow divider, and no-divider stacked for comparison\" \/><\/figure>\n<p>Three breadcrumb variants on one page \u2014 default slash divider, custom arrow divider, and no-divider (just spacing). Best fit as a quick-reference for the most common Bootstrap 5 breadcrumb decisions. Pure Bootstrap 5.3 \u2014 the no-divider variant uses <code>--bs-breadcrumb-divider: none<\/code>, which removes the separator entirely (some designs prefer pure spacing for a minimalist look). The custom arrow uses <code>'\u203a'<\/code> (Unicode <code>U+203A<\/code>), a lighter weight than the standard <code>&gt;<\/code> that pairs better with serif typography.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/fastbootstrap.com\" rel=\"nofollow noopener\" target=\"_blank\">FastBootstrap<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/fastbootstrap.com\/components\/breadcrumb\/\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/fastbootstrap.com\/components\/breadcrumb\/\">Original demo<\/a><\/p>\n\n<p><strong>Icon-augmented breadcrumbs<\/strong><\/p>\n\n<h3 class=\"wp-block-heading\">8. Font Awesome Per Label<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumb-fontawesome-by-jamielowjy.jpg\" alt=\"Bootstrap breadcrumb with Font Awesome icons per label \u2014 home, folder, file, and chart icons paired with text on each crumb\" \/><\/figure>\n<p>Font Awesome icons paired with each label \u2014 home, folder, file, chart icons inline with text on every crumb. Best fit for admin dashboards, file-system UIs, and any product where each hierarchy level has a recognizable icon identity. Pure Bootstrap 5 with Font Awesome 6. Use <code>me-2<\/code> for consistent spacing between icon and label. Keep icons consistent in metaphor \u2014 don&#8217;t mix solid and outline styles within one breadcrumb. For dense breadcrumbs (4+ levels), drop icons on parent crumbs and keep them only on the current page to reduce visual weight.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/jamielowjy\" rel=\"nofollow noopener\" target=\"_blank\">jamielowjy<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/jamielowjy\/pen\/wWaPxP\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/jamielowjy\/pen\/wWaPxP\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">9. Angle-Right Glyph Divider<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumb-angle-divider-by-fontawesome.jpg\" alt=\"Bootstrap breadcrumb with Font Awesome angle-right glyph divider \u2014 \\f105 character rendered via ::before pseudo-element on breadcrumb items\" \/><\/figure>\n<p>Font Awesome <code>\\f105<\/code> (angle-right) glyph as the divider via the <code>::before<\/code> pseudo-element on <code>.breadcrumb-item<\/code>. Best fit when you already have Font Awesome loaded and want a consistent icon family across your UI. Pure CSS override \u2014 point <code>--bs-breadcrumb-divider<\/code> at a Unicode escape, then set <code>font-family<\/code> on <code>.breadcrumb-item+.breadcrumb-item::before<\/code> to the Font Awesome family. Color and size inherit from the parent <code>.breadcrumb<\/code>. This pattern lets you swap to any Font Awesome icon (chevron, caret, etc.) by changing one CSS escape.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/fontawesome\" rel=\"nofollow noopener\" target=\"_blank\">Font Awesome<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/fontawesome\/pen\/GBQOvo\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/fontawesome\/pen\/GBQOvo\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">10. Section Icons Plus Muted<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumb-section-icons-by-bbbootstrap.jpg\" alt=\"Bootstrap breadcrumb with section icons and muted parent crumbs \u2014 home and folder icons with text-muted styling, primary-color active item\" \/><\/figure>\n<p>Section-prefix icons (home, folder, file-text) with text-muted parent crumbs and primary-color active item. Best fit for documentation sites, file managers, and admin tools where the hierarchy itself carries semantic meaning. Bootstrap 5 with Bootstrap Icons. Combines two design patterns: per-label icons (for instant section recognition) and color-based current-page emphasis (muted parents + bold blue current). The combination reduces visual noise while maintaining strong wayfinding signals.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/bbbootstrap.com\" rel=\"nofollow noopener\" target=\"_blank\">bbbootstrap<\/a> \u00b7 License: Free (BBBootstrap)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/bbbootstrap.com\/snippets\/simple-breadcrumbs-icon-61558275\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/bbbootstrap.com\/snippets\/simple-breadcrumbs-icon-61558275\">Original demo<\/a><\/p>\n\n<p><strong>Color &amp; theme variants \u2014 including BS5.3 dark mode<\/strong><\/p>\n\n<h3 class=\"wp-block-heading\">11. Six Contextual Themes<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumb-contextual-by-faytranevozter.jpg\" alt=\"Bootstrap breadcrumb in six contextual color themes \u2014 primary, success, info, warning, danger, and a rainbow gradient variant stacked vertically\" \/><\/figure>\n<p>Six contextual color themes stacked vertically \u2014 primary, success, info, warning, danger, plus a gradient variant \u2014 applied to <code>.breadcrumb<\/code> backgrounds. Best fit for status-aware breadcrumbs (e.g., danger color for the audit-log page, success for the all-checks-passed dashboard). Pure Bootstrap 5 with custom color-class overrides on <code>.breadcrumb<\/code>. White text inherits from the parent class for contrast on dark colors; warning uses dark text on yellow for WCAG AA compliance. Use sparingly \u2014 colored breadcrumbs draw attention away from page content.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/bootsnipp.com\/user\/faytranevozter\" rel=\"nofollow noopener\" target=\"_blank\">faytranevozter<\/a> \u00b7 License: MIT (Bootsnipp default)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/bootsnipp.com\/snippets\/9No6\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/bootsnipp.com\/snippets\/9No6\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">12. Wizard Three-State Color<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumb-wizard-states-by-shantikumarsingh.jpg\" alt=\"Bootstrap wizard breadcrumb with three-state coloring \u2014 completed (green check), active (blue), pending (grey) steps for multi-step flow\" \/><\/figure>\n<p>Wizard breadcrumb with three-state coloring \u2014 completed (green check), active (primary blue), pending (muted grey) \u2014 for multi-step flows. Best fit for checkout pages, multi-step onboarding, and any process where users need to see &#8220;what&#8217;s done, what&#8217;s now, what&#8217;s next.&#8221; Pure Bootstrap 5 with custom CSS classes (<code>.done<\/code>, <code>.current<\/code>, <code>.pending<\/code>) on each <code>.breadcrumb-item<\/code>. The check glyph on completed steps uses Font Awesome&#8217;s <code>\\f00c<\/code>. Wire the state classes to your form step controller so completed steps automatically get the green treatment.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/bootsnipp.com\/user\/shantikumarsingh\" rel=\"nofollow noopener\" target=\"_blank\">shantikumarsingh<\/a> \u00b7 License: MIT (Bootsnipp default)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/bootsnipp.com\/snippets\/DrKen\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/bootsnipp.com\/snippets\/DrKen\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">13. Dark Mode Breadcrumb<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumb-dark-mode-by-mdbootstrap.jpg\" alt=\"Bootstrap dark mode breadcrumb \u2014 data-bs-theme dark with sky-blue links on a dark navy background plus an elevated tile\" \/><\/figure>\n<p>Bootstrap 5.3&#8217;s native dark mode applied to the breadcrumb via <code>data-bs-theme=\"dark\"<\/code> \u2014 sky-blue links on a dark navy background. Best fit for any product that ships a dark-mode toggle. Pure Bootstrap 5.3 \u2014 the theme attribute cascades to recolor links, dividers, and text automatically. The example also shows the breadcrumb on an elevated surface (a darker tile within the dark page) to demonstrate the visual hierarchy that dark mode tends to flatten. Pair with the <code>prefers-color-scheme: dark<\/code> media query for system-preference autodetection.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/github.com\/mdbootstrap\" rel=\"nofollow noopener\" target=\"_blank\">MDBootstrap (Dark Mode)<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/github.com\/mdbootstrap\/Bootstrap-5-Dark-Mode\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/github.com\/mdbootstrap\/Bootstrap-5-Dark-Mode\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">14. Minimal No-Background<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumb-minimal-by-sbcodestudio.jpg\" alt=\"Minimal Bootstrap breadcrumb placement above page title \u2014 no background fill, tight padding, used as contextual hint above an H1\" \/><\/figure>\n<p>Stripped, minimal breadcrumb placed directly above an H1 page title \u2014 no background fill, tight padding, small font size. Best fit for editorial content sites (blogs, documentation, marketing pages) where the breadcrumb should hint at hierarchy without competing with the page title. Pure Bootstrap 5 with two CSS overrides: <code>background: transparent<\/code> and <code>padding: 0<\/code> on <code>.breadcrumb<\/code>. The breadcrumb sits 8px above the H1, signaling &#8220;you got here from somewhere&#8221; without disrupting the reading flow. The most common pattern in production content sites.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/sbcodestudio\" rel=\"nofollow noopener\" target=\"_blank\">sbcodestudio<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/sbcodestudio\/pen\/BajeQNw\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/sbcodestudio\/pen\/BajeQNw\">Original demo<\/a><\/p>\n\n<p><strong>Specialty layouts \u2014 wizard, deep hierarchy, justified<\/strong><\/p>\n\n<h3 class=\"wp-block-heading\">15. Wizard Arrow Chevrons<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumb-wizard-arrows-by-tbrownvisuals.jpg\" alt=\"Bootstrap wizard arrow-shape breadcrumb using CSS clip-path \u2014 five arrow chevrons with done\/current\/pending color states\" \/><\/figure>\n<p>Wizard arrow-shape breadcrumb using CSS <code>clip-path<\/code> \u2014 each crumb becomes an arrow chevron with done\/current\/pending color states. Best fit for retail checkout, project-management apps, and any process visualization where the arrow shape reinforces forward motion. Pure CSS \u2014 the arrow shape uses <code>clip-path: polygon(...)<\/code> with no images. The first crumb has a flat left edge (no incoming arrow notch). Browser support is universal for <code>clip-path<\/code> in modern browsers (Chrome, Safari, Firefox, Edge since 2020). Provide a fallback <code>border-radius<\/code> for older browsers.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/tbrownvisuals\" rel=\"nofollow noopener\" target=\"_blank\">tbrownvisuals<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/tbrownvisuals\/pen\/pNBomO\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/tbrownvisuals\/pen\/pNBomO\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">16. Deep Seven-Level Hierarchy<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumb-deep-hierarchy-by-rense.jpg\" alt=\"Bootstrap deep seven-level breadcrumb hierarchy \u2014 eight crumbs wrapped gracefully on a soft gradient background showing scalability\" \/><\/figure>\n<p>Deep seven-level breadcrumb hierarchy on a soft gradient background showing scalability \u2014 Home \u203a Reports \u203a 2026 \u203a Q2 \u203a North America \u203a Enterprise \u203a Customer X \u203a Renewal Forecast. Best fit for enterprise SaaS, business-intelligence dashboards, and any product with naturally deep navigation hierarchies (think reporting tools, finance, legal). Pure Bootstrap 5 with <code>flex-wrap: wrap<\/code> on the <code>.breadcrumb<\/code> so it wraps gracefully on narrow viewports rather than horizontally scrolling. The gradient background is a soft indigo-to-amber for visual interest without distraction. For 8+ levels, consider truncation (#19) instead.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/rense_\" rel=\"nofollow noopener\" target=\"_blank\">Rense Huijg<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/rense_\/pen\/VaGrxX\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/rense_\/pen\/VaGrxX\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">17. Justified Process Steps<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumb-justified-by-prograk.jpg\" alt=\"Bootstrap justified process-steps breadcrumb \u2014 flex layout filling container edge-to-edge with done, current, and pending labels\" \/><\/figure>\n<p>Justified process-steps breadcrumb using <code>display: flex<\/code> with <code>flex: 1<\/code> on each item \u2014 distributes equal width across all steps regardless of label length. Best fit for any progress visualization where equal step width is meaningful (assessments, onboarding, tutorials). Pure CSS \u2014 no Bootstrap classes needed beyond layout utilities. Each step shows a number, label, and status sublabel. Color coding (green done, blue current, grey pending) matches the wizard pattern but with edge-to-edge layout instead of inline. For 3-5 steps, this is the most scannable breadcrumb variant.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/bootsnipp.com\/user\/prograk\" rel=\"nofollow noopener\" target=\"_blank\">prograk<\/a> \u00b7 License: MIT (Bootsnipp default)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/bootsnipp.com\/snippets\/XMjR2\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/bootsnipp.com\/snippets\/XMjR2\">Original demo<\/a><\/p>\n\n<p><strong>Mobile patterns \u2014 truncation &amp; ellipsis collapse<\/strong><\/p>\n\n<h3 class=\"wp-block-heading\">18. Per-Item Ellipsis Truncate<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumb-ellipsis-by-marclundgren.jpg\" alt=\"Bootstrap breadcrumb with per-item text-overflow ellipsis \u2014 untruncated and truncated versions side-by-side showing 160px cap\" \/><\/figure>\n<p>Per-item ellipsis truncation \u2014 each <code>.breadcrumb-item<\/code> capped at 160px with <code>text-overflow: ellipsis<\/code>. Best fit for breadcrumbs whose individual segments can be unpredictably long (user-generated category names, document titles, customer names). Pure CSS \u2014 <code>max-width<\/code>, <code>overflow: hidden<\/code>, <code>text-overflow: ellipsis<\/code>, and <code>white-space: nowrap<\/code> on each item. The user can still hover to see the full label via the link&#8217;s title attribute. Set the max-width to whatever fits two typical labels side-by-side \u2014 160px works for most English typography at 14-16px font sizes.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/marclundgren\" rel=\"nofollow noopener\" target=\"_blank\">marclundgren<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/marclundgren\/pen\/DdmOGN\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/marclundgren\/pen\/DdmOGN\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">19. Smart Flexbox Ellipsis<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumb-smart-ellipsis-by-shippin.jpg\" alt=\"Bootstrap smart flexbox ellipsis breadcrumb \u2014 desktop showing all crumbs vs mobile collapsing middle into an ellipsis dropdown\" \/><\/figure>\n<p>Smart flexbox ellipsis \u2014 desktop shows all crumbs, mobile collapses middle crumbs into an ellipsis dropdown trigger that preserves the first crumb plus the last 2. Best fit for ecommerce and enterprise SaaS that need full breadcrumb context on desktop but minimal chrome on mobile. Pure Bootstrap 5 with custom responsive logic; the ellipsis can wrap a Bootstrap dropdown so users can still navigate to collapsed levels. Always preserve <strong>Home<\/strong> (first) and <strong>current page<\/strong> (last) \u2014 those are the two most-used jump targets. Drop deeper internal levels first.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/shippin\" rel=\"nofollow noopener\" target=\"_blank\">shippin<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/shippin\/pen\/YrwrYa\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/shippin\/pen\/YrwrYa\">Original demo<\/a><\/p>\n\n<p><strong>BreadcrumbList JSON-LD schema demo<\/strong><\/p>\n\n<h3 class=\"wp-block-heading\">20. BreadcrumbList JSON-LD Reference<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumb-jsonld-schema-by-jayholtslander.jpg\" alt=\"Bootstrap breadcrumb paired with BreadcrumbList JSON-LD schema reference \u2014 visible breadcrumb plus matching script type application\/ld+json code block\" \/><\/figure>\n<p>Visible Bootstrap breadcrumb paired with a matching <code>BreadcrumbList<\/code> JSON-LD schema block \u2014 the SEO bonus that lets Google display the breadcrumb hierarchy directly in search results. Best fit (genuinely) for every public-facing page with a breadcrumb. Pure HTML \u2014 drop the <code>&lt;script type=\"application\/ld+json\"&gt;<\/code> block anywhere in the page (head or body, both valid). The schema must match the visible breadcrumb exactly (same names, same order, same URLs) \u2014 mismatched schemas trigger Google Search Console quality warnings. Omit the <code>item<\/code> URL on the final\/current crumb. See Pattern 1 in the advanced patterns below for the full template.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/github.com\/JayHoltslander\" rel=\"nofollow noopener\" target=\"_blank\">JayHoltslander<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/github.com\/JayHoltslander\/Structured-Data-JSON-LD\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/github.com\/JayHoltslander\/Structured-Data-JSON-LD\/blob\/master\/BreadcrumbList.json\">Original demo<\/a><\/p>\n\n<h2 class=\"wp-block-heading\" id=\"advanced-patterns\">Advanced Bootstrap breadcrumb patterns<\/h2>\n\n<p>Three patterns the listicle items above hint at but rarely demo as full working code. The first is the SEO differentiator most breadcrumb listicles skip entirely.<\/p>\n\n<p><strong>Pattern 1 \u2014 Adding <code>BreadcrumbList<\/code> schema (the SEO bonus).<\/strong> Place a <code>BreadcrumbList<\/code> JSON-LD block in the page that mirrors the visible breadcrumb exactly. Google uses this for the rich breadcrumb display in SERPs, replacing the raw URL with a readable path:<\/p>\n\n<pre class=\"wp-block-code\"><code class=\"language-html\">&lt;nav aria-label=\"breadcrumb\"&gt;\n  &lt;ol class=\"breadcrumb\"&gt;\n    &lt;li class=\"breadcrumb-item\"&gt;&lt;a href=\"https:\/\/example.com\/\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li class=\"breadcrumb-item\"&gt;&lt;a href=\"https:\/\/example.com\/products\/\"&gt;Products&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li class=\"breadcrumb-item active\" aria-current=\"page\"&gt;Wireless Headphones&lt;\/li&gt;\n  &lt;\/ol&gt;\n&lt;\/nav&gt;\n\n&lt;script type=\"application\/ld+json\"&gt;\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 1,\n      \"name\": \"Home\",\n      \"item\": \"https:\/\/example.com\/\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 2,\n      \"name\": \"Products\",\n      \"item\": \"https:\/\/example.com\/products\/\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 3,\n      \"name\": \"Wireless Headphones\"\n    }\n  ]\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n<p><strong>Critical:<\/strong> The schema must match the visible breadcrumb exactly (same names, same order, same URLs). Mismatched schemas trigger Google Search Console quality flags. The final\/current crumb omits the <code>item<\/code> URL \u2014 schema validates &#8220;current page has no link&#8221; by absence rather than by a value. Verify your implementation via <a href=\"https:\/\/search.google.com\/test\/rich-results\" rel=\"nofollow noopener\" target=\"_blank\">Google&#8217;s Rich Results Test<\/a> before deploying.<\/p>\n\n<p><strong>Pattern 2 \u2014 Truncated breadcrumbs for deep hierarchies.<\/strong> Breadcrumbs can grow too long (&#8220;Home \u203a Reports \u203a 2026 \u203a Q2 \u203a North America \u203a Enterprise \u203a Customer X&#8221;). On mobile especially, this wraps badly. Truncate the middle with an ellipsis dropdown:<\/p>\n\n<pre class=\"wp-block-code\"><code class=\"language-html\">&lt;nav aria-label=\"breadcrumb\"&gt;\n  &lt;ol class=\"breadcrumb\"&gt;\n    &lt;li class=\"breadcrumb-item\"&gt;&lt;a href=\"\/\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li class=\"breadcrumb-item\"&gt;\n      &lt;div class=\"dropdown\"&gt;\n        &lt;a href=\"#\" class=\"dropdown-toggle\" data-bs-toggle=\"dropdown\"&gt;\u2026&lt;\/a&gt;\n        &lt;ul class=\"dropdown-menu\"&gt;\n          &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"\/reports\/\"&gt;Reports&lt;\/a&gt;&lt;\/li&gt;\n          &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"\/reports\/2026\/\"&gt;2026&lt;\/a&gt;&lt;\/li&gt;\n          &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"\/reports\/2026\/q2\/\"&gt;Q2&lt;\/a&gt;&lt;\/li&gt;\n          &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"\/reports\/2026\/q2\/na\/\"&gt;North America&lt;\/a&gt;&lt;\/li&gt;\n        &lt;\/ul&gt;\n      &lt;\/div&gt;\n    &lt;\/li&gt;\n    &lt;li class=\"breadcrumb-item\"&gt;&lt;a href=\"\/reports\/2026\/q2\/na\/enterprise\/\"&gt;Enterprise&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li class=\"breadcrumb-item active\" aria-current=\"page\"&gt;Customer X&lt;\/li&gt;\n  &lt;\/ol&gt;\n&lt;\/nav&gt;<\/code><\/pre>\n\n<p>Always preserve the <strong>first<\/strong> crumb (Home) and the <strong>last 1\u20132<\/strong> crumbs (current context). Collapse the middle. See our <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-dropdowns\/\">Bootstrap dropdowns<\/a> collection for the dropdown trigger styling.<\/p>\n\n<p><strong>Pattern 3 \u2014 Breadcrumbs with icons.<\/strong> Adding small icons to breadcrumb segments improves scannability \u2014 particularly for breadcrumbs in admin\/dashboard contexts where each level has a recognizable section icon:<\/p>\n\n<pre class=\"wp-block-code\"><code class=\"language-html\">&lt;nav aria-label=\"breadcrumb\"&gt;\n  &lt;ol class=\"breadcrumb\"&gt;\n    &lt;li class=\"breadcrumb-item\"&gt;\n      &lt;a href=\"\/\"&gt;&lt;i class=\"bi bi-house-door me-1\"&gt;&lt;\/i&gt;Home&lt;\/a&gt;\n    &lt;\/li&gt;\n    &lt;li class=\"breadcrumb-item\"&gt;\n      &lt;a href=\"\/users\/\"&gt;&lt;i class=\"bi bi-people me-1\"&gt;&lt;\/i&gt;Users&lt;\/a&gt;\n    &lt;\/li&gt;\n    &lt;li class=\"breadcrumb-item active\" aria-current=\"page\"&gt;\n      &lt;i class=\"bi bi-person me-1\"&gt;&lt;\/i&gt;Profile\n    &lt;\/li&gt;\n  &lt;\/ol&gt;\n&lt;\/nav&gt;<\/code><\/pre>\n\n<p>Keep icons consistent in size (16px) and aligned via <code>me-1<\/code> (margin-end). Don&#8217;t mix icon styles within one breadcrumb (e.g., solid icons on parents and outline on the current page).<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"comparison\">Breadcrumb vs navigation menu \u2014 when to use which<\/h2>\n\n<figure class=\"wp-block-table\"><table><thead><tr><th><\/th><th>Breadcrumb<\/th><th>Navigation menu<\/th><\/tr><\/thead><tbody>\n<tr><th>Shows<\/th><td>User&#8217;s current path within hierarchy<\/td><td>Site-wide navigation options<\/td><\/tr>\n<tr><th>Position<\/th><td>Below header, above content<\/td><td>In header or sidebar<\/td><\/tr>\n<tr><th>Direction<\/th><td>Linear, left-to-right<\/td><td>Vertical or horizontal grouped<\/td><\/tr>\n<tr><th>Implies<\/th><td>Hierarchy depth<\/td><td>Site sections<\/td><\/tr>\n<tr><th>User action<\/th><td>Jump back to a parent level<\/td><td>Navigate to any section<\/td><\/tr>\n<tr><th>Required on every page<\/th><td>No (only on hierarchical pages)<\/td><td>Usually yes (consistent navigation)<\/td><\/tr>\n<tr><th>Mobile behavior<\/th><td>Often hides middle crumbs<\/td><td>Often collapses to hamburger<\/td><\/tr>\n<tr><th>Best for<\/th><td>Deep sites (ecommerce, docs, admin)<\/td><td>All sites<\/td><\/tr>\n<\/tbody><\/table><\/figure>\n\n<p>Breadcrumbs complement navigation menus \u2014 they don&#8217;t replace them. A site can (and should) have both. Pair breadcrumbs with our <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-navbar\/\">Bootstrap navbar examples<\/a> for the top-level navigation, and reach for <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-pagination\/\">Bootstrap pagination templates<\/a> when the content is a paginated list rather than a hierarchical tree.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"faq\">Frequently asked questions<\/h2>\n\n\n<style>\n.faq-accordion{margin:28px 0 36px}\n.faq-accordion details{background:#fff;border:1px solid #e6e9ec;border-radius:10px;margin-bottom:12px;transition:box-shadow .18s ease,border-color .18s ease;overflow:hidden}\n.faq-accordion details:hover{border-color:#cfd6dc;box-shadow:0 4px 14px rgba(15,23,42,.05)}\n.faq-accordion details[open]{border-color:#cfd6dc;box-shadow:0 6px 20px rgba(15,23,42,.06)}\n.faq-accordion summary{cursor:pointer;padding:18px 56px 18px 22px;font-weight:600;font-size:1.02rem;line-height:1.45;position:relative;list-style:none;color:#0f172a;transition:color .15s ease}\n.faq-accordion summary::-webkit-details-marker{display:none}\n.faq-accordion summary::marker{display:none}\n.faq-accordion summary::after{content:\"\";position:absolute;right:22px;top:50%;width:14px;height:14px;border-right:2px solid #64748b;border-bottom:2px solid #64748b;transform:translateY(-70%) rotate(45deg);transition:transform .2s ease,border-color .15s ease}\n.faq-accordion details[open] summary::after{transform:translateY(-30%) rotate(-135deg);border-color:#2563eb}\n.faq-accordion summary:hover{color:#2563eb}\n.faq-accordion summary:focus-visible{outline:2px solid #2563eb;outline-offset:-2px;border-radius:8px}\n.faq-accordion details>*:not(summary){padding:0 22px 18px 22px;margin-top:0}\n.faq-accordion details>p,.faq-accordion details>div{padding:14px 22px 18px 22px;border-top:1px solid #f1f5f9;margin:0;line-height:1.65;color:#475569}\n.faq-accordion details code{background:#f1f5f9;padding:2px 7px;border-radius:4px;font-size:.9em;color:#be185d;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}\n.faq-accordion details a{color:#2563eb;text-decoration:underline;text-underline-offset:2px}\n<\/style>\n<div class=\"faq-accordion\">\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\" open><summary>How do I add breadcrumbs in Bootstrap?<\/summary><p>Use the <code>&lt;nav&gt;<\/code> element with <code>aria-label=\"breadcrumb\"<\/code> wrapping an <code>&lt;ol class=\"breadcrumb\"&gt;<\/code>. Each segment is a <code>&lt;li class=\"breadcrumb-item\"&gt;<\/code> containing a link, except the current page which uses <code>&lt;li class=\"breadcrumb-item active\" aria-current=\"page\"&gt;<\/code> and contains text (not a link). The slash separator appears automatically via CSS \u2014 no JavaScript required.<\/p><\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>How do I change the Bootstrap breadcrumb separator?<\/summary><p>Set the <code>--bs-breadcrumb-divider<\/code> CSS custom property on the parent element: <code>&lt;nav style=\"--bs-breadcrumb-divider: '&gt;';\"&gt;<\/code> for an arrow separator, or use a URL with an inline SVG for chevron, dot, or any custom shape. Bootstrap 5 introduced this property \u2014 Bootstrap 4 required SCSS variable overrides. See items #4\u2013#7 in this collection for working examples of each separator style.<\/p><\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>How do I add BreadcrumbList schema for SEO?<\/summary><p>Add a <code>&lt;script type=\"application\/ld+json\"&gt;<\/code> block to the page with a <code>BreadcrumbList<\/code> JSON-LD structure mirroring the visible breadcrumb. Each segment is a <code>ListItem<\/code> with <code>position<\/code>, <code>name<\/code>, and <code>item<\/code> (the URL \u2014 omit on the final\/current page). The schema must exactly match the visible content. See the &#8220;Adding BreadcrumbList schema&#8221; pattern above for the complete code template.<\/p><\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Are breadcrumbs good for SEO?<\/summary><p>Yes \u2014 when paired with <code>BreadcrumbList<\/code> schema markup, breadcrumbs help Google display rich breadcrumb paths in search results (replacing the raw URL with a readable hierarchy). They also reinforce your site&#8217;s information architecture for crawlers. Google has used breadcrumb schema for SERP display since 2014 and treats it as a positive site-quality signal. Always validate your implementation via Google&#8217;s Rich Results Test.<\/p><\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Should breadcrumbs be visible on every page?<\/summary><p>No \u2014 breadcrumbs make sense only on pages within a clear hierarchy (category pages, sub-pages, deep navigation). On top-level pages (homepage, &#8220;Contact us&#8221;), breadcrumbs add visual noise without information value. Apply breadcrumbs to product pages, blog posts, documentation, and any page where users would want to jump back up the tree.<\/p><\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>How should breadcrumbs behave on mobile?<\/summary><p>Long breadcrumbs wrap awkwardly on narrow screens. Two common patterns: (1) truncate the middle with an ellipsis dropdown that opens to show collapsed segments; (2) keep only the immediate parent and current page, dropping deeper levels. Bootstrap 5&#8217;s flex utilities make either pattern straightforward. Avoid horizontal scrolling \u2014 it&#8217;s discoverability-poor and accessibility-poor. See items #18 and #19 in this collection.<\/p><\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Are these Bootstrap breadcrumb examples free for commercial use?<\/summary><p>Yes \u2014 every example in this collection uses an MIT, Apache 2.0, MDB-free, or CodePen-default license, which permits commercial use including in client projects and SaaS products. Our Bootstrap 5.3 implementations are released under MIT; the original inspirations are linked for those who want to verify each source page&#8217;s specific license terms.<\/p><\/details>\n\n\n\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"final-thoughts\">Final thoughts<\/h2>\n\n<p>Bootstrap&#8217;s breadcrumb component is one of the smallest primitives in the framework but one of the highest-leverage when paired with schema. The picks worth committing to memory: the embedded SVG chevron (#4) as your modern default, the wizard three-state breadcrumb (#12) for multi-step flows, Bootstrap 5.3&#8217;s dark-mode cascade (#13) for any theme-switching product, the minimal-above-title placement (#14) for editorial content sites, and the schema-paired implementation (#20) for every public-facing breadcrumb. The schema is the easy SEO win \u2014 most sites have the visible breadcrumb but forget the JSON-LD that makes Google render it in search results.<\/p>\n\n<p>If you&#8217;re building a hierarchical site, pair these breadcrumbs with our <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-navbar\/\">Bootstrap navbar examples<\/a> for top-level navigation and our <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-sidebar\/\">Bootstrap sidebar templates<\/a> for admin\/dashboard contexts. For paginated content (blog index, search results), see our <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-pagination\/\">Bootstrap pagination templates<\/a> instead \u2014 breadcrumbs are for hierarchy, pagination is for linear traversal.<\/p>\n\n<p><strong>Related collections:<\/strong> <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-navbar\/\">Bootstrap navbar examples<\/a> \u00b7 <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-pagination\/\">Bootstrap pagination templates<\/a> \u00b7 <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-sidebar\/\">Bootstrap sidebar templates<\/a> \u00b7 <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-header\/\">Bootstrap header templates<\/a> \u00b7 <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-dropdowns\/\">Bootstrap dropdown menus<\/a> \u00b7 <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-tables\/\">Bootstrap tables<\/a> \u00b7 <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-cards\/\">Bootstrap cards<\/a> \u00b7 <a href=\"https:\/\/colorlib.com\/wp\/css3-table-templates\/\">CSS3 table templates<\/a> \u00b7 <a href=\"https:\/\/colorlib.com\/wp\/free-website-menu-templates\/\">Free website menu templates<\/a> \u00b7 <a href=\"https:\/\/colorlib.com\/wp\/category\/snippets\/\">Bootstrap snippet library<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>20 free Bootstrap breadcrumb examples \u2014 slash, arrow, chevron, custom separators. Includes BreadcrumbList schema implementation guide. (2026)<\/p>\n","protected":false},"author":697,"featured_media":376473,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"bootstrap breadcrumb","_yoast_wpseo_title":"20 Free Bootstrap Breadcrumb Examples (2026)","_yoast_wpseo_metadesc":"20 free Bootstrap breadcrumb examples \u2014 slash, arrow, chevron, custom separators. Includes BreadcrumbList schema implementation guide. (2026)","footnotes":""},"categories":[27213],"tags":[],"post_series":[],"class_list":{"2":"type-post","3":"status-publish","6":"hentry","7":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>20 Free Bootstrap Breadcrumb Examples (2026)<\/title>\n<meta name=\"description\" content=\"20 free Bootstrap breadcrumb examples \u2014 slash, arrow, chevron, custom separators. Includes BreadcrumbList schema implementation guide. (2026)\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/colorlib.com\/wp\/bootstrap-breadcrumbs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"20 Free Bootstrap Breadcrumb Examples (2026)\" \/>\n<meta property=\"og:description\" content=\"20 free Bootstrap breadcrumb examples \u2014 slash, arrow, chevron, custom separators. Includes BreadcrumbList schema implementation guide. (2026)\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colorlib.com\/wp\/bootstrap-breadcrumbs\/\" \/>\n<meta property=\"og:site_name\" content=\"Colorlib\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/colorlib\" \/>\n<meta property=\"article:author\" content=\"https:\/\/facebook.com\/silkalns\" \/>\n<meta property=\"article:published_time\" content=\"2026-05-13T14:20:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-13T14:20:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumbs-examples-featured.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Aigars Silkalns\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ASilkalns\" \/>\n<meta name=\"twitter:site\" content=\"@colorlib\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aigars Silkalns\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-breadcrumbs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-breadcrumbs\\\/\"},\"author\":{\"name\":\"Aigars Silkalns\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#\\\/schema\\\/person\\\/0f34837e738805c94d594780f27e3c7a\"},\"headline\":\"20 Free Bootstrap Breadcrumb Examples (2026)\",\"datePublished\":\"2026-05-13T14:20:12+00:00\",\"dateModified\":\"2026-05-13T14:20:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-breadcrumbs\\\/\"},\"wordCount\":3276,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-breadcrumbs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/bootstrap-breadcrumbs-examples-featured.jpg\",\"articleSection\":[\"Snippets\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-breadcrumbs\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-breadcrumbs\\\/\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-breadcrumbs\\\/\",\"name\":\"20 Free Bootstrap Breadcrumb Examples (2026)\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-breadcrumbs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-breadcrumbs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/bootstrap-breadcrumbs-examples-featured.jpg\",\"datePublished\":\"2026-05-13T14:20:12+00:00\",\"dateModified\":\"2026-05-13T14:20:13+00:00\",\"description\":\"20 free Bootstrap breadcrumb examples \u2014 slash, arrow, chevron, custom separators. Includes BreadcrumbList schema implementation guide. (2026)\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-breadcrumbs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-breadcrumbs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-breadcrumbs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/bootstrap-breadcrumbs-examples-featured.jpg\",\"contentUrl\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/bootstrap-breadcrumbs-examples-featured.jpg\",\"width\":1200,\"height\":630,\"caption\":\"Grid of four free Bootstrap breadcrumb examples \u2014 embedded SVG chevron divider, contextual color themes, dark mode, and BreadcrumbList JSON-LD schema reference\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-breadcrumbs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Snippets\",\"item\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/category\\\/snippets\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"20 Free Bootstrap Breadcrumb Examples (2026)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#website\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/\",\"name\":\"Colorlib\",\"description\":\"WordPress tutorials, theme reviews, and web design inspiration. Free themes and 1,000+ HTML templates from Colorlib.\",\"publisher\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#organization\",\"name\":\"Colorlib\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/colorlib-logo-top-1.png\",\"contentUrl\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/colorlib-logo-top-1.png\",\"width\":800,\"height\":400,\"caption\":\"Colorlib\"},\"image\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/colorlib\",\"https:\\\/\\\/x.com\\\/colorlib\",\"https:\\\/\\\/www.instagram.com\\\/colorlib\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/colorlib\",\"https:\\\/\\\/youtube.com\\\/c\\\/Colorlib\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#\\\/schema\\\/person\\\/0f34837e738805c94d594780f27e3c7a\",\"name\":\"Aigars Silkalns\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g\",\"caption\":\"Aigars Silkalns\"},\"description\":\"Frontend web developer and web designer specializing in WordPress theme development. After graduating with BA he self-taught frontend web development. Currently has over 10 years of experience in mainly CSS, HTML (TailwindCSS, Bootstrap), JavaScript(React, Vue, Angular), and PHP. Obsessed with application performance, user experience, and simplicity.\",\"sameAs\":[\"https:\\\/\\\/colorlib.com\\\/\",\"https:\\\/\\\/facebook.com\\\/silkalns\",\"https:\\\/\\\/x.com\\\/ASilkalns\"],\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/author\\\/aigars-silkalns\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"20 Free Bootstrap Breadcrumb Examples (2026)","description":"20 free Bootstrap breadcrumb examples \u2014 slash, arrow, chevron, custom separators. Includes BreadcrumbList schema implementation guide. (2026)","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/colorlib.com\/wp\/bootstrap-breadcrumbs\/","og_locale":"en_US","og_type":"article","og_title":"20 Free Bootstrap Breadcrumb Examples (2026)","og_description":"20 free Bootstrap breadcrumb examples \u2014 slash, arrow, chevron, custom separators. Includes BreadcrumbList schema implementation guide. (2026)","og_url":"https:\/\/colorlib.com\/wp\/bootstrap-breadcrumbs\/","og_site_name":"Colorlib","article_publisher":"https:\/\/www.facebook.com\/colorlib","article_author":"https:\/\/facebook.com\/silkalns","article_published_time":"2026-05-13T14:20:12+00:00","article_modified_time":"2026-05-13T14:20:13+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumbs-examples-featured.jpg","type":"image\/jpeg"}],"author":"Aigars Silkalns","twitter_card":"summary_large_image","twitter_creator":"@ASilkalns","twitter_site":"@colorlib","twitter_misc":{"Written by":"Aigars Silkalns","Est. reading time":"20 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/colorlib.com\/wp\/bootstrap-breadcrumbs\/#article","isPartOf":{"@id":"https:\/\/colorlib.com\/wp\/bootstrap-breadcrumbs\/"},"author":{"name":"Aigars Silkalns","@id":"https:\/\/colorlib.com\/wp\/#\/schema\/person\/0f34837e738805c94d594780f27e3c7a"},"headline":"20 Free Bootstrap Breadcrumb Examples (2026)","datePublished":"2026-05-13T14:20:12+00:00","dateModified":"2026-05-13T14:20:13+00:00","mainEntityOfPage":{"@id":"https:\/\/colorlib.com\/wp\/bootstrap-breadcrumbs\/"},"wordCount":3276,"commentCount":0,"publisher":{"@id":"https:\/\/colorlib.com\/wp\/#organization"},"image":{"@id":"https:\/\/colorlib.com\/wp\/bootstrap-breadcrumbs\/#primaryimage"},"thumbnailUrl":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumbs-examples-featured.jpg","articleSection":["Snippets"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/colorlib.com\/wp\/bootstrap-breadcrumbs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/colorlib.com\/wp\/bootstrap-breadcrumbs\/","url":"https:\/\/colorlib.com\/wp\/bootstrap-breadcrumbs\/","name":"20 Free Bootstrap Breadcrumb Examples (2026)","isPartOf":{"@id":"https:\/\/colorlib.com\/wp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/colorlib.com\/wp\/bootstrap-breadcrumbs\/#primaryimage"},"image":{"@id":"https:\/\/colorlib.com\/wp\/bootstrap-breadcrumbs\/#primaryimage"},"thumbnailUrl":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumbs-examples-featured.jpg","datePublished":"2026-05-13T14:20:12+00:00","dateModified":"2026-05-13T14:20:13+00:00","description":"20 free Bootstrap breadcrumb examples \u2014 slash, arrow, chevron, custom separators. Includes BreadcrumbList schema implementation guide. (2026)","breadcrumb":{"@id":"https:\/\/colorlib.com\/wp\/bootstrap-breadcrumbs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colorlib.com\/wp\/bootstrap-breadcrumbs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/colorlib.com\/wp\/bootstrap-breadcrumbs\/#primaryimage","url":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumbs-examples-featured.jpg","contentUrl":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-breadcrumbs-examples-featured.jpg","width":1200,"height":630,"caption":"Grid of four free Bootstrap breadcrumb examples \u2014 embedded SVG chevron divider, contextual color themes, dark mode, and BreadcrumbList JSON-LD schema reference"},{"@type":"BreadcrumbList","@id":"https:\/\/colorlib.com\/wp\/bootstrap-breadcrumbs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colorlib.com\/wp\/"},{"@type":"ListItem","position":2,"name":"Snippets","item":"https:\/\/colorlib.com\/wp\/category\/snippets\/"},{"@type":"ListItem","position":3,"name":"20 Free Bootstrap Breadcrumb Examples (2026)"}]},{"@type":"WebSite","@id":"https:\/\/colorlib.com\/wp\/#website","url":"https:\/\/colorlib.com\/wp\/","name":"Colorlib","description":"WordPress tutorials, theme reviews, and web design inspiration. Free themes and 1,000+ HTML templates from Colorlib.","publisher":{"@id":"https:\/\/colorlib.com\/wp\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/colorlib.com\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/colorlib.com\/wp\/#organization","name":"Colorlib","url":"https:\/\/colorlib.com\/wp\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/colorlib.com\/wp\/#\/schema\/logo\/image\/","url":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/colorlib-logo-top-1.png","contentUrl":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/colorlib-logo-top-1.png","width":800,"height":400,"caption":"Colorlib"},"image":{"@id":"https:\/\/colorlib.com\/wp\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/colorlib","https:\/\/x.com\/colorlib","https:\/\/www.instagram.com\/colorlib\/","https:\/\/www.linkedin.com\/company\/colorlib","https:\/\/youtube.com\/c\/Colorlib"]},{"@type":"Person","@id":"https:\/\/colorlib.com\/wp\/#\/schema\/person\/0f34837e738805c94d594780f27e3c7a","name":"Aigars Silkalns","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g","caption":"Aigars Silkalns"},"description":"Frontend web developer and web designer specializing in WordPress theme development. After graduating with BA he self-taught frontend web development. Currently has over 10 years of experience in mainly CSS, HTML (TailwindCSS, Bootstrap), JavaScript(React, Vue, Angular), and PHP. Obsessed with application performance, user experience, and simplicity.","sameAs":["https:\/\/colorlib.com\/","https:\/\/facebook.com\/silkalns","https:\/\/x.com\/ASilkalns"],"url":"https:\/\/colorlib.com\/wp\/author\/aigars-silkalns\/"}]}},"_links":{"self":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/posts\/376474","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/users\/697"}],"replies":[{"embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/comments?post=376474"}],"version-history":[{"count":1,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/posts\/376474\/revisions"}],"predecessor-version":[{"id":376475,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/posts\/376474\/revisions\/376475"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/media\/376473"}],"wp:attachment":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/media?parent=376474"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/categories?post=376474"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/tags?post=376474"},{"taxonomy":"post_series","embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/post_series?post=376474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}