{"id":5422,"date":"2009-11-02T20:00:55","date_gmt":"2009-11-02T12:00:55","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=5422"},"modified":"2022-07-22T20:06:40","modified_gmt":"2022-07-22T12:06:40","slug":"breadcrumb-navigation-examined-best-practices-examples","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/breadcrumb-navigation-examined-best-practices-examples\/","title":{"rendered":"Breadcrumb Navigation: Best Practices and Examples"},"content":{"rendered":"

Breadcrumb navigation is often overlooked in the design and development process.<\/strong>\u00a0Some people may see it as unnecessary, while others may feel it is too big of a hassle for what its worth. The fact of the matter is, breadcrumb navigation will significantly increase the usability of a website.<\/p>\n

Breadcrumbs give users an alternative method of navigation, allow them to see where they stand in the hierarchy of a website and will reduce the number of steps needed to navigate to a higher-level within the site.<\/p>\n

Outlined here are the different types of breadcrumb navigation being used today, why they are essential, and how they should best be implemented online. Also included here for your reference are\u00a0over 30 examples of how breadcrumbs are being used online today<\/strong>.<\/p>\n

Remember, while it is likely that breadcrumb navigation will not make or break a website, it will provide an added benefit to your users by increasing the overall usability and functionality of your website.<\/p>\n

Breadcrumb Types<\/h2>\n

Path<\/h3>\n

Path-based breadcrumbs indicate the steps or path; a user has taken to arrive at the current page of a website. Furthermore, users will see links to pages they have previously visited to reach the current page.<\/p>\n

Out of the three types of breadcrumb navigation, Path-based breadcrumb navigation is least popular online. The reason being, Path-based breadcrumb navigation provides similar functionality to the \u201cForward\u201d and \u201cBack\u201d buttons on a browser.<\/p>\n

For most websites, Location-based and Attribute-based breadcrumb navigation offers better functionality.<\/p>\n

Location<\/h3>\n

Location-based breadcrumbs indicate to the user where the current page stands in the hierarchy of the website.<\/p>\n

This type of breadcrumb navigation is most commonly seen on sites with more than two levels of depth or content.<\/p>\n

Upon moving further into a website, users are provided with links to pages or categories that act as a \u201cparent\u201d or a level up from the page they are currently viewing. For example, a user may be on the \u201cSpeak\u201d page.<\/p>\n

However, the \u201cWhat we do\u201d page is a parent of the \u201cSpeak\u201d page while the \u201cHome\u201d page is a parent of the \u201cWhat we do\u201d page.<\/p>\n

Clearleft Ltd<\/strong><\/p>\n

\"Clearleft<\/figure>\n

Attribute<\/h3>\n

Attribute-based breadcrumbs indicate to the user the attributes or categories ascribed to the current page within a website.<\/p>\n

Often seen on e-commerce websites, products may not only fall into a category but under specific attributes as well.<\/p>\n

For example, a vehicle may be categorized as an SUV then have the attributes of being the color black and released in the year 2016.<\/p>\n

Cars.com<\/strong><\/p>\n

\"Cars.com\"<\/figure>\n

Why Use Breadcrumbs?<\/h2>\n

Great usability<\/h3>\n

Breadcrumbs provide an additional means by which users can easily navigate a website. If a user lands on an internal page on your website from another source, breadcrumbs will allow the user to see exactly where they stand within the site\u2019s hierarchy.<\/p>\n

User is also given the opportunity to move up to a higher level of the website at any given time without any hassle.<\/p>\n

Easy to back-track<\/h3>\n

Primary navigations are not designed to be followed backward were breadcrumbs are. Since back-tracking is extremely popular online, providing a little additional help can go a long way.<\/p>\n

Eliminate additional clicks<\/h3>\n

Breadcrumbs allow users to jump from one level of a website to the next without having to use the \u201cforward\u201d or \u201cbackward\u201d buttons on the browser. Additionally, breadcrumbs eliminate the need for\u00a0users to resort to the main navigation continually.<\/strong><\/p>\n

Shows users hierarchy<\/h3>\n

The primary navigation of a website will not reflect the hierarchy of every page within site. Giving users breadcrumbs will allow them to see the hierarchy of a page within a website.<\/p>\n

Visually pleasing<\/h3>\n

Not only do breadcrumbs provide users with additional usability, but they also do so without taking up much room or space on the page. Breadcrumbs are easy to implement into the visual design of your website and provide a great benefit to users.<\/p>\n

Provides additional H=help<\/h3>\n

It is entirely possible that some users may not understand how a website\u2019s primary navigation works, and in some cases, users may not even know what they are looking for.<\/p>\n

Giving users breadcrumbs will allow them to see the overall progress and structure of a website, thus allowing them to navigate the site better.<\/p>\n

Lower Bounce Rates<\/h3>\n

Typically breadcrumbs will provide more detailed navigation than the primary navigation. In doing so, users will be given more options on how to navigate a website. Allowing them to back-track a few levels within the site quickly will lower your bounce rate.<\/p>\n

Builds interest<\/h3>\n

When a user lands on an internal page of a website, odds are they are already on a page of interest. Breadcrumbs may provide links to additional pages and information of which the user is also interested in without making them start from square one.<\/p>\n

Breadcrumb Best Practices<\/h2>\n

Use breadcrumbs at the top of a page<\/h3>\n

The most common and instinctual placement for breadcrumbs is within the top of a page. This allows users to find the breadcrumbs in an uncomplicated manner and make use of them accordingly.<\/p>\n

Use breadcrumbs consistently<\/h3>\n

If you do decide to use breadcrumbs, make sure that you use them across your entire website. Giving users breadcrumbs on some pages, and not others will only confuse and frustrate them.<\/p>\n

Note:<\/strong> One prime example of this is Amazon as they remove breadcrumbs from the individual product pages<\/p>\n

Breadcrumbs should degrade gracefully<\/h3>\n

Breadcrumbs should always start with the home page and degrade to the current page. In doing so, your breadcrumbs need to go from the highest level to the lowest level one step at a time.<\/p>\n

Stylize breadcrumbs appropriately<\/h3>\n

You want your breadcrumbs to be seen; however, you do not want them to be the focal point. You also want to make it apparent that your breadcrumbs are not part of the main content to a page, only additional support to it. Find a happy medium where your breadcrumbs are noticeable, however, not overbearing.<\/p>\n

Categorize pages clearly<\/h3>\n

If you have pages that fall into two or more categories, you may not want to use breadcrumbs on your website. Trying to place a page under two or more categories will likely only produce unclear breadcrumbs and puzzle the user. Make sure your website has an organized hierarchy and is displayed accordingly through your breadcrumbs.<\/p>\n

Separate each level<\/h3>\n

Make sure users can distinguish the difference between each breadcrumb level. The most common separator between levels is greater than character<\/em> ><\/code>.<\/p>\n

Other suitable separators include right double angle quotations<\/em> \u00bb<\/code>, slashes<\/em> \/<\/code>, and arrows<\/em> \u2192<\/code>. If using a plain text character, only use one.<\/p>\n

Note:<\/strong>\u00bb<\/code> is more appealing and effective than >><\/code><\/p>\n

Single out the current page<\/h3>\n

Use a different style on the last item of a breadcrumb list to establish that it is the current page being viewed. You can accomplish this by making the item\u00a0bold<\/strong>, changing its color, or\u00a0emphasizing<\/em>\u00a0it.<\/p>\n

Do not make the current page a link<\/h3>\n

There is no need to make the last item of a breadcrumb list a link because it is the current page being viewed. Creating a link here will only confuse users, especially when they click on it and are not taken to a new page.<\/p>\n

Do not use breadcrumbs as a page heading<\/h3>\n

Using the last item of a breadcrumb list as the heading of a current page is ineffective. If you choose to use breadcrumbs, do so with the addition of a page heading as well.<\/p>\n

Breadcrumbs do not replace primary navigation<\/h3>\n

Breadcrumbs are only to be used as support to the primary navigation, never to replace the primary navigation altogether. You should always provide users with primary navigation from which they can navigate a website before using breadcrumb navigation.<\/p>\n

Examples of Breadcrumbs<\/h2>\n

Vitra Direct<\/strong><\/p>\n

\"Vitra<\/figure>\n

Trek Bikes<\/strong><\/p>\n

\"Trek<\/figure>\n

Illy<\/strong><\/p>\n

\"illy\"<\/figure>\n

SiteInspire<\/strong><\/p>\n

\"siteInspire\"<\/figure>\n

Mia and Maggie<\/strong><\/p>\n

\"Mia<\/figure>\n

Intridea<\/strong><\/p>\n

\"Intridea\"<\/figure>\n

Design by Humans<\/strong><\/p>\n

\"Design<\/figure>\n

Roxy<\/strong><\/p>\n

\"Roxy\"<\/figure>\n

Blik<\/strong><\/p>\n

\"blik\"<\/figure>\n

SitePoint<\/strong><\/p>\n

\"SitePoint\"<\/figure>\n

Target<\/strong><\/p>\n

\"Target\"<\/figure>\n

Walmart<\/strong><\/p>\n

\"Walmart\"<\/figure>\n

1-800-Flowers<\/strong><\/p>\n

\"1-800-Flowers\"<\/figure>\n

BestBuy<\/strong><\/p>\n

\"BestBuy\"<\/figure>\n

Amazon.com<\/strong><\/p>\n

\"Amazon.com\"<\/figure>\n

Barns & Noble<\/strong><\/p>\n

\"Barns<\/figure>\n

Lands\u2019 End<\/strong><\/p>\n

\"Lands'<\/figure>\n

Apple<\/strong><\/p>\n

\"Apple\"<\/figure>\n

Google<\/strong><\/p>\n

\"Google\"<\/figure>\n

Chase<\/strong><\/p>\n

\"Chase\"<\/figure>\n

AbsolutePunk.net<\/strong><\/p>\n

\"AbsolutePunk.net\"<\/figure>\n

Littman Bros. Lighting<\/strong><\/p>\n

\"Littman<\/figure>\n

Guardian.co.uk<\/strong><\/p>\n

\"guardian.co.uk\"<\/figure>\n

Area 17<\/strong><\/p>\n

\"AREA<\/figure>\n

Wufoo<\/strong><\/p>\n

\"Wufoo\"<\/figure>\n

Girl Scouts of Middle Tennessee<\/strong><\/p>\n

\"Girl<\/figure>\n

The Glasgow Collective<\/strong><\/p>\n

\"The<\/figure>\n

Firstborn<\/strong><\/p>\n

\"firstborn\"<\/figure>\n

Bell Canada<\/strong><\/p>\n

\"Bell<\/figure>\n

Grooveshark<\/strong><\/p>\n

\"Grooveshark\"<\/figure>\n

Devlounge<\/strong><\/p>\n

\"Devlounge\"<\/figure>","protected":false},"excerpt":{"rendered":"

Breadcrumb navigation is often overlooked in the design and development process.\u00a0Some people may see it as unnecessary, while others may feel it is too big of a hassle for what its worth. The fact of the matter is, breadcrumb navigation will significantly increase the usability of a website. Breadcrumbs give users an alternative method of…<\/p>\n","protected":false},"author":481,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395],"tags":[4102,2512],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nBreadcrumb Navigation: Best Practices and Examples - Hongkiat<\/title>\n<meta name=\"description\" content=\"Breadcrumb navigation is often overlooked in the design and development process. Some people may see it as unnecessary, while others may feel it is\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/breadcrumb-navigation-examined-best-practices-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Breadcrumb Navigation: Best Practices and Examples\" \/>\n<meta property=\"og:description\" content=\"Breadcrumb navigation is often overlooked in the design and development process. Some people may see it as unnecessary, while others may feel it is\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/breadcrumb-navigation-examined-best-practices-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2009-11-02T12:00:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-22T12:06:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/breadcrumb-navigation-design\/clearleft.jpg?v=1212400\" \/>\n<meta name=\"author\" content=\"Shay Howe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shay Howe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/breadcrumb-navigation-examined-best-practices-examples\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/breadcrumb-navigation-examined-best-practices-examples\\\/\"},\"author\":{\"name\":\"Shay Howe\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/ce8ec90353d63b4226756979cf53e19d\"},\"headline\":\"Breadcrumb Navigation: Best Practices and Examples\",\"datePublished\":\"2009-11-02T12:00:55+00:00\",\"dateModified\":\"2022-07-22T12:06:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/breadcrumb-navigation-examined-best-practices-examples\\\/\"},\"wordCount\":1343,\"commentCount\":85,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/breadcrumb-navigation-examined-best-practices-examples\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/breadcrumb-navigation-design\\\/clearleft.jpg?v=1212400\",\"keywords\":[\"Interface Design\",\"Website Design\"],\"articleSection\":[\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/breadcrumb-navigation-examined-best-practices-examples\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/breadcrumb-navigation-examined-best-practices-examples\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/breadcrumb-navigation-examined-best-practices-examples\\\/\",\"name\":\"Breadcrumb Navigation: Best Practices and Examples - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/breadcrumb-navigation-examined-best-practices-examples\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/breadcrumb-navigation-examined-best-practices-examples\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/breadcrumb-navigation-design\\\/clearleft.jpg?v=1212400\",\"datePublished\":\"2009-11-02T12:00:55+00:00\",\"dateModified\":\"2022-07-22T12:06:40+00:00\",\"description\":\"Breadcrumb navigation is often overlooked in the design and development process. Some people may see it as unnecessary, while others may feel it is\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/breadcrumb-navigation-examined-best-practices-examples\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/breadcrumb-navigation-examined-best-practices-examples\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/breadcrumb-navigation-examined-best-practices-examples\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/breadcrumb-navigation-design\\\/clearleft.jpg?v=1212400\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/breadcrumb-navigation-design\\\/clearleft.jpg?v=1212400\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/breadcrumb-navigation-examined-best-practices-examples\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Breadcrumb Navigation: Best Practices and Examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/ce8ec90353d63b4226756979cf53e19d\",\"name\":\"Shay Howe\",\"description\":\"Shay Howe is a professional web and user interface designer currently living in Chicago, IL. He writes about web design in his own blog over at shayhowe.com.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/shayhowe\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Breadcrumb Navigation: Best Practices and Examples - Hongkiat","description":"Breadcrumb navigation is often overlooked in the design and development process. Some people may see it as unnecessary, while others may feel it is","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:\/\/www.hongkiat.com\/blog\/breadcrumb-navigation-examined-best-practices-examples\/","og_locale":"en_US","og_type":"article","og_title":"Breadcrumb Navigation: Best Practices and Examples","og_description":"Breadcrumb navigation is often overlooked in the design and development process. Some people may see it as unnecessary, while others may feel it is","og_url":"https:\/\/www.hongkiat.com\/blog\/breadcrumb-navigation-examined-best-practices-examples\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2009-11-02T12:00:55+00:00","article_modified_time":"2022-07-22T12:06:40+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/breadcrumb-navigation-design\/clearleft.jpg?v=1212400","type":"","width":"","height":""}],"author":"Shay Howe","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Shay Howe","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/breadcrumb-navigation-examined-best-practices-examples\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/breadcrumb-navigation-examined-best-practices-examples\/"},"author":{"name":"Shay Howe","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/ce8ec90353d63b4226756979cf53e19d"},"headline":"Breadcrumb Navigation: Best Practices and Examples","datePublished":"2009-11-02T12:00:55+00:00","dateModified":"2022-07-22T12:06:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/breadcrumb-navigation-examined-best-practices-examples\/"},"wordCount":1343,"commentCount":85,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/breadcrumb-navigation-examined-best-practices-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/breadcrumb-navigation-design\/clearleft.jpg?v=1212400","keywords":["Interface Design","Website Design"],"articleSection":["UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/breadcrumb-navigation-examined-best-practices-examples\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/breadcrumb-navigation-examined-best-practices-examples\/","url":"https:\/\/www.hongkiat.com\/blog\/breadcrumb-navigation-examined-best-practices-examples\/","name":"Breadcrumb Navigation: Best Practices and Examples - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/breadcrumb-navigation-examined-best-practices-examples\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/breadcrumb-navigation-examined-best-practices-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/breadcrumb-navigation-design\/clearleft.jpg?v=1212400","datePublished":"2009-11-02T12:00:55+00:00","dateModified":"2022-07-22T12:06:40+00:00","description":"Breadcrumb navigation is often overlooked in the design and development process. Some people may see it as unnecessary, while others may feel it is","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/breadcrumb-navigation-examined-best-practices-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/breadcrumb-navigation-examined-best-practices-examples\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/breadcrumb-navigation-examined-best-practices-examples\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/breadcrumb-navigation-design\/clearleft.jpg?v=1212400","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/breadcrumb-navigation-design\/clearleft.jpg?v=1212400"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/breadcrumb-navigation-examined-best-practices-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Breadcrumb Navigation: Best Practices and Examples"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/ce8ec90353d63b4226756979cf53e19d","name":"Shay Howe","description":"Shay Howe is a professional web and user interface designer currently living in Chicago, IL. He writes about web design in his own blog over at shayhowe.com.","url":"https:\/\/www.hongkiat.com\/blog\/author\/shayhowe\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-1ps","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/5422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/481"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=5422"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/5422\/revisions"}],"predecessor-version":[{"id":57213,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/5422\/revisions\/57213"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=5422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=5422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=5422"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=5422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}