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
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:
#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
Border colour
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
Applies to the standard breadcrumb. The hero section uses the element's text colour.
Background colour
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
Applies to the standard breadcrumb. The hero section uses the element's text colour.
Border 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-buttons-border-color-active
Applies to the standard breadcrumb. The hero section uses the element's text colour.
Background 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-buttons-background-color-active
Applies to the standard breadcrumb. The hero section uses the element's text colour.
Typography
Underline links
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
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".
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 (Shopware default breadcrumb)"
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 (Shopware default breadcrumb)"
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 (Shopware default breadcrumb)"
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 (Shopware default breadcrumb)"
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 (Shopware default breadcrumb)"
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 (Shopware default breadcrumb)"
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 (Shopware default breadcrumb)"
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 (Shopware default breadcrumb)"
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 "Breadcrumb container → Container styling: 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 "Breadcrumb container → Container styling: 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 "Breadcrumb container → Container styling: 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 "Breadcrumb container → Container styling: 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 in coloured box"
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 in coloured box"
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 in coloured box"
Technical name:
twt-breadcrumb-background-color-list
Set the background colour for the breadcrumb.
Used for layout types with background colour.
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
Select whether the separator icon should be displayed in the breadcrumb.
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
Select whether a border should be displayed around the buttons.
You can configure the colour of the border below.
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.
Last updated
Was this helpful?