---
url: /docs/components/breadcrumbs/styling.md
---
# 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.

## Styling

::: image-block
![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.](/components/breadcrumbs/breadcrumbs-anatomy.svg)
:::

#### 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

::: image-block
![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.](/components/breadcrumbs/breadcrumbs-code-layout-and-spacing.svg)
:::