> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/en/styling/components/breadcrumbs.md).

# Breadcrumbs

### Colors

\-

### Basic configuration

**Display breadcrumbs (1)** activates or deactivates the breadcrumbs navigation for all pages of your shop.

{% hint style="warning" %}
Disabling has no effect on manually placed breadcrumbs in the shopping experiences.
{% endhint %}

**Alignment (5):** Aligns breadcrumbs horizontally in the provided area.\
**Full width (6):** Breadcrumbs are based on the container width of the selected [basic layout](/en/settings/basic-settings.md). Depending on the basic layout, you can stretch the background and the content to the full width of the browser. In the layout modes `Full-Width-Boxed`, `Boxed` and `Full-Width-Header` the background color extends to the edge of the browser - but not the content.\
**Display home (7):** Show or hide the "Home-link" as first element.\
**Display 'You are here'-text (8):** In addition, an introductory text, **'You are here'** can be displayed. The text was implemented as a text snippet and can be changed in the administration snippet module.\
**Top spacing (9), Bottom spacing (10):** The fields define the distance of the breadcrumbs to the header as well as to the other content of the page.

![](/files/rfqeyV40TfoTBhMlP8sW)

Example:

![Breadcrumbs background-color - no full width](/files/-MHX16ajtGi_ZjQmtGEm)

![Breadcrumbs with background-color - set to full width](/files/-MizAEnXVrdHPEYckI2u)

{% hint style="success" %}
How to put breadcrumbs into the category image, you will learn in the [category image](/en/content/category/category-image.md) description.
{% endhint %}

![Breadcrumbs im Kategorie-Bild](/files/-MHX1IsemJZ0hkx9YUL3)