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
Last updated
