Use breadcrumbs to improve your website navigation
Breadcrumbsalso known as breadcrumbs, are a secondary navigation system that shows a user’s location within a web site or application. The term comes from Hansel and Gretel fairy tale in which the main characters create a trail of breadcrumbs to go back to their house. Just like the children of the story, visitors need to know their position in the hierarchical structure of a site.
In this article, we will learn why breadcrumbs are so important, explore different types of breadcrumbs and discuss best practices for applying breadcrumbs to your website.
What are breadcrumbs and how do they help navigate a website?
Breadcrumb, also known as breadcrumbs, is a secondary navigation system that shows a user’s location on a website or app. They act as a visual aid that indicates the user’s location in the site hierarchy and are an excellent source of contextual information for users to help them find answers to where they are on the site. and where they want to go.
Why breadcrumb navigation is so valuable
Breadcrumbs act as a visual aid that indicates the user’s location in the site hierarchy. Breadcrumb navigation is a great source of contextual information for users that helps them find answers to the following questions:
Where am I?
Breadcrumbs inform visitors of their current location relative to the entire site hierarchy.
Where can I go?
Breadcrumbs improve the findability of content for website visitors. Users do not need to click on the menu to find available navigation options; they see the structure of the site because it is laid out in breadcrumbs. As a result, breadcrumbs encourage navigation. For example, an e-commerce site visitor might land on a product page, and even if the first product doesn’t match, the visitor might want to see other products in the same category.
Breadcrumbs also offer two other major benefits. First, they toccupy a minimum of space. It is a compact mechanism that takes up minimal space on the page: just a line of text with links. As a result, it does not introduce additional visual distractions for visitors. Moreover, yousers are familiar with breadcrumbs. Breadcrumbs have been around since the very beginning of the internet, so people have no trouble interacting with them.
When to use breadcrumbs?
To understand if your site would benefit from add breadcrumbs, you first need to create a map that shows its navigational structure and then analyze it. Breadcrumbs can improve the user’s ability to navigate when you have a important amount of content organized hierarchically (i.e. multiple sections that can be divided into multiple subsections). A good example is an e-commerce site that offers a variety of products grouped into categories.
Avoid using breadcrumbs when you have a single-level website with no hierarchy or logical grouping. For example, breadcrumbs are not needed for a personal blog.
Breadcrumbs can be organized by location, path, or attribute.
1. Location-Based Breadcrumbs
Location-based breadcrumbs are the most common type. They represent a site‘s structure, and they help visitors understand and navigate your site on many levels‘the hierarchy. This type of breadcrumb is useful for visitors who landed on your site from Google search results.
In the example below from the Best Buy website, each text link is for a page that is one level higher than the one to its right.
2. Path-Based Breadcrumb
Path-based breadcrumbs show the full path the user took through the website to reach a particular page. This type of breadcrumb is generated dynamically. Although path-based breadcrumbs can be useful in specific contexts (i.e. when the user needs to see their journey).
Most of the time, this type is not very useful because visitors tend to navigate from one page to another, and the path they create can be very chaotic. When users want to return to previous pages they have visited, they tend to rely on their browser’s back button. A path-based lead is useless for visitors who have landed from Google search results directly on a deep site page.
Below is an example of path-based breadcrumb links that display two paths to the target page..
3. Attribute-Based Breadcrumbs
Attribute-based breadcrumbs list categories for a specific page or product. On e-commerce websites, this type can help visitors understand the difference between particular product variations.
For example, on TM Lewin‘s, breadcrumbs show the attributes of elements displayed on a particular page:
Breadcrumb Navigation Best Practices
When designing breadcrumb navigation, keep the following principles in mind:
1. Don’t use breadcrumbs as a replacement for primary navigation
Breadcrumb navigation is an additional feature that makes navigation easier, but it shouldn’t replace the main navigation menus. Think of breadcrumbs as a alternative way to browse your website. Here, Apple uses breadcrumbs to support major navigation tools.
2. Don’t add links to the current page in breadcrumb
The last item in the breadcrumb, which shows the user‘s current location, is optional. If you want to display it, make sure it‘is not clickable. Since the users are already on the page, this does not‘It doesn’t make sense to add a link to the current page to the breadcrumb navigation.
3. Use clear visual dividers between individual levels
The most recognizable symbol for separating links in breadcrumbs is the greater than (>) symbol. The > sign is the most conventional indicator that denotes a hierarchy, as in the Parent Category > Child Category format. Other common symbols are right-pointing arrows (→) and slashes (/ or //). The choice of visual divider depends on the aesthetics of the site and the type of breadcrumb trail.
4. Choose an appropriate visual style for the breadcrumb
You don’t want your breadcrumb to dominate the page. They should be less visible than the main navigation menu. A rule of thumb to follow when sizing and styling your breadcrumb is that it shouldn’t to be the first element that catches the user’s attention when he they or they land on a page. The breadcrumb in the example below isn’t bad, but it’s too catchy and can distract visitors from the main navigation and main content.
On the other hand, the Google support page does not‘It doesn’t make its breadcrumb navigation look fancy, but users can quickly locate and use it.
Use breadcrumbs to help users find their way
A good browsing experience is an integral part of good product design. Breadcrumbs improve usability and make interacting with a website more comfortable, as they allow visitors to move around the site more easily.
