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


Field type: Color picker

Example value: #999999

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

Technical name: twt-breadcrumb-link-color


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


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.


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

Last updated

Logo

© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH