Skip to main content


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.


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.
hierarchy button
    1. Icon Button
    2. Button
    3. Icon

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

PropertyValuesDefault value
1, 2, 3, 4, More than 5



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


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

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.

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.