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.
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e5df3d6f31baeefc15174dd_Artboard%20Copy.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e5df3d6f31baeefc15174dd_Artboard%20Copy.webp)
Breadcrumb
The standard component that comes without icon are the most used.
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e5df3d6f31baeefc15174dd_Artboard%20Copy.webp)
Breadcrumb
The standard component that comes without icon are the most used.
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e5df3dfcfe748eae8d8f737_Artboard.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e5df3dfcfe748eae8d8f737_Artboard.webp)
Breadcrumb with icon
This component has both icon and arrow
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e5df3dfcfe748eae8d8f737_Artboard.webp)
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.
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e545326834db2a0a4bbf5f5_Specs.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e545856e23ce33d1423814a_Text.webp)
Colors and styles
Breadcrumb is displayed in a normal style.
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e5454ed7ccebc9d13c2c84a_Anatomy.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e5bdf2b0ee9236d74137a07_Day.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e5bde93b655a854550fe53a_Dusk.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e5bdea4150314e952a282e7_Night.webp)
Typography and icons
The label tells you about your location in the application and makes it easy to access other parts.
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e54567221b857fb0282db32_Color.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e545677cb0e4667bcbc046f_Day.webp)
Specs
This component is built up by a oval slider and icons.
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e5caaf7fa1b9b83d9295ba1_Measure.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e5caafbd9884c8e8faf7701_Measure%202.webp)