# Configuration

***

### Show breadcrumb (Home page)

**Field type**:\
Select

**Available values**:\
• don't show\
• show (default)

**Example value**:\
`don't show`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb"

**Technical name**:\
`twt-breadcrumb-show-home`

***

### Show breadcrumb (CMS shop pages)

**Field type**:\
Select

**Available values**:\
• don't show\
• show (default)

**Example value**:\
`show (default)`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb"

**Technical name**:\
`twt-breadcrumb-show-cms-shop-pages`

***

### Show breadcrumb (CMS landing pages)

**Field type**:\
Select

**Available values**:\
• don't show\
• show (default)

**Example value**:\
`show (default)`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb"

**Technical name**:\
`twt-breadcrumb-show-cms-landing-pages`

***

### Show breadcrumb (CMS listing pages)

**Field type**:\
Select

**Available values**:\
• don't show\
• show (default)

**Example value**:\
`show (default)`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb"

**Technical name**:\
`twt-breadcrumb-show-cms-category-pages`

***

### Show breadcrumb (CMS product pages)

**Field type**:\
Select

**Available values**:\
• don't show\
• show (default)

**Example value**:\
`show (default)`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb"

**Technical name**:\
`twt-breadcrumb-show-cms-product-pages`

***

### Show breadcrumb (Poduct pages)

**Field type**:\
Select

**Available values**:\
• don't show\
• show

**Example value**:\
`show`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb"

**Technical name**:\
`twt-breadcrumb-show-product-detail`

{% hint style="info" %}
Deprecated: This configuration is outdated and will be removed with an upcoming update.
{% endhint %}

## Basic configuration

***

### Layout type

**Field type**:\
Select

**Available values**:\
• Links (default)\
• Links with background colour\
• Buttons

**Example value**:\
`Links (default)`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Basic configuration"

**Technical name**:\
`twt-breadcrumb-style`

{% hint style="info" %}
**Links**\
Links and separators.

**Links with background colour**\
Links and separators with a coloured background.

**Buttons**\
Links as buttons, without separators.
{% endhint %}

***

### Layout type (Separator)

**Field type**:\
Select

**Available values**:\
• Chevron (default)\
• Double chevron\
• Arrow\
• Slash\
• Dot\
• Pipe\
• Dash

**Example value**:\
`Chevron (default)`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Basic configuration"

**Technical name**:\
`twt-breadcrumb-separator-style`

***

### Further information

**Field type**:\
Select

**Available values**:\
• don't show (default)\
• Show home icon\
• Show home link\
• Show text ("You are here:")\
• Show text and home icon\
• Show text and home link

**Example value**:\
`don't show (default)`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Basic configuration"

**Technical name**:\
`twt-breadcrumb-further-information`

{% hint style="info" %}
To edit or translate the text "You are here:" please use the following snippet: twt.breadcrumb.furtherInformation

To edit or translate the text "Home link" please use the following snippet: general.homeLink
{% endhint %}

## Colour configuration

***

### Text colour (Further information)

**Field type**:\
Color picker

**Example value**:\
`#444444`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Colour configuration"

**Technical name**:\
`twt-breadcrumb-text-color`

***

### Link colour

**Field type**:\
Color picker

**Example value**:\
`#444444`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Colour configuration"

**Technical name**:\
`twt-breadcrumb-link-color`

***

### Link colour @active

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Colour configuration"

**Technical name**:\
`twt-breadcrumb-link-active-color`

***

### Icon colour (Separator)

**Field type**:\
Color picker

**Example value**:\
`#444444`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Colour configuration"

**Technical name**:\
`twt-breadcrumb-divider-color`

## Typography

***

### Underline links

**Field type**:\
Select

**Available values**:\
• no\
• yes

**Example value**:\
`no`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Typography"

**Technical name**:\
`twt-breadcrumb-links-underline`

{% hint style="info" %}
Underline breadcrumb links so that clickable entries are clearly differentiated from non-clickable structural pages, thus improving accessibility.

**Note**: This configuration can be overwritten by the accessibility configuration "Underline links" in the Tab "Others" => Block "Accessibility" => Section "Layout".
{% endhint %}

## Breadcrumb container

***

### Container styling

**Field type**:\
Select

**Available values**:\
• no container styling (default)\
• ThemeWare® CMS styling\
• Custom container styling

**Example value**:\
`no container styling (default)`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container"

**Technical name**:\
`twt-breadcrumb-container-styling`

***

### Corner type

**Field type**:\
Select

**Available values**:\
• not rounded\
• rounded corners (default)\
• round corners

**Example value**:\
`rounded corners (default)`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container"

**Technical name**:\
`twt-breadcrumb-container-corner-type`

{% hint style="info" %}
**rounded corners**\
Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")

**round corners**\
Uses a predefined radius for round corners.
{% endhint %}

***

### Width

**Field type**:\
Select

**Available values**:\
• Container-Max-Width (Full-width-boxed)\
• 100% (Full-width)

**Example value**:\
`Container-Max-Width (Full-width-boxed)`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container"

**Technical name**:\
`twt-breadcrumb-width`

{% hint style="info" %}
Set the sizing mode of the breadcrumb container on CMS pages for the basic layout "Full-width-boxed".
{% endhint %}

***

### Margin top

**Field type**:\
Number field

**Example value**:\
`10`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container"

**Technical name**:\
`twt-breadcrumb-margin-top`

{% hint style="info" %}
Set the margin top for the breadcrumb container on CMS pages.
{% endhint %}

***

### Margin bottom

**Field type**:\
Number field

