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