> ## Documentation Index
> Fetch the complete documentation index at: https://www.twicecommerce.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme Editor - Breadcrumbs

> Style the breadcrumb trail that shows a customer's location in your store.

<Frame caption="Theme Editor > Breadcrumbs">
  <img src="https://mintcdn.com/twicecommerce/cJlH0EnJIdVT0BaS/images/theme-editor-breadcrumbs.webp?fit=max&auto=format&n=cJlH0EnJIdVT0BaS&q=85&s=8533c3118b632f56f063af95d5e3df8d" alt="Breadcrumbs settings panel in the theme editor" width="1920" height="1080" data-path="images/theme-editor-breadcrumbs.webp" />
</Frame>

The Breadcrumbs panel controls the colours of the breadcrumb trail shown on collection and listing pages. Found under **Components** in the theme editor. Whether breadcrumbs appear at all is set per page — see the [Listing page](/docs/sales-channels/online-store/theme-editor/pages/listing).

## Colors

| Setting | Type  | Default   | Description                                   |
| ------- | ----- | --------- | --------------------------------------------- |
| Text    | Color | `#374152` | Colour of the inactive breadcrumb links.      |
| Active  | Color | `#111826` | Colour of the current (last) breadcrumb item. |

## CSS variables

<CodeGroup>
  ```css CSS variables theme={null}
  :root {
    --storefront-breadcrumb-text-color: #374152;
    --storefront-breadcrumb-active-color: #111826;
  }
  ```
</CodeGroup>

## Related

<CardGroup cols={2}>
  <Card title="Listing page" icon="tag" href="/docs/sales-channels/online-store/theme-editor/pages/listing">
    Toggle breadcrumbs on the listing page.
  </Card>

  <Card title="Colors" icon="palette" href="/docs/sales-channels/online-store/theme-editor/settings/colors">
    Define the storefront colour palette.
  </Card>
</CardGroup>