Breadcrumbs indicate the path of a record and help the users to navigate back to the parent record.


Breadcrumbs help users become aware of their current location with respect to the rest of the product/application. Breadcrumbs show the hierarchical progress from the highest entity level to the lowest.

As helpful as they are, breadcrumbs should never replace the main navigation on a page.


Since the breadcrumb component is made up of the subtle link, you can change its state as per the requirement. Available states are - Default, Hover, Active, Focused, Disabled.

States of breadcrumb


breadcrumb structure

Height24 px
Max width160 px


PropertyValue(s)Default value


Showing more than 4 levels

By default, breadcrumbs can show upto 4 levels of hierarchy. For cases where there are more than 4 levels, only first and last breadcrumb is shown. The rest levels can be seen on clicking the menu button present in the middle.

Seeing the entire label

The max-width of the label is 160px, beyond that the text will truncate with ’…‘. The users can see the entire label on hover inside a tooltip.

Entire label visible on hover inside a tooltip Entire label visible on hover inside a tooltip