{"id":54883,"date":"2021-02-07T08:53:59","date_gmt":"2021-02-07T08:53:59","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=54883"},"modified":"2021-02-07T08:53:59","modified_gmt":"2021-02-07T08:53:59","slug":"breadcrumbs-web-design","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/","title":{"rendered":"How to Use Breadcrumbs in Web Design to Improve Navigation"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"54883\" class=\"elementor elementor-54883\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0c500bf elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0c500bf\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d2d727a\" data-id=\"d2d727a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-cedb562 elementor-widget elementor-widget-text-editor\" data-id=\"cedb562\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When it comes to online success, content really is king. However, if that content is difficult to find and navigate, no one is going to stick around long enough to discover just how much it has to offer.<\/p><p>Thankfully, there are ways to make your site easier to navigate. By implementing breadcrumb trails, you can enable visitors to navigate to your site\u2019s top-level pages with a single click. Breadcrumbs can also help visitors find exactly the content they\u2019re looking for, even if your site spans hundreds of different pages.\u00a0<\/p><p>In this article, we\u2019ll explore why breadcrumbs are an essential part of <a href=\"https:\/\/elementor.com\/blog\/start-web-design-business\/\">web design<\/a>, and the three types of breadcrumb trails you can add to your WordPress website. We\u2019ll then share four best practices for creating breadcrumbs that look great, and that help visitors navigate your website with ease. Let\u2019s get started!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7eed9ae elementor-align-center elementor-widget elementor-widget-button\" data-id=\"7eed9ae\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elementor.com\/blog\/wordpress-nav-menu-design\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Improve Your Site's Navigation Further With Navigation Menus<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-08d1bf5 blog-toc elementor-widget elementor-widget-heading\" data-id=\"08d1bf5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Table of Contents<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2ec6144 blog-toc elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"2ec6144\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#what\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">What Are Breadcrumbs in Web Design?<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#why\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Why You Should Consider Using Breadcrumb Navigation<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#types\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">3 Types of Breadcrumb Navigation<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#type-one\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">1. Location-Based Breadcrumbs<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#type-two\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">2. Path-Based Breadcrumbs<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#type-three\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">3. Attribute-Based Breadcrumbs<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#best-practices\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">4 Best Design Practices for Breadcrumbs<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#practice-one\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">1. Don\u2019t Replace Your Primary Navigation Menus<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#practice-two\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">2. Keep Your Titles Consistent<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#practice-three\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">3. Follow Breadcrumbs in Web Design Best Practices<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#practice-four\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">4. Use Consistent Breadcrumb Placing<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dace2de elementor-widget elementor-widget-menu-anchor\" data-id=\"dace2de\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"what\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-de42737 elementor-widget elementor-widget-heading\" data-id=\"de42737\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What Are Breadcrumbs in Web Design?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e24f2ff elementor-widget elementor-widget-text-editor\" data-id=\"e24f2ff\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Breadcrumbs are a type of secondary navigation element that reveals the user\u2019s location on a website. They usually take the form of horizontally-arranged links, separated by the greater than (&gt;) symbol. This symbol indicates the level of each page, relative to all the other links that appear within the breadcrumb trail:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-64975c9 elementor-widget elementor-widget-image\" data-id=\"64975c9\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/amazon-breadcrumbs-ecommerce-r4q781sl1w1520ux7dsap872sgghgka1bwcatmsl3m.png\" title=\"amazon-breadcrumbs-ecommerce\" alt=\"amazon-breadcrumbs-ecommerce\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd1c657 elementor-widget elementor-widget-text-editor\" data-id=\"bd1c657\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Breadcrumbs in <a href=\"https:\/\/elementor.com\/blog\/principles-of-website-design\/\" target=\"_blank\" rel=\"noopener\">web design<\/a> provide a visual representation of how a website is structured. The term \u2018breadcrumbs\u2019 originates from the Hansel and Gretel fairytale, where the protagonists leave a trail of breadcrumbs to help them find their way home. Just like in the fairytale, your website\u2019s breadcrumb trail can help visitors retrace their steps!<\/p><p>There are several ways that you can add breadcrumbs to your website. For example, if you\u2019re using the <a href=\"https:\/\/elementor.com\/blog\/yoast-seo-integration\/\" rel=\"noopener\">Yoast SEO<\/a> plugin, you can add breadcrumbs to any page using the Elementor breadcrumbs widget. You can enable Yoast\u2019s breadcrumbs settings by navigating to <strong>SEO <\/strong><em>&gt; <\/em><strong>Search Appearance<\/strong><em> &gt; <\/em><strong>Breadcrumbs<\/strong>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-73e4d33 elementor-widget elementor-widget-image\" data-id=\"73e4d33\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/yoast-seo-breadcrumbs-r4q71wwiftmr9nrs18ayx9xr6wp87ox45j171lw3pu.png\" title=\"yoast-seo-breadcrumbs\" alt=\"yoast-seo-breadcrumbs\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-76c9e16 elementor-widget elementor-widget-text-editor\" data-id=\"76c9e16\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>After enabling this feature, a new breadcrumbs widget will appear in the Elementor editor. You can drag and drop this widget onto any area of your canvas:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5ffdedc elementor-widget elementor-widget-image\" data-id=\"5ffdedc\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/yoast-elementor-integration-r4q74g2uur3kju3c8tps54xgta7tybz2u2balg4wya.png\" title=\"yoast-elementor-integration\" alt=\"yoast-elementor-integration\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fe15c32 elementor-widget elementor-widget-text-editor\" data-id=\"fe15c32\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Elementor will render your breadcrumbs automatically. You can then customize them to complement your website\u2019s design, including changing the text and link colors as well as the <a href=\"https:\/\/elementor.com\/blog\/guide-to-web-typography\/\" target=\"_blank\" rel=\"noopener\">typography<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-80cfdb9 elementor-widget elementor-widget-menu-anchor\" data-id=\"80cfdb9\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"why\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5032d93 elementor-widget elementor-widget-heading\" data-id=\"5032d93\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Why You Should Consider Using Breadcrumb Navigation\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-210ab9b elementor-widget elementor-widget-text-editor\" data-id=\"210ab9b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Unlike <a href=\"https:\/\/elementor.com\/blog\/custom-navigation-menu\/\" target=\"_blank\" rel=\"noopener\">primary navigation menus<\/a>, breadcrumbs help keep visitors orientated by displaying their current location within the site\u2019s hierarchy. Breadcrumbs can be a useful addition to most websites. However, they\u2019re particularly well-suited to sites with a complex hierarchy or a large number of pages.<\/p><p>The classic example is <a href=\"https:\/\/elementor.com\/blog\/woocommerce-tutorial\/\" target=\"_blank\" rel=\"noopener\">e-commerce sites<\/a>, where breadcrumbs can help visitors navigate between product categories with ease:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0b14a1d elementor-widget elementor-widget-image\" data-id=\"0b14a1d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/ebay-breadcrumbs-ecommerce-r4q6xqic2bwvo1u8ffanubw059ai04c28uni9c32yy.png\" title=\"ebay-breadcrumbs-ecommerce\" alt=\"ebay-breadcrumbs-ecommerce\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3050f63 elementor-widget elementor-widget-text-editor\" data-id=\"3050f63\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Since they display the visitor\u2019s location, you can also use breadcrumbs as a progress bar. Some common examples include online quizzes and multi-page forms such as job applications:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-83d4d0d elementor-widget elementor-widget-image\" data-id=\"83d4d0d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=450\/blog\/wp-content\/uploads\/2021\/02\/breadcrumbs-progress-bar-1024x576.png\" class=\"attachment-large size-large wp-image-54893\" alt=\"breadcrumbs-progress-bar\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/02\/breadcrumbs-progress-bar-1024x576.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/02\/breadcrumbs-progress-bar-300x169.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/02\/breadcrumbs-progress-bar-768x432.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/02\/breadcrumbs-progress-bar-1536x864.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1920\/blog\/wp-content\/uploads\/2021\/02\/breadcrumbs-progress-bar.png 1920w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-69fd5a8 elementor-widget elementor-widget-text-editor\" data-id=\"69fd5a8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When used in this way, breadcrumbs provide a visual representation of the steps the visitor has already completed successfully, and the steps remaining. This can motivate visitors to complete the task at hand.<\/p><p><span style=\"font-weight: 400\">As a website owner, you want visitors to spend as much time on your site as possible. Breadcrumbs can encourage browsing by displaying all the relevant navigational options. For example, a customer may navigate to a product page and then decide against purchasing that particular product. Breadcrumbs can encourage the visitor to explore categories related to the product and hopefully make a purchase. <\/span><\/p><p>Breadcrumbs are also a compact navigation mechanism. When it comes to using breadcrumbs in web design, it may help to sketch out your navigation architecture. If your site has a logical hierarchy or grouping, it may be a good candidate for breadcrumbs. However, breadcrumbs generally don\u2019t add much value to single-level sites such as <a href=\"https:\/\/elementor.com\/blog\/create-blog-wordpress\/\" target=\"_blank\" rel=\"noopener\">personal blogs<\/a>.<\/p><p>Last but not least, breadcrumbs also help search engine crawlers understand how your site is structured. This is good news for your <a href=\"https:\/\/elementor.com\/blog\/elementor-seo\/\" target=\"_blank\" rel=\"noopener\">Search Engine Optimization (SEO). <\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5ddd1b7 elementor-widget elementor-widget-menu-anchor\" data-id=\"5ddd1b7\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"types\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fbd0c93 elementor-widget elementor-widget-heading\" data-id=\"fbd0c93\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">3 Types of Breadcrumb Navigation\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-84281da elementor-widget elementor-widget-text-editor\" data-id=\"84281da\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Breadcrumb trails can generally be divided into three categories: location or hierarchical, path, and attribute. Each type has its own strengths and weaknesses, so let\u2019s explore them in detail.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-172ae41 elementor-widget elementor-widget-menu-anchor\" data-id=\"172ae41\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"type-one\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-102f887 elementor-widget elementor-widget-heading\" data-id=\"102f887\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Location-Based Breadcrumbs\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-38177b1 elementor-widget elementor-widget-text-editor\" data-id=\"38177b1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Location-based or hierarchical breadcrumbs represent a site\u2019s structure. If your site has two or more hierarchical levels, it can help to include location-based breadcrumbs in your web design.\u00a0<\/p><p>You can also use location-based breadcrumbs if visitors regularly enter your site at a deeper level. For example, a consumer might search for a specific product on Google, and then enter your site at that product page. For this new customer, location-based breadcrumbs can provide useful insight into how your site is structured.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6a81acd elementor-widget elementor-widget-menu-anchor\" data-id=\"6a81acd\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"type-two\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4d92cc3 elementor-widget elementor-widget-heading\" data-id=\"4d92cc3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Path-Based Breadcrumbs\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-547384b elementor-widget elementor-widget-text-editor\" data-id=\"547384b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Path-based breadcrumbs are dynamically generated. This means they display the path the visitor has traveled in order to reach the current web page.<\/p><p>When it comes to breadcrumbs in web design, we recommend approaching this variety with caution. Visitors tend to jump from one page to another, which can result in a chaotic and unhelpful breadcrumb trail. Most web browsers also provide a <strong>Back<\/strong> button, so your path-based breadcrumbs may contribute little to the visitor experience.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dce8a2c elementor-widget elementor-widget-menu-anchor\" data-id=\"dce8a2c\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"type-three\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1cc645a elementor-widget elementor-widget-heading\" data-id=\"1cc645a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Attribute-Based Breadcrumbs\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6f9ed85 elementor-widget elementor-widget-text-editor\" data-id=\"6f9ed85\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Attribute-based breadcrumbs display all the attributes the consumer has selected. <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/features\/ecommerce\/\"   title=\"E-commerce\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"5524\">E-commerce<\/a> sites often use attribute-based breadcrumbs to help visitors understand how they arrived at the current product:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-421ef0b elementor-widget elementor-widget-image\" data-id=\"421ef0b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/attribute-based-breadcrumbs-r4q76nz4zo4xyovaaa92j2rnb1a14ls9h1rkdyug9e.png\" title=\"attribute-based-breadcrumbs\" alt=\"attribute-based-breadcrumbs\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd12b80 elementor-widget elementor-widget-text-editor\" data-id=\"dd12b80\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Attribute-based breadcrumbs can also help the visitor explore alternative content that aligns with their chosen attributes. For example, the customer might explore products that match the attribute \u201cboots\u201d, or \u201csize 5\u201d (or both). This can help drive conversions and maximize your revenue.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-80ef592 elementor-widget elementor-widget-menu-anchor\" data-id=\"80ef592\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"best-practices\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7cf96ab elementor-widget elementor-widget-heading\" data-id=\"7cf96ab\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">4 Best Design Practices for Breadcrumbs<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dc48e9d elementor-widget elementor-widget-text-editor\" data-id=\"dc48e9d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>No matter what type of breadcrumb trails you decide to use, there are some best practices that you can implement to ensure that they\u2019re effective. Here are four best practices to keep in mind when creating your breadcrumbs.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-39faf72 elementor-widget elementor-widget-menu-anchor\" data-id=\"39faf72\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"practice-one\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b5a6f31 elementor-widget elementor-widget-heading\" data-id=\"b5a6f31\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Don\u2019t Replace Your Primary Navigation Menus\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8bc82cf elementor-widget elementor-widget-text-editor\" data-id=\"8bc82cf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Breadcrumbs are a type of secondary navigation scheme. While every website is different, it\u2019s generally a bad idea to replace all of your primary navigation menus with breadcrumbs.<\/p><p>It\u2019s important to remember that not all visitor journeys are ordered \u2013 or logical! If you replace all your primary navigation menus with breadcrumbs, your visitors might struggle to move between unrelated content.\u00a0<\/p><p>Visitors may also arrive at a page without navigating the expected hierarchy, for example via Google search results. For visitors with no context, breadcrumbs may offer little value and can even be confusing.<\/p><p>When it comes to breadcrumbs in web design, you should view them as an extra feature that aids navigation. By providing both primary and secondary navigation schemes, you can give visitors the freedom to explore your site hierarchically or in a non-hierarchical manner.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a57a841 elementor-widget elementor-widget-menu-anchor\" data-id=\"a57a841\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"practice-two\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5b7da0c elementor-widget elementor-widget-heading\" data-id=\"5b7da0c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Keep Your Titles Consistent\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd2abfb elementor-widget elementor-widget-text-editor\" data-id=\"bd2abfb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To avoid confusion, it\u2019s a good idea to remain consistent with your page and breadcrumb titles. This is particularly important when you\u2019re targeting specific keywords for SEO purposes.<\/p><p>The only exception is when a breadcrumb trail features repeating keywords or phrases. Search engines may interpret this repetition as over-optimization, and issue you with an SEO penalty. You may also choose to include the title of the current page in your breadcrumb trail. However, to avoid confusion it\u2019s important to use plain text for the current page\u2019s title, rather than a clickable link.\u00a0<\/p><p>If you\u2019re using Yoast SEO, you can customize the text that appears as part of your breadcrumbs. This includes adding anchor text, as well as a prefix for the breadcrumb path:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-64bf6a8 elementor-widget elementor-widget-image\" data-id=\"64bf6a8\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/yoast-seo-settings-r4q78uxkxr511xolh8dqciud7egv36hprwkcp7ldqq.png\" title=\"yoast-seo-settings\" alt=\"yoast-seo-settings\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-83f100f elementor-widget elementor-widget-text-editor\" data-id=\"83f100f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You can also change the taxonomy that\u2019s used to create your breadcrumb trails. Any customizations you make will be reflected in Elementor\u2019s breadcrumbs widget.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-88c7233 elementor-widget elementor-widget-menu-anchor\" data-id=\"88c7233\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"practice-three\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3f10874 elementor-widget elementor-widget-heading\" data-id=\"3f10874\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Follow Breadcrumbs in Web Design Best Practices \n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6f390a8 elementor-widget elementor-widget-text-editor\" data-id=\"6f390a8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When it comes to styling your breadcrumbs, it\u2019s important to follow design best practices. This will help visitors interact with your breadcrumbs successfully.<\/p><p>Typically, website owners will use the greater than symbol (&gt;) to separate hyperlinks in a breadcrumb trail. However, this symbol suggests a parent-child relationship, and path-based breadcrumbs, in particular, don\u2019t necessarily work that way. When it comes to breadcrumbs in web design, there\u2019s also a chance that the &gt; symbol may clash with your site\u2019s visuals.<\/p><p>Yoast SEO users can change the separator character by navigating to <strong>SEO<\/strong><em> &gt; <\/em><strong>Search Appearance<\/strong><em> &gt; <\/em><strong>Breadcrumbs<\/strong> menu. There you can enter any character you want, although common choices include arrows pointing to the right (<em>\u2192<\/em>), right angle quotation marks (<em>\u00bb<\/em>), and slashes (<em>\/<\/em>).\u00a0<\/p><p>Sizing and padding are other important design considerations. From a usability perspective, it\u2019s crucial that there\u2019s enough space between the links in your breadcrumb trails. However, as a secondary navigation mechanism, it\u2019s also important that your breadcrumb trails don\u2019t distract from the primary navigation menu:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5510f66 elementor-widget elementor-widget-image\" data-id=\"5510f66\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/elementor-breadcrumbs-style-r4q6wowsgyherncuiz1l2ldkduftg86srok329muaa.png\" title=\"elementor-breadcrumbs-style\" alt=\"elementor-breadcrumbs-style\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b3b62cb elementor-widget elementor-widget-text-editor\" data-id=\"b3b62cb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You can use Elementor to strike this delicate balancing act. To change the size and styling of any onscreen element, simply select it in the canvas and then spend some time exploring Elementor\u2019s <strong>Style <\/strong>tab.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9df2d28 elementor-widget elementor-widget-menu-anchor\" data-id=\"9df2d28\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"practice-four\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-95558ea elementor-widget elementor-widget-heading\" data-id=\"95558ea\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. Use Consistent Breadcrumb Placing\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0ec3302 elementor-widget elementor-widget-text-editor\" data-id=\"0ec3302\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Typically, breadcrumb trails are displayed in the top half of the page. If you\u2019re using a horizontal navigation menu, breadcrumbs are usually positioned directly beneath it.<\/p>\n<p>If you follow these design conventions, visitors should have no problems locating your breadcrumbs. When your breadcrumb trail is displayed prominently at the top of the page, it also helps the visitor get orientated straight away. If you\u2019re using Elementor\u2019s breadcrumbs widget, you can position this widget anywhere onscreen using the&nbsp;<a href=\"https:\/\/elementor.com\/features\/editor\/\" target=\"_blank\">drag-and-drop builder<\/a>.&nbsp;<\/p>\n<p>When positioning your breadcrumbs, consistency is key. Displaying breadcrumbs in different locations across your site is only going to confuse and frustrate visitors, having a negative impact on their experience.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d9f448b elementor-widget elementor-widget-heading\" data-id=\"d9f448b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Improve User Experience With Breadcrumbs\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c337636 elementor-widget elementor-widget-text-editor\" data-id=\"c337636\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Publishing lots of great content is essential for running a successful website. However, as your website grows it can become difficult to navigate. This is particularly true for e-commerce sites, which often have complex hierarchies consisting of multiple product categories.<\/p><p>Breadcrumbs can help visitors navigate your site more successfully. They can also encourage customers to browse, and can deliver a Search Engine Optimization (SEO) boost. If you\u2019re using <a href=\"https:\/\/elementor.com\/blog\/yoast-seo-integration\/\" target=\"_blank\" rel=\"noopener\">Elementor and Yoast SEO<\/a>, you can add breadcrumbs to any page or post, and style them to perfectly match your site\u2019s design.\u00a0<\/p><p>Do you have any questions about how to enhance your site\u2019s navigation with breadcrumbs? Leave us a comment below!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>In this article, we\u2019ll explore how the implementation of breadcrumbs on your website can improve navigation, user experience, and SEO rankings. We\u2019ll also provide good examples of their use and key points to consider when using breadcrumbs.<\/p>\n","protected":false},"author":188873,"featured_media":54888,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[32],"tags":[79],"marketing_persona":[47,51],"marketing_intent":[48],"class_list":["post-54883","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-build"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Breadcrumb Navigation: 4 Best Design Practices &amp; Examples | Elementor<\/title>\n<meta name=\"description\" content=\"In this article, we\u2019ll explore how the implementation of breadcrumbs on your website can improve navigation, user experience, and SEO rankings.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Breadcrumb Navigation: 4 Best Design Practices &amp; Examples | Elementor\" \/>\n<meta property=\"og:description\" content=\"In this article, we\u2019ll explore how the implementation of breadcrumbs on your website can improve navigation, user experience, and SEO rankings.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-07T08:53:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2021\/02\/Breadcrumbs-03.png\" \/>\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\/png\" \/>\n<meta name=\"author\" content=\"Sergei Davidov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sergei Davidov\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/\"},\"author\":{\"name\":\"Sergei Davidov\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/87a6d63997f5dd9f2105a3a769c759c9\"},\"headline\":\"How to Use Breadcrumbs in Web Design to Improve Navigation\",\"datePublished\":\"2021-02-07T08:53:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/\"},\"wordCount\":1778,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/02\/Breadcrumbs-01.png\",\"keywords\":[\"Build\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/\",\"url\":\"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/\",\"name\":\"Breadcrumb Navigation: 4 Best Design Practices & Examples | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/02\/Breadcrumbs-01.png\",\"datePublished\":\"2021-02-07T08:53:59+00:00\",\"description\":\"In this article, we\u2019ll explore how the implementation of breadcrumbs on your website can improve navigation, user experience, and SEO rankings.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/02\/Breadcrumbs-01.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/02\/Breadcrumbs-01.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/elementor.com\/blog\/category\/design\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Use Breadcrumbs in Web Design to Improve Navigation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/87a6d63997f5dd9f2105a3a769c759c9\",\"name\":\"Sergei Davidov\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0a5edd915cad15385a7184ea9ce23710fe08edb3d605ede2f99cc4e7e65f04ad?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0a5edd915cad15385a7184ea9ce23710fe08edb3d605ede2f99cc4e7e65f04ad?s=96&d=mm&r=g\",\"caption\":\"Sergei Davidov\"},\"description\":\"Sergei Davidov is a content creator at Elementor. His favorite topics are gadgets, advances in science, new apps and software solutions. He enjoys spicy food, reading books and listening to elevator music.\",\"url\":\"https:\/\/elementor.com\/blog\/author\/sdavidov\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Breadcrumb Navigation: 4 Best Design Practices & Examples | Elementor","description":"In this article, we\u2019ll explore how the implementation of breadcrumbs on your website can improve navigation, user experience, and SEO rankings.","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:\/\/elementor.com\/blog\/breadcrumbs-web-design\/","og_locale":"en_US","og_type":"article","og_title":"Breadcrumb Navigation: 4 Best Design Practices & Examples | Elementor","og_description":"In this article, we\u2019ll explore how the implementation of breadcrumbs on your website can improve navigation, user experience, and SEO rankings.","og_url":"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2021-02-07T08:53:59+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2021\/02\/Breadcrumbs-03.png","type":"image\/png"}],"author":"Sergei Davidov","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Sergei Davidov"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/"},"author":{"name":"Sergei Davidov","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/87a6d63997f5dd9f2105a3a769c759c9"},"headline":"How to Use Breadcrumbs in Web Design to Improve Navigation","datePublished":"2021-02-07T08:53:59+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/"},"wordCount":1778,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/02\/Breadcrumbs-01.png","keywords":["Build"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/","url":"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/","name":"Breadcrumb Navigation: 4 Best Design Practices & Examples | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/02\/Breadcrumbs-01.png","datePublished":"2021-02-07T08:53:59+00:00","description":"In this article, we\u2019ll explore how the implementation of breadcrumbs on your website can improve navigation, user experience, and SEO rankings.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/02\/Breadcrumbs-01.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/02\/Breadcrumbs-01.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/breadcrumbs-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/elementor.com\/blog\/category\/design\/"},{"@type":"ListItem","position":3,"name":"How to Use Breadcrumbs in Web Design to Improve Navigation"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/87a6d63997f5dd9f2105a3a769c759c9","name":"Sergei Davidov","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0a5edd915cad15385a7184ea9ce23710fe08edb3d605ede2f99cc4e7e65f04ad?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0a5edd915cad15385a7184ea9ce23710fe08edb3d605ede2f99cc4e7e65f04ad?s=96&d=mm&r=g","caption":"Sergei Davidov"},"description":"Sergei Davidov is a content creator at Elementor. His favorite topics are gadgets, advances in science, new apps and software solutions. He enjoys spicy food, reading books and listening to elevator music.","url":"https:\/\/elementor.com\/blog\/author\/sdavidov\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/54883","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/188873"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=54883"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/54883\/revisions"}],"predecessor-version":[{"id":92715,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/54883\/revisions\/92715"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/54888"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=54883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=54883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=54883"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=54883"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=54883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}