eCommerce Web Design: Breadcrumb Navigation

TMO Group TMO Group

Breadcrumb navigation is usually used in many eCommerce websites. It allows users to keep track of their locations as well as provide links back to each previous page.

The name of breadcrumb navigation comes from a fairy tale. Two children lost their way in forest. In order to find their way they already walk, they leave behind some bread crumbs as marks. As a result, breadcrumb navigation in a website can also help users know their location and quickly find specific products.

The question comes out. A breadcrumb navigation likes a guiding star in thousands of eCommerce landing pages. How to make it for a better user experience and make user of whatever it could.

1. Avoid similar keywords

Each category should corresponds to one keyword. It can reduce confusion. Taobao has a clear navigation for that.

Taobao navigation

From all category to womenswear, and then to down jackets. No similar categories. It makes user easy to find where they are and respond. If “life electrical equipment” is the sub-category of “family electrical equipment “, we will probably confused.

2 Quantitative display

Generally speaking, there are two objectives for users looking at the breadcrumb navigation. One is go back to the previous category. The other one is to see more sub categories, which usually neglected by many eCommerce websites. The solution is to show the products quantity of all sub categories.

Yougou brandcrumb navigation

Yougou is a famous eCommerce website in China. Its navigation gives the quantity of each brands. This details can help people to choose brands that they like in a certain degree.

3. Directional symbol

Although the breadcrumb navigation is necessary for a website, it shouldn’t be eye-catching. The color mainly in black or grey, and the symbol between two categories could be an arrow.

In my view, Amazon’s symbol of breadcrumb navigation is not clear. “:” sometimes means including. Not as good as the symbol “>”.


Amazon breadcrumb navigation

4. Reduce interference

The design of  breadcrumb navigation should follows a rule:  It shouldn’t distract users. Normally,  it is under the main navigation. The characters color can be grey and use transparent background.

5. Control the hierarchy

Breadcrumb navigation is not only for user experience, but also for SEO. Most of pages should be reached within 4 clicks.

Suning breadcrumb navigation

Suning ( has a clear breadcrumb navigation. Although it has many kinds of products, it has another navigation under the main one. It helps user easily to know where they are and they can single or multiple choose categories or brands which they like.


From my perspective, breadcrumb navigation is a necessary module. One hand, it can boost the user experience. On the other hand, it is good for SEO and can convert more visitors as well. Many elements in a website can be shown in innovative ways, except breadcrumb navigation. It always meet users need by using the simplest way.

TMO Group is a technology company in China providing eCommerce website development. More details please send us your inquiry!


Subscribe to our newsletter

News of the eCommerce world, best practices to use in your eCommerce platform, insights and analytics of Chinese and South East Asian eCommerce markets - all that and much more in our monthly newsletter.