Breadcrumbs

A element allow to displays the user's current location within a website or application. Breadcrumbs use a hierarchical structure to show the path taken and provide a way to navigate back to previous levels.

Get Tetrisly for Figma

Install Tetrisly for React

Variants

The Breadcrumbs component is made up of three other components:

• Icon Button, as an indicator of the Homepage,
• Button, as a breadcrumbs item,
• Icon, as a separator between breadcrumbs items.

1. 1. Icon Button
   2. Button
   3. Icon

Items

Premade item variants are optimized templates that enhance user experience, promote best practices, and minimize implementation errors.

Property	Values	Default value
Items	1, 2, 3, 4, More than 5	2

Behaviors

Overflow

Sometimes Breadcrumbs have many items and may need to be truncated when there isn't enough space to display all levels of the breadcrumb list. In this case use 'More than 5’ option.

Best Practices

Don’t overuse the Badges

When items in a list are truncated and the label words are still too big for the space, shorten the words with three dots (...). Usually, we shorten it at the end of the title.

Do

Don't

In this case (truncated text) use a tooltip to display the full title when the user hovers, keyboard focuses, or single-taps on mobile.

Do

Truncating

Don't truncate all breadcrumb labels at once. In this case, display only the current page with the possibility to navigate to previous pages.

Do

Don't

Using icons in Breadcumbs

Don't use icons within the labels for breadcrumbs. Since breadcrumb labels are horizontally distributed, icons will overwhelm and disturb readability.

Do

Use breadcrumbs to show hierarchy

Breadcrumbs should have form of navigating a linear hierarchy. This is important because they help users understand where they are and how they got there.

They should not be used for other interactions, like showing filters or navigation.