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

Deprecated: This configuration is outdated and will be removed with an upcoming update.

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

Links Links and separators.

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

Buttons Links as buttons, without separators.

---

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

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

Colour configuration

---

Text colour (Further information)

Field type: Color picker

Example value: #999999

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: #999999

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: #999999

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

Technical name: twt-breadcrumb-divider-color

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

rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")

round corners Uses a predefined radius for round corners.

---

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

Set the sizing mode of the breadcrumb container on CMS pages for the basic layout "Full-width-boxed".

---

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

Set the margin top for the breadcrumb container on CMS pages.

---

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

Set the margin bottom for the breadcrumb container on CMS pages.

---

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

Set the padding top/bottom for the breadcrumb container on CMS pages.

If you use a background colour, '15' is a reasonable value.

---

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

Set the padding left/right for the breadcrumb container on CMS pages.

If you use a background colour, '20' is a reasonable value.

---

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

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.

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

Set the border colour for the breadcrumb container.

---

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

Set the top border colour for the breadcrumb container.

Only used if this colour value differs from the border colour.

---

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

Set the bottom border colour for the breadcrumb container.

Only used if this colour value differs from the border colour.

---

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

Set the background colour for the breadcrumb container.

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

rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")

round corners Uses a predefined radius for round corners.

---

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

Set the border colour for the breadcrumb.

Used for layout types with background colour.

---

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

Set the background colour for the breadcrumb.

Used for layout types with background colour.

Layout type "Buttons"

---

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

rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")

round corners Uses a predefined radius for round corners.

---

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