Skip to content

Breadcrumbs - Styling

Breadcrumbs show users their current location relative to the information architecture and enable them to quickly move up to a parent level or previous step.

ElementsreleasedReactreleasedVuereleased

Styling

Example showing an annotated example of a breadcrumbs component. There are three annotations: 1. highlighting the page name, 2. Highlighting the separator,  and 3. highlighting the current page.

1. Page name

Text style: Body
Color: semantic/color/text/default

2. Separator

Text style: Body
Color: semantic/color/text/default

3. Current page

Text style: Body
Color: semantic/color/text/link

Layout and spacing

Example showing an annotated example of a breadcrumbs component. There are three annotations: 1. highlighting the page name, 2. Highlighting the separator,  and 3. highlighting the current page.