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
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
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
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
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
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
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
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
Field type: Color picker
Example value:
#444444
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Colour configuration"
Technical name:
twt-breadcrumb-text-color
Field type: Color picker
Example value:
#444444
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
Field type: Color picker
Example value:
#444444
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Colour configuration"
Technical name:
twt-breadcrumb-divider-color
Field type: Color picker
Example value:
#bcc1c7
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Colour configuration"
Technical name:
twt-breadcrumb-buttons-border-color
Field type: Color picker
Example value:
#eeeeee
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Colour configuration"
Technical name:
twt-breadcrumb-buttons-background-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-buttons-border-color-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-buttons-background-color-active
Field type: Select
Available values: • no (default) • yes • on hover only • at rest only
Example value:
no (default)
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Typography"
Technical name:
twt-breadcrumb-links-underline
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 (Shopware default breadcrumb)"
Technical name:
twt-breadcrumb-container-styling
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 (Shopware default breadcrumb)"
Technical name:
twt-breadcrumb-container-corner-type
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 (Shopware default breadcrumb)"
Technical name:
twt-breadcrumb-width
Field type: Number field
Example value:
10
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container (Shopware default breadcrumb)"
Technical name:
twt-breadcrumb-margin-top
Field type: Number field
Example value:
10
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container (Shopware default breadcrumb)"
Technical name:
twt-breadcrumb-margin-bottom
Field type: Number field
Example value:
1
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container (Shopware default breadcrumb)"
Technical name:
twt-breadcrumb-padding-top-bottom
Field type: Number field
Example value:
1
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container (Shopware default breadcrumb)"
Technical name:
twt-breadcrumb-padding-left-right
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 (Shopware default breadcrumb)"
Technical name:
twt-breadcrumb-justify-content
Field type: Color picker
Example value:
rgba(0, 0, 0, 0)
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container → Container styling: Custom container styling"
Technical name:
twt-breadcrumb-border-color
Field type: Color picker
Example value:
rgba(0, 0, 0, 0)
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container → Container styling: Custom container styling"
Technical name:
twt-breadcrumb-border-top-color
Field type: Color picker
Example value:
rgba(0, 0, 0, 0)
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container → Container styling: Custom container styling"
Technical name:
twt-breadcrumb-border-bottom-color
Field type: Color picker
Example value:
rgba(0, 0, 0, 0)
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Breadcrumb container → Container styling: Custom container styling"
Technical name:
twt-breadcrumb-background-color
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 in coloured box"
Technical name:
twt-breadcrumb-list-corner-type
Field type: Color picker
Example value:
#bcc1c7
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Layout type: Links in coloured box"
Technical name:
twt-breadcrumb-border-color-list
Field type: Color picker
Example value:
#eeeeee
Path to the configuration: Tab "Content" => Block "Breadcrumb" => Section "Layout type: Links in coloured box"
Technical name:
twt-breadcrumb-background-color-list
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
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
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
Links Links and separators.
Links with background colour Links and separators with a coloured background.
Buttons Links as buttons, without separators.
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
Applies to the standard breadcrumb. The hero section uses the element's text colour.
Applies to the standard breadcrumb. The hero section uses the element's text colour.
Applies to the standard breadcrumb. The hero section uses the element's text colour.
Applies to the standard breadcrumb. The hero section uses the element's text colour.
Underline breadcrumb links so that clickable entries are clearly differentiated from non-clickable structural pages, thus improving accessibility.
Note: Only applies to layout types "Links" and "Links in coloured box". Button styles are not affected.
This configuration can be overwritten by the accessibility configuration "Underline links" in the Tab "Others" => Block "Accessibility" => Section "Layout".
rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners Uses a predefined radius for round corners.
Set the sizing mode of the breadcrumb container on CMS pages for the basic layout "Full-width-boxed".
Set the margin top for the breadcrumb container on CMS pages.
Set the margin bottom for the breadcrumb container on CMS pages.
Set the padding top/bottom for the breadcrumb container on CMS pages.
If you use a background colour, '15' is a reasonable value.
Set the padding left/right for the breadcrumb container on CMS pages.
If you use a background colour, '20' is a reasonable value.
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.
Set the border colour for the breadcrumb container.
Set the top border colour for the breadcrumb container.
Only used if this colour value differs from the border colour.
Set the bottom border colour for the breadcrumb container.
Only used if this colour value differs from the border colour.
Set the background colour for the breadcrumb container.
rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners Uses a predefined radius for round corners.
Set the border colour for the breadcrumb.
Used for layout types with background colour.
Set the background colour for the breadcrumb.
Used for layout types with background colour.
Select whether the separator icon should be displayed in the breadcrumb.
Select whether a border should be displayed around the buttons.
You can configure the colour of the border below.
rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners Uses a predefined radius for round corners.