hardclient scroll to top
hardclient telegram
Подписывайтесь на мой новый канал: рассказываю об интересных фичах из мира e-commerce каждый день



Working with breadcrumbs

UX/UI best practices in e-commerce
Breadcrumbs are small links on webpages that make it easier for customers to navigate the website. It would seem that what could be easier? These are just links. But there are many factors which separate the "tasty" and effective breadcrumbs from the "stale" and useless ones. In this article, we'll break breadcrumbs down into atoms. 83 guidelines with examples.

If you have any ideas for additions, be sure to contact me, I'll be happy to discuss. Sign up for new articles on Telegram and share this post with your friends and colleagues.
Partner at Experience.Partners
Author of HardClient.com
For convenience, I have divided the article into blocks. This way it will be easier to comprehend. Each of the blocks contains a detailed checklist.
29 детальных чек-листов по e-commerce доступны в моем Telegram.


Available on product pages

Breadcrumbs allow to quickly return to the listing and continue searching for products. These also make it easier to navigate if the customer has not landed on the product page through the listing.

Available in product listing

If a customer is on a subcategory page, breadcrumbs will help them quickly expand their product range by going to a higher-level category.

Not visible in navigation

If your catalog has only 3 levels of categories, displaying breadcrumbs inside it is unnecessary: client will be able to see the full hierarchy anyway.

At the top left of the page

Place the breadcrumbs where most customers expect to see these - at the top left of the page.

Without non-standard placement

Placing breadcrumbs in unusual locations, we run a risk that these simply will be harder to see, which will make the navigation more difficult.

Not in the footer

A special case of non-standard placement of breadcrumbs - the footer of the site. The chances that a client will not notice these at quite high.

Next to the navigation bar

Place related elements close to each other. Breadcrumbs located next to the navigation bar will make it easier for a user to switch between sections.

Within the first impression frame

On mobile devices, make the breadcrumbs accessible within the first screen, so that a user does not have to scroll to find these.

On a uniform contrasting background

If possible, place the breadcrumbs on a uniform contrasting background, so that the client does not experience any inconvenience reading these.

Not next to the banners

First, these will be much less visible in contrast. Second, there is a risk of spreading banner blindness to the crumbs.

Not visible if structure is flat

If the structure of the catalogue has only 1-2 levels and the return to the category or home page takes just one click, there is no need for breadcrumbs.


From the general to particular

The breadcrumbs should be structured in a way that level of details grows when moving left to right.

Supplementing the main navigation

Breadcrumbs should not completely replace the main navigation in the page header, but rather play supplementary role, improving the customer experience.

Hierarchy direction

In countries where reading from left to right is widespread, arrange the categories from left to right, from general to particular.

Canonical hierarchy

If a product is included in multiple hierarchies, use the most common and most frequently used one to display the breadcrumbs.

Product categories

It is more convenient, if the structure of breadcrumbs includes product categories, rather than just brand names.

Without multiple structures

In case of a polyhierarchy do not display multiple breadcrumbs with different structures. This will only overload the interface and make navigation more difficult.

Start with the home page

If you have a lot of valuable and interesting content on your home page, you shouldn't cut it in breadcrumbs: let the customer go to it in 1 click.

Contains the brand name

Even if a user landed on a product page from broad listing, add a brand name to the breadcrumb structure so that they can view other brand products in 1 click.

Not too many levels

Many levels in the directory structure not only complicate navigation, but also make breadcrumbs visually too bulky.

The structure is not too flat

However, if there is a catalog structure, do not remove it completely from the breadcrumbs, leaving only the home page and the product page. Otherwise these will become useless.

Not a search history

Avoid placing search history in breadcrumbs. There is a "back" button in the browser to return to previous pages. Most of users are familiar with it.

The "back" link next to the sections

Sometimes the main breadcrumb structure can also be supplemented with the "back" link, which helps to quickly return to the product listing with active filters having been saved.

The "back" link is visually different

