> 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

Breadcrumbs are an additional navigation, where the travelled path from the home page to the current page is shown. It shows the level depth in which you are.

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

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FC9I9v4xMC4PynxW5uLek%2Fdocs-en-config-elements-breadcrumbs-basic-configuration.webp?alt=media\&token=2fa4771f-1efa-4c9b-855f-9fd78543f0df)

Example:

![Breadcrumbs background-color - no full width](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCG4xkoMVXEQllVF5R9%2F-MHX0gb9DxlTG-P-TVlW%2F-MHX16ajtGi_ZjQmtGEm%2Fdocs-front-elemente-pagination-breadcrumbs.jpg?alt=media\&token=dbc700d4-68e3-42c9-a2ec-61138e03b975)

![Breadcrumbs with background-color - set to full width](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCG4xkoMVXEQllVF5R9%2F-Miz9ZkdfKYuC484kafb%2F-MizAEnXVrdHPEYckI2u%2Fdocs-theme-elemente-breadcrumbs-example.png?alt=media\&token=cc2cac77-b6b6-4f59-a01c-69c8e4ef6f6e)

{% 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](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCG4xkoMVXEQllVF5R9%2F-MHX0gb9DxlTG-P-TVlW%2F-MHX1IsemJZ0hkx9YUL3%2Fdocs-front-elemente-pagination-breadcrumbs-2.png?alt=media\&token=4fc10c0c-a724-4e7f-8746-e8034729317f)