Breadcrumb

Breadcrumbs visually show the platform’s structural hierarchy, helping users to understand the path they’ve taken, allowing them to navigate easily.

When to use

Nested structure

Use breadcrumbs when a platform has a complex structure composed of nested links to allow users to better navigate and understand it.

Nested structure

Use breadcrumbs when a platform has a complex structure composed of nested links to allow users to better navigate and understand it.

Promote wayfinding

Breadcrumbs are effective for long navigation paths where users may traverse multiple levels or categories. It helps users maintain orientation and context, especially when navigating through deep hierarchies or extensive content.

Promote wayfinding

When to avoid

Shallow navigation

If the platform/application has only a few levels or pages, breadcrumbs may not be necessary and users can rely on primary navigation menus or buttons

Shallow navigation

If the platform/application has only a few levels or pages, breadcrumbs may not be necessary and users can rely on primary navigation menus or buttons

Redundant navigation

Avoid using where the navigation path is clearly indicated by other UI elements or contextual clues

Redundant navigation

Avoid using where the navigation path is clearly indicated by other UI elements or contextual clues

Specifications

Content

Label only

Use labels only for the standard navigational trail to maintain the lightweight breadcrumb pattern and ensure high scannability.

Icon + Label

Use this to reinforce the section that the label refers to.

Icon only

Use this only for highly compact interfaces where the icon is universally understood (like a Home/Product link) and no space for a label exists.

Mixed

Mix and match properties to display the clickable element with only an icon, and the non-clickable element with an icon and a label.

Anatomy

Icon

Add an icon to a breadcrumb link only when it provides immediate and unambiguous meaning, helping users to quickly scan and identify their place in the navigation trail.

Interactive

Directs user to a previous page in the breadcrumb trail.

Read-only

Helps represent the current page the user is on.

Value

Breadcrumb