Breadcrumbs

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

Usage
Code

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.


Structure

  • Breadcrumbs are made up of subtle link component. In addition to the label, there is always a trailing forward slash.
  • 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.
  • 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.

  • Usage


    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.