COMPONENTS

Breadcrumbs

Breadcrumbs are used to note the path of a record and help the user to navigate back to the parent.

Usage
Code

Breadcrumbs help users become aware of their current location with respect to the rest of the website or application. By using the page hierarchy, breadcrumbs are easily understood by users, take up very little space on the page, and facilitate discovery. As helpful as they are, breadcrumbs should never replace the main navigation on a page.

Breadcrumbs show the hierarchical progress from the highest entity level to the lowest, one step at a time. This typically starts with the product landing page and goes to the current page or content.


Types


Default

The default variants come for use up to 4 levels of hierarchy. There is always a trailing slash.

  • The max-width of the label is 160px, beyond that the text will truncate with … The user can see the entire label on a tooltip on hover.
  • Since the breadcrumb component is made up of the Subtle Link button, you can change its state as per the requirement. Available states are - Default, Hover, Active, Focused, Disabled.
  • More than 4 levels

    If it ever comes down to using breadcrumbs for more than 4 levels, use the component More than 4 levels. It has a tiny transparent icon button in the middle to show the truncation. Users can click on this button to get a menu that will display the truncated levels.