{"id":9443,"date":"2024-02-06T16:12:47","date_gmt":"2024-02-06T14:12:47","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=9443"},"modified":"2026-10-08T14:02:53","modified_gmt":"2026-10-08T11:02:53","slug":"breadcrumbs-block","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/theme-blocks\/breadcrumbs-block\/","title":{"rendered":"Breadcrumbs Block"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure class=\"wp-block-video\"><video height=\"2056\" style=\"aspect-ratio: 3456 \/ 2056;\" width=\"3456\" autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/02\/Screen-Recording-2024-02-07-at-19.13.41.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">The Breadcrumbs block in action.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Breadcrumbs<\/strong> block lets you place Blocksy&#8217;s breadcrumb navigation directly inside layouts created with the WordPress block editor. It displays the visitor&#8217;s current position within the website hierarchy and provides links back through the relevant parent sections.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It is particularly useful inside <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/modules\/content-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Content Block<\/strong><\/a> templates, where breadcrumbs can be positioned independently from Blocksy&#8217;s standard Page Title area.<\/p>\n\n\n\n<div class=\"wp-block-group has-palette-color-8-color has-palette-color-1-background-color has-text-color has-background is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"is-style-info coblocks-alert-paragraph wp-block-paragraph\"><strong>Blocksy Companion required<\/strong><br>The Breadcrumbs block becomes available after installing and activating <strong>Blocksy Companion<\/strong>. Its breadcrumb structure and provider are controlled by Blocksy&#8217;s global Breadcrumbs settings.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Getting Started<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Open the WordPress block inserter and search for <strong>Breadcrumbs<\/strong>, then add the block wherever you want the breadcrumb trail to appear.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The breadcrumb hierarchy itself follows the configuration available under <strong>Customiser \u2192 General Options \u2192 Breadcrumbs<\/strong>. From there, you can control options such as the separator, Home item, current-page visibility and other global breadcrumb behaviour.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For a complete overview of these settings, see the <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/general-options\/breadcrumbs\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Breadcrumbs documentation<\/strong><\/a>.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Granular Controls<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6acbe78bac547&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6acbe78bac547\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"920\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-07-at-19.19.04.png\" alt=\"Breadcrumbs block settings in the WordPress editor\" class=\"wp-image-9508\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Configuring the Breadcrumbs block.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h3 class=\"wp-block-heading\">Margins<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Adjust the spacing around the Breadcrumbs block using its margin controls. Individual values can be configured for the <strong>top<\/strong>, <strong>right<\/strong>, <strong>bottom<\/strong> and <strong>left<\/strong> sides to position the breadcrumb trail correctly within the surrounding layout.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Colors<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Customise the Colors used by the breadcrumb trail independently from the surrounding content.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Text Color<\/strong> \u2013 controls the appearance of non-linked breadcrumb text.<\/li>\n\n\n\n<li><strong>Link Color<\/strong> \u2013 controls the default Color of clickable breadcrumb entries.<\/li>\n\n\n\n<li><strong>Link Hover Color<\/strong> \u2013 controls how breadcrumb links appear when a visitor hovers over them.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">These controls affect the presentation of the Breadcrumbs block without changing the global breadcrumb hierarchy configured in the Customiser.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Third-Party Breadcrumb Providers<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Breadcrumbs block can also display breadcrumb output from a supported third-party provider when that provider has been selected under <strong>Customiser \u2192 General Options \u2192 Breadcrumbs<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Current integrations include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Rank Math<\/strong><\/li>\n\n\n\n<li><strong>Yoast SEO<\/strong><\/li>\n\n\n\n<li><strong>SEOPress<\/strong><\/li>\n\n\n\n<li><strong>Breadcrumb NavXT<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">When a supported provider is selected, Blocksy uses that provider&#8217;s generated breadcrumb trail while retaining the Breadcrumbs block as the placement method inside the editor layout.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Breadcrumbs block lets you place Blocksy&#8217;s breadcrumb navigation directly inside layouts created with the WordPress block editor. It displays the visitor&#8217;s current position within the website hierarchy and provides links back through the relevant parent sections. It is particularly useful inside Content Block templates, where breadcrumbs can be positioned independently from Blocksy&#8217;s standard Page [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[133],"class_list":["post-9443","documentation","type-documentation","status-publish","hentry","doc_categories-theme-blocks"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":8}},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/9443","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/documentation"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=9443"}],"version-history":[{"count":9,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/9443\/revisions"}],"predecessor-version":[{"id":15326,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/9443\/revisions\/15326"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=9443"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=9443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}