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.

Component elements
1
Container
2
Stepper Container
3
Label
4
Stepper Container

Colors and styles

Breadcrumb is displayed in a normal style.

Element
Color / Style name
1
Container
This is some text inside of a div block.
2
Stepper Container
This is some text inside of a div block.
3
Label
This is some text inside of a div block.
Element
Color / Style name
1
Container
This is some text inside of a div block.
This is some text inside of a div block.
2
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
3
Label
This is some text inside of a div block.
This is some text inside of a div block.
Element
Color / Style name
1
Container
This is some text inside of a div block.
This is some text inside of a div block.
2
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
3
Label
This is some text inside of a div block.
This is some text inside of a div block.
Element
Color / Style name
1
Container
This is some text inside of a div block.
This is some text inside of a div block.
2
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
3
Label
This is some text inside of a div block.
This is some text inside of a div block.

Typography and icons

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

Element
Text style
1
Stepper Container
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Button
2
Label
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Button
3
Stepper Container
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Button
Element
Text style
1
Stepper Container
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Button
2
Label
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Button
3
Stepper Container
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Button

Specs

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

1
Component measures
2
Spacing
3
Border sizes
1
Component measures
2
Spacing
3
Border sizes

States

No items found.
Submit feedback