Breadcrumb
Updated:
March 29, 2020
Bread crumb is a visual indication of the location you are within the app. Breadcrumb make it easy to navigate to higher-level pages.
Variations
Bread crumb comes in two different variations, with and without icon.


Breadcrumb
The standard component that comes without icon are the most used.

Breadcrumb
The standard component that comes without icon are the most used.


Breadcrumb with icon
This component has both icon and arrow

Breadcrumb with icon
This component has both icon and arrow
Component building blocks
The next steps explains how breadcrumb are built up and styled.
Anatomy
Breadcrumbs are built up by a container, label, arrow, and an optional icon associated with the label.


Colors and styles
Breadcrumb is displayed in a normal style.




Typography and icons
The label tells you about your location in the application and makes it easy to access other parts.


Specs
This component is built up by a oval slider and icons.

