Breadcrumbs are secondary navigation, to indicate where the user is, and how to go back.

A user must always be able to see where they are within your website, and easily traverse back through the hierarchy of categories and pages.

Just like fairytales, breadcrumb trails help the users find their way home.

Do we even need them?

It’s best practice to avoid multiple navigation menus. First attempt to make your primary navigation display the full path to the current article.

However, as websites become more complex and the volume of categories, subcategories and articles increases, it’s not always possible to include every category and page within the primary navigation, because of limited space.

Where am I?
How do I go back?

This is where breadcrumbs are useful as a secondary navigation, to indicate where the user is within a website and help them navigate back.

General rules

• If the primary navigation doesn’t show the full path of the current page within your site, always include secondary breadcrumb links.
• Located at the top of the page, generally underneath the page heading.
• Usually traverse back to the Home button, or the parent category.
• Best displayed with smaller plain text to avoid drawing attention.

Things to avoid

Avoid multiple lines, truncate long text with ellipsis.

As breadcrumbs are secondary navigation items, we should avoid drawing attention through excessive use of colour or visual effects.