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.
|4 px, 4 px|
|Max width||160 px|
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.Entire label visible on hover inside a tooltip