**Example value**:\
`10`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container"

**Technical name**:\
`twt-breadcrumb-margin-bottom`

{% hint style="info" %}
Set the margin bottom for the breadcrumb container on CMS pages.
{% endhint %}

***

### Padding top/bottom

**Field type**:\
Number field

**Example value**:\
`1`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container"

**Technical name**:\
`twt-breadcrumb-padding-top-bottom`

{% hint style="info" %}
Set the padding top/bottom for the breadcrumb container on CMS pages.

If you use a background colour, '15' is a reasonable value.
{% endhint %}

***

### Padding left/right

**Field type**:\
Number field

**Example value**:\
`1`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container"

**Technical name**:\
`twt-breadcrumb-padding-left-right`

{% hint style="info" %}
Set the padding left/right for the breadcrumb container on CMS pages.

If you use a background colour, '20' is a reasonable value.
{% endhint %}

***

### Content alignment

**Field type**:\
Select

**Available values**:\
• align left\
• align center\
• align right

**Example value**:\
`align left`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container"

**Technical name**:\
`twt-breadcrumb-justify-content`

{% hint style="info" %}
Select the desired horizontal alignment.

**left**\
Items are positioned at the beginning of the container.

**right**\
Items are positioned at the end of the container.

**center**\
Items are positioned at the center of the container.

**space-between**\
Items are positioned with space between them.

**space-around**\
Items are positioned with space before, between, and after them.
{% endhint %}

## Custom container styling

***

### Border colour

**Field type**:\
Color picker

**Example value**:\
`rgba(0, 0, 0, 0)`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Custom container styling"

**Technical name**:\
`twt-breadcrumb-border-color`

{% hint style="info" %}
Set the border colour for the breadcrumb container.
{% endhint %}

***

### Border-top colour

**Field type**:\
Color picker

**Example value**:\
`rgba(0, 0, 0, 0)`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Custom container styling"

**Technical name**:\
`twt-breadcrumb-border-top-color`

{% hint style="info" %}
Set the top border colour for the breadcrumb container.

Only used if this colour value differs from the border colour.
{% endhint %}

***

### Border-bottom colour

**Field type**:\
Color picker

**Example value**:\
`rgba(0, 0, 0, 0)`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Custom container styling"

**Technical name**:\
`twt-breadcrumb-border-bottom-color`

{% hint style="info" %}
Set the bottom border colour for the breadcrumb container.

Only used if this colour value differs from the border colour.
{% endhint %}

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`rgba(0, 0, 0, 0)`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Custom container styling"

**Technical name**:\
`twt-breadcrumb-background-color`

{% hint style="info" %}
Set the background colour for the breadcrumb container.
{% endhint %}

## Layout type "Links with background colour"

***

### Corner type

**Field type**:\
Select

**Available values**:\
• not rounded\
• rounded corners\
• round corners

**Example value**:\
`rounded corners`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Layout type "Links with background colour""

**Technical name**:\
`twt-breadcrumb-list-corner-type`

{% hint style="info" %}
**rounded corners**\
Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")

**round corners**\
Uses a predefined radius for round corners.
{% endhint %}

***

### Border colour

**Field type**:\
Color picker

**Example value**:\
`#bcc1c7`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Layout type "Links with background colour""

**Technical name**:\
`twt-breadcrumb-border-color-list`

{% hint style="info" %}
Set the border colour for the breadcrumb.

Used for layout types with background colour.
{% endhint %}

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`#eeeeee`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Layout type "Links with background colour""

**Technical name**:\
`twt-breadcrumb-background-color-list`

{% hint style="info" %}
Set the background colour for the breadcrumb.

Used for layout types with background colour.
{% endhint %}

## Layout type "Buttons"

***

### Show separator

**Field type**:\
Select

**Available values**:\
• no\
• yes

**Example value**:\
`no`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Layout type "Buttons""

**Technical name**:\
`twt-breadcrumb-buttons-separator-show`

{% hint style="info" %}
Select whether the separator icon should be displayed in the breadcrumb.
{% endhint %}

***

### Show border

**Field type**:\
Select

**Available values**:\
• no\
• yes

**Example value**:\
`yes`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Layout type "Buttons""

**Technical name**:\
`twt-breadcrumb-buttons-border-show`

{% hint style="info" %}
Select whether a border should be displayed around the buttons.

You can configure the colour of the border below.
{% endhint %}

***

### Corner type

**Field type**:\
Select

**Available values**:\
• not rounded\
• rounded corners\
• round corners

**Example value**:\
`rounded corners`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Layout type "Buttons""

**Technical name**:\
`twt-breadcrumb-buttons-corner-type`

{% hint style="info" %}
**rounded corners**\
Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")

**round corners**\
Uses a predefined radius for round corners.
{% endhint %}

***

### Border colour

**Field type**:\
Color picker

**Example value**:\
`#bcc1c7`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Layout type "Buttons""

**Technical name**:\
`twt-breadcrumb-buttons-border-color`

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`#eeeeee`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Layout type "Buttons""

**Technical name**:\
`twt-breadcrumb-buttons-background-color`

***

### Border colour @active

**Field type**:\
Color picker

**Example value**:\
`#bcc1c7`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Layout type "Buttons""

**Technical name**:\
`twt-breadcrumb-buttons-border-color-active`

***

### Background colour @active

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Content" => Block "Breadcrumb" => Section "Layout type "Buttons""

**Technical name**:\
`twt-breadcrumb-buttons-background-color-active`


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.themeware.design/manual/content/breadcrumb/configuration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.