Breadcrumb

Usage

When to use
Breadcrumbs are a navigational aid that show users their current location in the information architecture. They allow users to skip to different levels easily, and are helpful in complex site hierarchies with more than 2 levels.
Content card image
Desktop breadcrumb
Place the breadcrumb at the top of the page, right below the global navigation and above the main content area. Exclude the current page title since the main title of the current page already sits closely to the breadcrumb. Represent the full navigational path leading up to this page, including its parent and ancestors.
Content card image
Mobile breadcrumb
Place the breadcrumb at the top of the page, right below the global navigation and above the main content area. Due to the limited space, use the parent page link as the mobile breadcrumb.
How best to use
Content card image
Don't
Don't include Home in the breadcrumb if a Home tab is already in the primary navigation.
Content card image
Don't
Avoid disabled breadcrumb links. Make sure that all breadcrumb links lead to the corresponding pages.
Content card image
Caution
Don't use the full page title in the breadcrumb if it's too long or repetitive. However, when shortening the page title for the breadcrumb, make sure it captures the right meaning so there's no confusion.
Content card image
Don't
Don't display too many page levels as it's difficult to digest. Manage the number by having a well-organised information architecture.
Content card image
Don't
Don't wrap breadcrumbs or truncate them. Shorten the page title or plan the information architecture properly.
When not to use
Don't use as primary navigation
The breadcrumb is supposed to be a secondary navigational pattern and should never replace the primary navigation.
⁠
Don't use for sites with flat hierarchies
There's no need to use a breadcrumb when the product's navigation doesn't go beyond 2 levels, or when it has a linear structure, because a breadcrumb will be redundant.
⁠
Don't use breadcrumbs to present a flow
Breadcrumbs are not suitable when users need to move through a series of steps as part of a flow.