Breadcrumb

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.

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.

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.