{"id":5000,"date":"2019-01-30T09:43:08","date_gmt":"2019-01-30T09:43:08","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=5000"},"modified":"2023-04-14T14:52:56","modified_gmt":"2023-04-14T14:52:56","slug":"how-to-add-breadcrumbs-to-the-header","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-add-breadcrumbs-to-the-header\/","title":{"rendered":"How to Add Breadcrumbs to the Header"},"content":{"rendered":"\n
\n

The Breadcrumbs<\/a> widget allows displaying the path leading to the website\u2019s page in an attractive way<\/p>\n\n\n\n

This tutorial will become in handy if you want to add breadcrumbs to display the path to the posts or certain pages on your site.<\/p>\n\n\n\n\"breadcrumbs\n<\/div><\/div>\n\n\n\n

Adding Breadcrumbs<\/h2>\n\n\n\n
\n

Log in to the WordPress Dashboard <\/strong>and here navigate to edit the header template.<\/p>\n\n\n\n\"Header\n\n\n\n

E.g., in case you\u2019re using Crocoblock and JetThemeCore<\/em>, you should go to Crocoblock > My Templates<\/strong> <\/em>block in the Dashboard<\/strong> and here open one of the existing header templates for editing with Elementor.<\/p>\n\n\n\n

Find the Breadcrumbs<\/strong> widget. Drag and drop it to one of the sections in the header.<\/p>\n\n\n\n\"breadcrumbs\n<\/div><\/div>\n\n\n\n

Settings of the Breacrumbs Widget<\/h2>\n\n\n\n
\n

In the Content<\/strong> block, you can specify if the breadcrumbs should be displayed on the front page, if you want the page title to be shown, and if you want to display the prefix before the actual path. Toggle these options to Yes<\/strong> to apply them.<\/p>\n\n\n\n

Also, you can choose the icon to use as a separator between the steps in the path, and specify the path type (full or minified).<\/p>\n\n\n\n\"breadcrumbs\n\n\n\n

Make sure you\u2019ve customized the appearance of the widget in the Style <\/strong> block, that provides access to dozens of settings and provides you with an ability to create the different looks for the breadcrumbs path on hover and when it\u2019s active.<\/p>\n\n\n\n

After that, click the Update<\/strong> button to save the progress.<\/p>\n<\/div><\/div>\n\n\n\n

That\u2019s all you need to do in order to add breadcrumbs to show the path to the post.<\/p>\n","protected":false},"excerpt":{"rendered":"

This tutorial shows you how to add breadcrumbs to the page using the JetBlocks Breadcumbs widget.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[466],"yoast_head":"\nHow to Add Breadcrumbs to the Header - Help Center<\/title>\n<meta name=\"description\" content=\"This tutorial show you how to add breadcrumbs to the page using powerful JetBlocks Breadcumbs widget, one of the multiple widgets for Elementor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-add-breadcrumbs-to-the-header\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Breadcrumbs to the Header - Help Center\" \/>\n<meta property=\"og:description\" content=\"This tutorial show you how to add breadcrumbs to the page using powerful JetBlocks Breadcumbs widget, one of the multiple widgets for Elementor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-add-breadcrumbs-to-the-header\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-14T14:52:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/02\/breadcrumbs-sample.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-add-breadcrumbs-to-the-header\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-add-breadcrumbs-to-the-header\/\",\"name\":\"How to Add Breadcrumbs to the Header - Help Center\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-01-30T09:43:08+00:00\",\"dateModified\":\"2023-04-14T14:52:56+00:00\",\"description\":\"This tutorial show you how to add breadcrumbs to the page using powerful JetBlocks Breadcumbs widget, one of the multiple widgets for Elementor.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-add-breadcrumbs-to-the-header\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-add-breadcrumbs-to-the-header\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-add-breadcrumbs-to-the-header\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add Breadcrumbs to the Header\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Breadcrumbs to the Header - Help Center","description":"This tutorial show you how to add breadcrumbs to the page using powerful JetBlocks Breadcumbs widget, one of the multiple widgets for Elementor.","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:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-add-breadcrumbs-to-the-header\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Breadcrumbs to the Header - Help Center","og_description":"This tutorial show you how to add breadcrumbs to the page using powerful JetBlocks Breadcumbs widget, one of the multiple widgets for Elementor.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-add-breadcrumbs-to-the-header\/","og_site_name":"Help Center","article_modified_time":"2023-04-14T14:52:56+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/02\/breadcrumbs-sample.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-add-breadcrumbs-to-the-header\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-add-breadcrumbs-to-the-header\/","name":"How to Add Breadcrumbs to the Header - Help Center","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-01-30T09:43:08+00:00","dateModified":"2023-04-14T14:52:56+00:00","description":"This tutorial show you how to add breadcrumbs to the page using powerful JetBlocks Breadcumbs widget, one of the multiple widgets for Elementor.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-add-breadcrumbs-to-the-header\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-add-breadcrumbs-to-the-header\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-add-breadcrumbs-to-the-header\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Add Breadcrumbs to the Header"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/5000"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=5000"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=5000"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=5000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}