Breadcrumb trail - design pattern

Mandatory on standard pages

A horizontal series of links known as a “breadcrumb trail” gives people a sense of where they are in relation to the site structure.

The links in the breadcrumb trail are not intended to reflect the path by which the visitor arrived at the current location. Rather, the links always represent the location of the current page as it stands in relation to the site’s user navigation model.

Breadcrumb trail
Breadcrumb trail appears on the lower left of the header


The purpose of the breadcrumb trail is to reinforce a visitor’s current location in the user navigation model. It indicates the location of the current page in relation to its parent in the site structure. It also provides a simple method to navigate to higher levels in the site structure.

When to use the breadcrumb trail

The breadcrumb trail is mandatory on all pages, except campaign pages and transactional pages. For more information, go to the Mandatory elements of the design system.

How to implement the breadcrumb trail

  • The first item is always “”, which always links to the home page in the current language
  • The current page is never displayed at the end of the breadcrumb trail
  • Use a greater-than sign (>) to separate levels
  • Longer page titles are to be shortened where possible to reduce the space required to display the trail

Each page or section name on the site should be associated with a shortened version of the name, for the purposes of breadcrumb and other navigation systems.

For example, when on the “Planning a business” page in the Business and industry theme, the breadcrumb trail will be:   >   Business   >   Starting a business

Example breadcrumb trail links

The breadcrumb trail always begins with "". Proper usage for different locations on is as follows:

Theme pages
First-level topic pages   >   [Parent theme]
Mid-level topic pages    >   [Parent theme]    >   [Parent topic]
Institutional profile pages
Organizational profile pages
Partnering and collaborative arrangement profile pages
Services    >   [Parent theme]    >   [Parent topic]
Search engine results pages    >   Search

Did you find what you were looking for?

What was wrong?

You will not receive a reply. Telephone numbers and email addresses will be removed.
Maximum 300 characters

Thank you for your feedback

Date modified: