Design Breadcrumb Web Component: All you need to know — Ep.2

What are breadcrumbs in design?

5 min readOct 31, 2022

A breadcrumb is a secondary navigation tool used in web pages and web applications. It aids users in recognizing their current location on a website. The story of Hansel and Gretel, where the children use breadcrumbs to create a trail to return home, is where the term “breadcrumb” originates. The use of breadcrumbs in designs similarly aids users in returning to the landing page. With breadcrumbs, you can simply find your way back or go back a few steps and start again if you end yourself on a page you don’t want to be on.

Source: Breadcrumb by Carbon Design System

Anatomy

Page link: These are the web pages that serve as links to the parent-level pages.
Separators: This helps distinguish the pages.

Contents of a breadcrumb

Main content

The page links are the breadcrumb’s only and primary content. Each page link must be brief and made clearly evident to the user which page it refers to.
The highest level parent page should be the breadcrumb’s starting point (first link), and when the breadcrumb progresses, it should move on to the other pages accordingly.
By default, the breadcrumb will not show the current page.

Overflow menu

Space becomes a concern when a breadcrumb is utilized on a website with a lot of pages arranged hierarchically. When this happens, just the top and last two pages should be displayed in a breadcrumb, and the other pages should be merged into an overflow menu. There should never be a second line in a breadcrumb.

Where to place breadcrumbs in a design?

Breadcrumbs should be positioned above the page’s content because they serve as a secondary navigation menu. According to user research, the breadcrumb should be placed to the left of the page, above the title, and beneath the navigation bar and header.

Source: How to use breadcrumbs on websites: Best practices and types of breadcrumb navigation by Nick Babich

Types of breadcrumbs

Location-based breadcrumb

These breadcrumbs indicate the user’s current position in the website hierarchy. These breadcrumbs are typically used on websites with more than two levels of hierarchy.

Path-bases breadcrumb

This breadcrumb displays the user’s journey to a specific page, as a result, it can be referred to as a dynamic breadcrumb because it changes according to the path taken by the user.

Attribute-based breadcrumb

This breadcrumb displays the page properties that a user has chosen. On an e-commerce site, for instance, the breadcrumb trail might show two attributes, such as black and phone covers, that the user has chosen.

Source: Breadcrumbs In Web Design: Examples And Best Practices by Jacob Gube

When to use breadcrumbs?

Breadcrumbs are good for websites with a large volume of content structured in a multi-level hierarchy. Ecommerce sites with a wide range of products organized into categories are an ideal example where breadcrumbs can be employed.

When not to use breadcrumbs?

In order to avoid excessive clutter, breadcrumbs should never be utilized on websites with single-level navigation.

It can be difficult to determine whether a website needs a breadcrumb, thus it’s best to create a site map or information architecture diagram that would illustrate the website’s navigational structure. Afterward, this diagram can be examined to determine whether or not a breadcrumb would enhance the user experience of the website.

Source: What is Breadcrumb & How It Eases Navigation? Explained with Examples by Sharan Suresh

Accessibility

Keyboard interaction

Each page link in the breadcrumb can be accessed using the keyboard’s tab key and activated with the enter key to improving accessibility.

When a breadcrumb gets cut off and turned into an overflow menu. The space or the enter key can be used to activate any of the tab-ordered menus. The menu’s first item is focused when it is opened. The focus can be switched between the menus using the up and down arrows. A focused menu can be opened with space or enter and the menu is collapsed when the ESC key is pressed, and the menu button now has focus.

Source: The Role of Breadcrumbs in Web Design & UX by Audioeye

Mouse interaction

With a mouse click, users can activate an item on the breadcrumb. The separators between page links aren’t clickable.

Real-world examples where breadcrumbs are used

Nasa

E-bay

Amazon

Bed Bath & Beyond

Macy’s

Nike

Solent University Southampton

Conclusion

Users can more easily navigate websites when there are breadcrumbs. It is among the numerous factors that improve user experience. Whether you decide to include a breadcrumb in your website or not solely depends on how your website is designed. Despite all of a breadcrumb’s advantages, it should be remembered that it is merely a secondary navigation menu and shouldn’t take the place of the site’s main navigation.