What is Breadcrumb Navigation?
Breadcrumb navigation is a type of website navigation that displays the user’s current location within the website’s hierarchy. It typically appears near the top of a webpage and provides links to the main categories or sections of a website, starting from the homepage and leading to the current page. The term “breadcrumb” refers to the Hansel and Gretel fairy tale, where the characters leave breadcrumbs to mark their path through the woods.
Breadcrumb navigation helps users understand the structure of a website and navigate it more efficiently. It also provides a sense of context, making it easier for users to find their way back to previous pages and to explore related pages. Breadcrumbs can be especially useful for websites with complex structures or many pages, such as e-commerce websites or large informational websites.
There are three types of breadcrumb navigation: location-based, attribute-based, and path-based. Location-based breadcrumbs show the user’s current location in the website hierarchy, such as “Home > Category > Subcategory > Current Page”. Attribute-based breadcrumbs show the user’s current location based on specific attributes or filters, such as “Home > Products > Color > Red > Current Page”. Path-based breadcrumbs show the user’s current location based on the path they took to get to the current page, such as “Home > About Us > Team > Current Page”.
Breadcrumb navigation is not only beneficial for users but also for search engines. It provides additional context and helps search engines understand the structure and hierarchy of a website, which can improve the website’s search engine optimization (SEO) and ranking.
What are some breadcrumb best practices?
If you determine that your website would benefit from a secondary navigation element, here are some best practices to follow for breadcrumb navigation:
- Breadcrumbs should be an additional navigation feature that supports and provides an alternative way for users to navigate the website, not a replacement for the primary navigation menu.
- The text links in the breadcrumb trail must be separated by special characters such as the commonly used “>” symbol, forward slash (/), or an arrow, to separate internal links within the trail.
- Always include the full navigational path, regardless of whether the user navigated to the page from the website’s home page or discovered it through search results.
- The breadcrumb trail should read from left to right, with the website’s homepage on the left and pages at lower levels on the right, one text link at a time.
- The last item in a breadcrumb trail should be the page the user is currently on. Since it is unlikely that the user will interact with the last bit of the trail, there is no need to add a link to it.
- From a design perspective, ensure that the breadcrumb navigation is as unobtrusive and simple as possible, positioned at the top right corner of the website, and using a font that is small but readable, so it does not distract visitors from the content of the page they are on.