Since the functions of the "back" link and the links to sections are different (search history vs. category hierarchy), make these visually different.

Не только ссылка «назад»

However, do not replace breadcrumbs completely with a "back" link: it significantly reduces the speed and convenience of navigation for users.

Links to adjacent sections

When a user hovers over a section in crumbs, adjacent sections can be displayed in the dropdown format. This will make it easier to switch between categories.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram


Visually secondary

Since breadcrumbs are not the main, but the auxiliary element of the page, these can be made them secondary.

Fit within a single line

If possible, design the breadcrumbs so that these do not take up more than one line. This will help to avoid visual overloading of the interface.

Scroll on hover

If the breadcrumbs still do not fit into 1 line, an interesting solution would be to scroll these automatically on hover:

No unnecessary text

If possible, when moving from category to brand, don't duplicate the category name. Users will comprehend the wording, while the size of the crumbs will be reduced.

Without excessive hierarchy

In some cases, extra technical categories are used that have no extra value for a user, and duplicate the text of the top-level categories. This example is not a good way to do it:

Without excessive punctuation

There is no point in highlighting the current category in breadcrumbs with quotes. Especially if there are no quotes in the title.

Without the number of products

The number of products can be placed in the filters or as part of the header within the listing. But it doesn't look quite appropriate in the breadcrumbs and makes these visually overloaded.

Without duplicating cues

Remove duplicating contextual cues from breadcrumbs, as these do not provide any extra value to users

Abbreviated product names

In some cases the name of the product in the breadcrumbs is reduced to only the key text, while the meaning remains

The categories are clear

The names of the categories should be clear to the target audience and should not be ambiguous.

Hiding the breadcrumbs?

If the breadcrumbs string is too long, you can hide it by default with a tooltip. But still, this would not be an optimal solution, as it treats the symptom rather than the root cause.


Make the links in the breadcrumbs contrast enough, so that these are easy to read. Contrast ratio should be at 4.5:1.

The text is not too small

Don't torture your clients - don't make the breadcrumbs text too small. It should be easy to read, even if the person has poor eyesight.

The format is uniform

Make breadcrumbs look uniformly on all pages of the site. Changing the format of the breadcrumbs may come as a surprise to a user.

Consistency of case

Make breadcrumbs case consistent. There is no point in highlighting certain categories with CAPS LOCK without any reason, while others are in sentence case.

Without link formatting on desktop

Unlike links in the text, in the desktop version the breadcrumbs links can be not underlined by default. Their function is clear to the majority of users anyway.

Without the dotted line

Avoid dashed underlines in the design of links, as this is a fairly common pattern of displaying text with context clues.

Current page vs. sections

Make the current page visually distinct from the sections within the breadcrumbs to highlight its functional difference.

Home page variations

Instead of "Home" the link text can be implemented in a less standard way: for example, highlighting the name of the store. The main thing is to ensure that the meaning is clear.

Home link with icon

The link to the home page can be provided with an appropriate icon in the form of a house, which is quite intuitive for the majority of users.

Category icons

Category names in the breadcrumbs can be supplemented with relevant icons. This will help improve the perception of the information and can make the breadcrumbs more catchy.

Links respond to hovering

Make all active links in the breadcrumbs interactive, so that they responded to hover and provided visual feedback.

Current page reaction to hover

Since the breadcrumb of the current page is not clickable, its visual response to hovering can mislead a user.

Cursor on hover

The cursor should become clickable when a user hovers is over the links. This will additionally highlight the fact that these are active.


Are implemented

Direct links to adjacent sections will simplify navigation, as a user does not have to go to the top level section and select another subcategory separately.

Subcategories in the dropdown?

In some cases the dropdown contains subsections instead of adjacent sections. What do you think of this? is it better or worse than the previous point? Drop me a line in the comments.

Dropdown is visible on hover

It's better to open the list when you hover over the link. Otherwise there is a risk of mistakenly clicking on the link itself instead of the dropdown arrow.