Breadcrumb

Angular

See content

Blazor

See content

Breadcrumbs are a secondary trail of navigation for the user.

Usage

Breadcrumbs help the user navigate a website or an app by showing the path they have followed to access the page. Breadcrumbs show users their current location in the site, enabling them to quickly move up to a parent page or trace the path back to their original landing point.

When to use

Use breadcrumbs on systems with hierarchies deeper than two levels, to supplement the global navigation bar and clarify the structure of the site or app.  

Types

The type should be consistent in the product.

Location based

It bases on the site hierarchy. It shows to the user where he is on this hierarchy. It is the most used type of breadcrumb.

Path based

It is dynamically generated. It shows the path the user uses to go to the actual page.

Attribute based

It bases on the criteria selected by the user to find a product.

Anatomy

The user can click on the breadcrumb to navigate.

  1. Home: Link to the first page of the website/application.

  2. Link: The name of the parent page or the previous page and a link to it.

  3. Separator: A simple symbol to the separate the different links of the breadcrumb.

  4. Active page: The page where the user is. There is no link on this page and this is the last element of the breadcrumb.

Placement

The breadcrumb is on the top left of the page, above the main content of the page and under the header and the main navigation elements.

Do's & Don'ts

  • Don’t replace the main navigation with a breadcrumb.

  • Don’t use breadcrumb to show progress through a process, use a stepper component instead.

  • If the breadcrumb does not feet on one row, you can collapse it.

  • When the user will click on the “…”, the breadcrumb will be showing the entire breadcrumb trail.

  • If a page has multiple parents, only show the main one in the breadcrumb.

  • On mobile, only show the last page of the breadcrumb to have only one row in the breadcrumb trail.

  • If the link has only an icon, add an aria-label and/or a title with the name of the target page.

  • The type, weight or size of the active page, in addition to the color, must be different from the links in order to clearly differentiate them and better understand that it is the active page.

Do

Use breadcrumbs to demonstrate hierarchical structure and current location. This hierarchy should be directly be seen at first glance.

Don’t

Do not put the same format on the last breadcrumb title relative to the path. It is important to point out the current position.

Do

Use breadcrumbs as a component to show hierarchy and is a key to navigation. It gives context for the user inside a website or a an app.

Don’t

Do not use breadcrumbs for other interaction than navigation. They can’t display such as filters.

Do

Keep short your breadcrumbs menu, try to use key words for being concise.

Don’t

Don’t truncate multiple breadcrumbs item titles. It won’t be easy for user to understand the title meanings otherelse.

Do

If you have a long breadcrumbs title, a truncation can be done in the middle of the title. Moreover, these one should be only placed in one line

Don’t

Do not put the breadcrumbs title on two lines.

Do

Use breadcrumbs starting from 3 hierarchy levels in a website. It will help the user to give location and navigation context to the users.

Don’t

Do not use breadcrumbs when there is only 2 hierarchy levels because this is not necessary for location & navigation.

Do

Use breadcrumbs to show the structure within an app or website.

Don’t

Do not use breadcrumbs as a unique navigation use. Use a stepper instead. Breadcrumbs are a chain of links used on websites with hierarchical navigation.

Do

Breadcrumbs are usually a part of the content header in the main region. It is placed above the page title to ensure at the user its localisation.

Don’t

Breadcrumbs shouldn’t be placed after the page title, for a better location to the user.

Log in

Log in with Michelin ID

To connect to the Design System, I will need:

  • A Michelin ID (e.g. F012345)
  • Double authentification (with the NetIQ application or by SMS)
  • A password associated with your Michelin ID

I don’t have a Michelin ID and/or email

In order to connect to the Design System, I need:

  • A user ID or an email
  • A password

If you have never accessed the Design System, you can request access via this link.