{"id":2403,"date":"2021-05-31T10:49:19","date_gmt":"2021-05-31T07:49:19","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=2403"},"modified":"2024-03-22T13:57:02","modified_gmt":"2024-03-22T11:57:02","slug":"breadcrumbs","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/general-options\/breadcrumbs\/","title":{"rendered":"Breadcrumbs"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Quick Look<\/h2>\n\n\n\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\/03\/Screen-Recording-2024-03-22-at-13.49.20.mov\"><\/video><figcaption class=\"wp-element-caption\">Breadcrumbs options.<\/figcaption><\/figure>\n\n\n\n<p>Blocksy empowers you to enhance website navigation with its intuitive <strong>Breadcrumbs<\/strong> feature. This user-friendly system offers comprehensive support for various content types, including <strong>Pages<\/strong>, <strong>Posts<\/strong>, <strong>WooCommerce Products<\/strong>, and even <strong>Custom Post Types<\/strong> (CPTs). By visually indicating a user&#8217;s location within your website&#8217;s hierarchy, breadcrumbs improve user experience and make it easier for visitors to navigate through your content.<\/p>\n\n\n\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-28f84493 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 class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"1500\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/03\/Screenshot-2024-03-22-at-13.50.47.png\" alt=\"\" class=\"wp-image-10032\" \/><\/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<p>Blocksy&#8217;s Breadcrumbs system offers a variety of customization options to tailor the visual appearance and information displayed to your specific needs.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Separator Style:<\/strong>&nbsp;Fine-tune the visual representation that separates elements within the breadcrumb trail. Choose from classic options like a &#8220;larger than&#8221; symbol (&gt;) or an arrow (\u2192), or opt for a simpler slash (\/).<\/li>\n\n\n\n<li><strong>Home Item Display:<\/strong>\u00a0Personalize how the &#8220;Home&#8221; element is displayed within the breadcrumb trail. Select between displaying it as text (e.g., &#8220;Home&#8221;) or a house icon for a more visual representation.<\/li>\n\n\n\n<li><strong>Current Page Visibility:<\/strong>&nbsp;Control whether the current page the user is viewing is displayed at the end of the breadcrumb trail. Choose to show it as text (e.g., &#8220;Blog&#8221;) or hide it altogether for a more concise presentation.<\/li>\n\n\n\n<li><strong>Taxonomy Title Inclusion:<\/strong>&nbsp;Manage the display of taxonomy titles within the breadcrumb trail. These can be categories, tags, or custom taxonomies associated with your content. Enable this option to show the current taxonomy title in the breadcrumb trail, providing additional context for users.<\/li>\n\n\n\n<li><strong>Shop &amp; Blog Page Inclusion:<\/strong>\u00a0By default, WordPress omits dedicated archive pages like &#8220;Shop&#8221; and &#8220;Blog&#8221; from the breadcrumb trail. This option allows you to override this behavior and force these pages to appear within the breadcrumb trail, potentially enhancing user navigation for specific sections of your website.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Show or Hide the Breadcrumbs<\/h2>\n\n\n\n<p>To show or hide the <strong>Breadcrumbs<\/strong>, you will need to navigate to the <strong><em>Section you want<\/em><\/strong> -&gt; <strong>Title<\/strong> -&gt; <strong>Breadcrumbs<\/strong>. Click the little eye icon to toggle Breadcrumbs visibility.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d2c34991574&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d2c34991574\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img decoding=\"async\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/05\/page-title-breadcrumbs-scaled.jpg\" alt=\"\" class=\"wp-image-5371\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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\">Where to enable the breadcrumbs system for a single post<\/figcaption><\/figure>\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 has-link-color wp-elements-f587e56eb07ca60c84caa47b0662b402 is-layout-constrained wp-block-group-is-layout-constrained\" style=\"border-radius:4px\">\n<p class=\"is-style-success coblocks-alert-paragraph\"><strong>[ blocksy_breadcrumbs ]<\/strong><br>While the default placement of the Breadcrumbs system caters to most needs, Blocksy empowers you with even greater control. We&#8217;ve implemented the [ blocksy_breadcrumbs ] shortcode, granting you the flexibility to integrate the breadcrumbs system anywhere within your website&#8217;s content. Simply insert this shortcode directly into your desired page or post, and the breadcrumbs will seamlessly appear in that location. This functionality empowers you to tailor the breadcrumb placement to your specific design preferences and content hierarchy.<\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Breadcrumbs as a Gutenberg block<\/h2>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d2c34991dca&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d2c34991dca\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img decoding=\"async\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/05\/Screenshot-2023-05-08-at-17.22.25.png\" alt=\"\" class=\"wp-image-6981\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<p>Understanding that shortcodes might pose a challenge for some users, Blocksy offers an alternative solution. The Breadcrumbs navigation system is also available as a convenient Gutenberg block. To utilise this block, simply search for &#8220;<a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/theme-blocks\/breadcrumbs-2\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/creativethemes.com\/blocksy\/docs\/theme-blocks\/breadcrumbs-2\/\" rel=\"noreferrer noopener\">Breadcrumbs<\/a>&#8221; within the Gutenberg block editor. Once found, drag and drop the block wherever you&#8217;d like it to appear on your page or post. This user-friendly approach empowers both novice and experienced users to effortlessly integrate the Breadcrumb system into their content, ensuring an optimal user experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Integration with Third Party Providers<\/h2>\n\n\n\n<p>Blocksy&#8217;s breadcrumbs system is designed to work harmoniously alongside your existing website setup. While it offers a robust and customisable solution, Blocksy understands that you might have preferences for other breadcrumb plugins. To ensure compatibility, Blocksy seamlessly integrates with popular third-party providers such as Rank Math, Yoast SEO, SEOPress, and Breadcrumb NavXT. This flexibility allows you to choose the breadcrumb solution that best suits your workflow and preferences.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d2c349921bc&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d2c349921bc\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img decoding=\"async\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/05\/breadcrumbs-provider-selector-scaled.jpg\" alt=\"\" class=\"wp-image-5372\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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\">Selecting the breadcrumbs provider<\/figcaption><\/figure>\n\n\n\n<p class=\"is-style-success coblocks-alert-paragraph\">If Blocksy detects one of these plugins, it will offer it as a <em>provider<\/em> under the General -&gt; Breadcrumbs pane.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Picking the Primary Taxonomy: Integration with SEO plugins<\/strong><\/h3>\n\n\n\n<p>Sometimes one of the posts may have two or more categories. And you may need to display one specific category out of all in the Breadcrumbs for SEO purposes.<\/p>\n\n\n\n<p>To do that, open the post inside the&nbsp;<strong>Gutenberg editor<\/strong>&nbsp;and navigate to the&nbsp;<strong>Post tab<\/strong>. Under the <strong>Categories<\/strong> section, depending on the SEO plugin of your choice, you should find an option to select the primary category to be used on the front end.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d2c34992802&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d2c34992802\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img decoding=\"async\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/05\/select-primary-taxonomy-scaled.jpg\" alt=\"\" class=\"wp-image-5375\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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\">Selecting the primary taxonomy using an SEO plugin in the category tree<\/figcaption><\/figure>\n\n\n\n<p>Like in the example from above, some SEO plugins such as Yoast and RankMath, might let you select the primary taxonomy term for a specific post &#8212; in case you&#8217;ve selected multiple taxonomy terms. This comes in really handy when you want to program your breadcrumbs in a certain way and organise things to your needs.<\/p>\n\n\n\n<p>In some cases, this option might not appear out of the box and you might need to reconfigure the SEO plugin that you&#8217;ve chosen. Their documentation articles should definitely help you out, as it is a matter of how each plugin provider has coded their options.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quick Look Blocksy empowers you to enhance website navigation with its intuitive Breadcrumbs feature. This user-friendly system offers comprehensive support for various content types, including Pages, Posts, WooCommerce Products, and even Custom Post Types (CPTs). By visually indicating a user&#8217;s location within your website&#8217;s hierarchy, breadcrumbs improve user experience and make it easier for visitors [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[113],"class_list":["post-2403","documentation","type-documentation","status-publish","hentry","doc_categories-general-options"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/2403","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=2403"}],"version-history":[{"count":11,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/2403\/revisions"}],"predecessor-version":[{"id":10042,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/2403\/revisions\/10042"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=2403"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=2403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}