Why is it called “breadcrumb”?

A “breadcrumb” (or “breadcrumb trail”)  is a navigational aid that makes the users know their locations in user interfaces and on web pages.

The term comes from Hansel and Gretel in the German fairy tale.

Two kids drop breadcrumbs formed a trail back to their home.

Just like this fairy tale, breadcrumbs in the user interfaces can offer users a way to track their path back to their original landing page/home page.

Types of the Breadcrumbs

  1. Location/Hierarchy-Based:

Location-based breadcrumbs show users which level of the site they are currently on.
On the shopping website, users can easily check their position in the website architecture.
Assuming that the user does not like what is displayed on the current page, it can easily go back / up to a higher level.it can quickly go back / up to a higher level.

How Important The Breadcrumbs In Web Design-Location/Hierarchy-Based
  1. Attribute-Based:

Attribute-Based breadcrumbs will show which attributes are user selected on the webpage; these will be found in the category of shopping sites that users can select to filter products.

How Important The Breadcrumbs In Web Design-Attribute-Based
  1. Path/History-Based: Page viewed > Page viewed > Page viewed > Page viewed > Page currently being viewed

The purpose is to let the browser back to one of the pages which users previously visited.
This feature is useful when users enter the product page after applying multiple filters on the category page.
But such breadcrumbs are seldom used, as the browser Back button quickly does the same job. Instead, history-based breadcrumbs are often combined with other breadcrumb types to let users easily come back to the previous page while all selections remain the same.

How Important The Breadcrumbs In Web Design-Path/History-Based

What can Breadcrumbs do?

  • Where am I? 
    Breadcrumbs inform visitors about their location in the entire site hierarchy.
  • Where can I go?
    Breadcrumbs improve the findability of the site sections and pages. 
    If the site section or page is placed in breadcrumbs, it is easier to understand than putting it on the menu.
  • Where Should I go?
    Breadcrumbs convey content value and encourage browsing (for example, visitors to e-commerce sites may land in the product pages, which may not be a good match, but visitors may wish to view other products in the same category).
    At the same time, this way can reduce the bounce rate of the entire site.

Benefits Of Using Breadcrumbs

  • Boosted user experience
    Breadcrumbs make it simple for users to move around on your website.
    Users always know where they are and quickly return to the previous page or go to other categories. Breadcrumbs encourage users to start over instead of bouncing.
  • Lower bounce rate
    The breadcrumb trails may be an excellent way to induce first-time visitors to read the site carefully after viewing the landing page.
    A common situation is when a user reaches a page due to their Google search, sees breadcrumbs, and clicks a higher level link to view all related items or topics. In this case, the breadcrumb trails will reduce the bounce rate.
  • does not take up space
    The breadcrumbs don’t take up much space on the page because they are usually horizontal lines, short in style, typed in plain font.
    They have almost no negative impact in terms of content overload, thence, significant for the mobile version of the website.
  • Breadcrumbs provide SEO benefits
    Not only are breadcrumbs popular among users, but search engines also appreciate them. 
    Google defines them as one of the enhanced tools that can positively influence the ranking of your website. They replaced the URL in their search results with the site name and breadcrumb navigation path. 
    Breadcrumbs become another way to explain your web content better to search engines and get little extra SEO benefits. They also serve as additional links in search results, giving your website more opportunities to be clicked.

6 best ways to use breadcrumbs

  1. Start from the home page:
    The breadcrumb trail works best when it shows the journey from one end to the other—including the homepage in the trail as a powerful anchor, providing users with a strong sense of direction.
  2. Breadcrumbs as additional navigation:
    Breadcrumb navigation should be considered an additional feature and should not replace an effective primary navigation menu. Remember that it’s a convenience feature; a secondary navigation proposal; another way to browse the website.
  3. Don’t link the current page in breadcrumb navigation:
    The last item in the breadcrumb trail (current user’s location) is optional. If you want to display it, make sure it is not clickable. Since the user is already on the page, adding the current page to the breadcrumb navigation doesn’t make sense.
  4. Use separator:
    The most recognizable symbol that separates the links in the breadcrumb trail is the “greater than” symbol (>). 
    Generally, the> symbol is used to indicate a hierarchical structure, such as the format of the “parent category”> “subcategory.”
    Other symbols used are right-pointing arrows (→), right-angle quotation marks (»), and slashes (/). 
    The possible course of action depends on the design of the site interface and the type of breadcrumbs used; be aware that slashes(/) and vertical bars(|) may confuse users.
  5. Put it at the top:
    The navigation bar is usually located at the very top of a website.
    As breadcrumbs are used as a secondary navigation tool, they should be placed at the top of the page, above the content or main title.
  6. Select the small type:
    The use of small types helps convey to users the relative importance of breadcrumbs relative to the primary navigation bar. Never confuse it as the main navigation tool.
    A good rule of thumb to follow when sizing your breadcrumb trail is that it should not be the first item that catches the user’s eyes when they are reaching the page.


Recommended Reading:

  • Post author:
  • Post category:Builder
  • Post comments:2 Comments
  • Post last modified:February 21, 2023

This Post Has 2 Comments

  1. andrew

    This was a very informative blog and I really enjoyed reading it. But I also have a few points regarding it to discuss with you.

    Navigation design is one of the most important aspects of any website, and it is essential that it is designed in a way that is both user-friendly and visually appealing. Breadcrumb navigation is a great way to keep your website users on your site and in the loop.

    Here are a few tips to make sure your website is easier to navigate:-

    1. Include a full navigational path in your breadcrumb navigation
    2. Consider which type of breadcrumb navigation makes the most sense for your site
    3. Keep it clean and uncluttered

    To check the full list of tips, visit – https://blog.alakmalak.com/breadcrumb-tips-to-make-your-site-easier-to-navigate/?UTM-andrew-aug/

  2. I was very pleased to find this site. I wanted to thank you for your time for this particularly wonderful read!! I definitely savored every little bit of it and i also have you book-marked to see new stuff in your site.

Leave a Reply