Breadcrumb navigation is a secondary visual navigation system that helps a user know its location on a website or a web application. This navigation method gets its name from the children’s fairytale Hansel and Gretel, where they drop breadcrumbs in a jungle to find their way back home. Now, we may not find ourselves lost in the woods too often, but we do feel disoriented on a poorly designed website that doesn’t show which page we’re on. This is where having breadcrumb navigation can save the day.
In this article, we’re going to understand what breadcrumb navigation is, its different types, its benefits, and finally, the best practices of breadcrumb navigation.
What is Breadcrumb Navigation?
Breadcrumbs is a navigation method that allows users to visualize their location on a website or web app. On a website, breadcrumb appears as a secondary navigation bar that appears as a horizontal line where text is separated by angle brackets. Having breadcrumb navigation allows users to reach higher-level pages quicker in cases where they found your website through a search or deep link. It also improves the findability of your landing pages.
Although you have the autonomy to style your breadcrumb navigation however you like, they often tend to look similar across all websites that use them.
How Breadcrumbs Can Prove to Be Valuable for Your Website?
Breadcrumbs works great as a visual aid that helps users understand their location in a website’s hierarchy. It is also an excellent source of contextual information that allows users to get answers to questions such as-
- Where am I?
Breadcrumbs navigation informs the user of their current location on a website.
- Where can I go?
For website visitors, breadcrumbs make content easier to find. Because the site is structured using breadcrumbs, users can see the available navigation options without clicking on the menu. Therefore, breadcrumbs promote browsing. An e-commerce site user might arrive at a product page, for instance, and decide to look at other items in the same category even if the original product isn’t a good match.
Breadcrumbs also provide two more key advantages. First of all, they don’t occupy much room. They are small devices that only need a row of text and a few links to function. As a result, it spares visitors from any additional visual distractions. Additionally, consumers are accustomed to breadcrumbs. People have no issue connecting with breadcrumbs because they have existed since the inception of the internet.
What Situations Call for Breadcrumbs?
Create a map of your site’s navigation layout and then study it to determine whether adding breadcrumbs would be beneficial. When you have a lot of content organized hierarchically, breadcrumbs can help the user’s ability to navigate (i.e., multiple sections that can be divided into more subsections). A website that sells a variety of items arranged into categories is a good example. When your website is single-level and lacks any logical hierarchy or grouping, stay away from employing breadcrumbs. For a personal blog, for instance, breadcrumbs are not necessary.
Let’s explore the different types of breadcrumbs to understand further-
- Location-based Breadcrumbs
The majority of breadcrumbs are location-based. They serve as a representation of a site’s organization and aid users in navigating the hierarchy of a multilayer site. This kind of breadcrumb is beneficial for site visitors who arrived via Google search results.
- Path-based Breadcrumbs
Breadcrumbs that follow a user’s journey across a website to a specific page are called path-based breadcrumbs. These breadcrumbs are produced dynamically. Even though path-based breadcrumbs can be useful in certain situations (i.e., when the user needs to see their journey).
The majority of the time, this type isn’t very helpful because users frequently jump from one website to another and leave a very disorganized trail in their wake. Users frequently rely on their browsers’ return buttons to navigate back to previously visited pages. Visitors who arrived at a page further inside the site directly from the Google search results are useless for a path-based trace.
- Attribute-based Breadcrumbs
The categories that correspond to each page or product are listed in attribute-based breadcrumbs. This kind can assist users in distinguishing between certain product versions on e-commerce websites.
Breadcrumbs Navigation Tips and Best Practices
Now that we’ve covered what breadcrumb navigation is and how it can benefit your business, let’s move forward and discuss the tips and best practices for this kind of navigation.
1. Use breadcrumb navigation only if it is appropriate for the layout of your website.
Because of the linear form of breadcrumb navigation, you should only utilize it when it complements the hierarchy of your website. Breadcrumb navigation will only confuse readers who repeatedly access the same pages from different starting points if you have lower-level pages that are accessible from various landing pages. Additionally, if your website merely has a few pages and is not particularly complex, you generally don’t need breadcrumb navigation.
2. Advance from the highest to the lowest level.
Your breadcrumb navigation must read from left to right, with your homepage appearing closest to the left and the user’s current page appearing closest to the right. According to a Nielsen Norman Group study, people spend 80% of their time examining a page’s left side and 20% of their time viewing its right side, supporting the left-to-right design philosophy. Additionally, since the link that is closest to the left would appear to be the first in the chain, you want it to be the highest-level page possible.
3. Don’t make your breadcrumbs too large as compared to your primary navigation.
As your breadcrumb navigation is your second form of navigation, it shouldn’t appear too large on your landing page, especially in comparison to your primary form of navigation. For example, we can study DHL’s website where the primary navigation is prominent and recognizable on the top of the landing page with large text showing “Express”, “Parcel & eCommerce”, “Logistics”, “Mail”, etc., on the other hand, the breadcrumbs (secondary navigation) is a smaller section below. Always keep your breadcrumb navigation smaller in size as you wouldn’t want your audience to mistake it for primary navigation.
4. Don’t forget to include the full navigation path.
It is advisable for anyone who’s including breadcrumb navigation on their website to include the full path- from the homepage to wherever the user is landing. If one fails to do so and their breadcrumbs start from the middle then instead of helping it ends up confusing the user. To understand this, we can take the example of Elon University which has brilliantly included breadcrumbs on its website. Even if you just type a simple Google search- “Elon University Non-Degree Students”, which would take you to their website, you can see that they’ve included the complete path including “Home” and “Admissions”, even though the user is reaching without following that path. Doing so helps the user understand the hierarchy of the website and gives them an easy way to explore the website.
5. Keep the titles of your page titles and your breadcrumb titles the same.
Keep your page and breadcrumb titles constant to prevent confusion, especially if you’re using specific keywords in those names. Connecting your breadcrumb titles to the page is another important step. Make it evident if there isn’t a link in the title of the breadcrumb. For example, Nestle labels its breadcrumb titles to correspond with the page titles efficiently. For instance, “Areas of Impact & Commitment” appears in the breadcrumb menu just as it does on the website. Nestle does a good job at distinguishing between links and no-links by using distinct colors; links are blue, but no-links are still grey.
6. Be imaginative when designing.
This is how the conventional breadcrumb navigation looks: Careers > About Us > Home. You don’t have to stick to the norm, though, if you think an alternative style would better suit your target demographic or appear better on your website.
For instance, Target utilizes “/” symbols and plain black and grey text but uses breadcrumb navigation on their product pages. In this instance, the small design modification fits with the look of their website.
7. Maintain order and cleanliness.
Your breadcrumb navigation is only user help; thus, it should ideally not be seen until the user is specifically seeking it. Because of this, you shouldn’t include extraneous text in your breadcrumb navigation. For instance, Eionet would benefit from eliminating its “You are here” text. The text clogs the page even if it is intended to be useful. Breadcrumb navigation should be obvious enough without an introduction with the right design.
8. Choose the breadcrumb navigation style that best suits your website.
You might utilize location-based, attribute-based, or history-based breadcrumbs, among other kinds. The user may see where they are in the site structure using location-based breadcrumbs. Breadcrumbs that are based on attributes let users know which category a page belongs to. Last but not least, history-based breadcrumbs let readers see the precise route they followed to get to the present page. In order to allow customers to browse related products, Bed Bath & Beyond uses attribute-based breadcrumb navigation to indicate to consumers which category their product page belongs to. The best users of this breadcrumb navigation are Bed Bath & Beyond customers. Think about what would be most beneficial for your site’s visitors when designing the breadcrumb navigation.
Also Read: 10 Futuristic Location Based App Ideas
Conclusion
Breadcrumb navigation is a great secondary navigation tool that can help you give a good experience to your users. However, you must adhere to the aforementioned best practices as there are many ways breadcrumbs can go wrong. In the end, create something that benefits your website and also is unique to your style and brand.
