• UI/UX
  • What are breadcrumbs?

    Sébastien Graf

    Sébastien Graf

    12 July 2022

    What are breadcrumbs?

    What is a breadcrumb

    Sounds yummy? Yes, it is!

    A breadcrumb is a type of navigation that shows the user where they stand on the website.

    The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. Like in the tale, breadcrumbs in real-world applications offer users a way to get back to their original landing point.

    The stakes of the breadcrumb for Internet users

    From the users' point of view, the breadcrumb is interesting to fluidify navigation. It allows reducing the number of clicks to find a page, and to go back in the navigation very easily without having to fiddle with the URL.

    Simple and pleasant navigation improves the user experience, and thus the satisfaction and the loyalty of the Internet users.

    SEO benefits

    • More crawling

    The added links generated by the breadcrumbs help engine crawlers look for the site's hierarchy. This can be especially important for lower-level links, which can not be reached with a high enough priority by the crawlers.

    • Better indexing

    The breadcrumb trail is one of the elements of the SEO strategy that allows the website to be well positioned on the search engine results pages. Thanks to a logical and organized structure, materialized by a breadcrumb trail using thoughtful keywords, each search engine manages to understand the link between each page, and the overall functioning of the site. This "ease" of understanding is a major asset for the indexation of all the pages of the site.

    Conversion rate

    Since this trail helps to guide the user in their research, it encourages them to move easily from page to page and use the internal navigation, therefore the conversion rate goes up.

    The better the conversion rate, the more Google's robots move the site up in the SERP (search engine research page).

    Breadcrumbs_Slider.png

    3 types of breadcrumbs

    Here are the three most common forms used on websites:

    • Location based

    Location-based breadcrumbs show the user where they are in the website’s hierarchy. They are typically used for navigation schemes that have multiple levels (usually more than two levels). The one I'm using on this website is location-based and goes three levels deep.

    Attribute-based

    Attribute-based breadcrumb trails display the attributes of a particular page. For example, in Newegg, breadcrumb trails show the attributes of the items displayed on a particular page:

    image.png

    Path-based

    Path-based breadcrumb trails show users the steps they’ve taken to arrive at a particular page. Path-based breadcrumbs are dynamic in that they display the pages the user has visited before arriving on the current page.

    Where is the best place to have it?

    In short: better at the top!

    Navigation bars are usually placed at the very top of a website, and because breadcrumbs work as secondary navigation, it is more common and natural to place them above your content. The Nielsen Norman Group conducted tests and found that users expect breadcrumbs at the top of the page.

    A good placement for breadcrumbs is sandwiched between the main navigation bar and the content.

    Sébastien Graf
    Author

    Sébastien Graf

    Hey, I'm Seb, a front-end web developer who likes everything tech related.

    Post a comment

    Recent Posts