> For the complete documentation index, see [llms.txt](https://docs.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeware.design/manual/content/offcanvas-cart-and-navigation.md).

# Offcanvas (Cart & navigation)

***

### Layout type

**Field type**:\
Select

**Available values**:\
• Shopware default\
• ThemeWare®

**Example value**:\
`Shopware default`

**Path to the configuration**:\
Tab "Content" => Block "Offcanvas (Cart & navigation)"

**Technical name**:\
`twt-offcanvas-layout-type`

{% hint style="info" %}
Select how offcanves elements (e.g. cart od navigation) are displayed.

In the "Shopware" layout type offcanves elements behave as shipped.

In the "ThemeWare®" layout type, the elements are given, for example, an margin around and rounded corners.
{% endhint %}

## Basic configuration

***

### Margin \[px]

**Field type**:\
Number field

**Example value**:\
`10`

**Path to the configuration**:\
Tab "Content" => Block "Offcanvas (Cart & navigation)" => Section "Basic configuration"

**Technical name**:\
`twt-offcanvas-margin`

{% hint style="info" %}
Select the margin around offcanvas elements.

**Note**: This setting is only applied if the "ThemeWare®" display mode is selected.
{% endhint %}

***

### Border radius \[px]

**Field type**:\
Number field

**Example value**:\
`3`

**Path to the configuration**:\
Tab "Content" => Block "Offcanvas (Cart & navigation)" => Section "Basic configuration"

**Technical name**:\
`twt-offcanvas-border-radius`

{% hint style="info" %}
Select the border radius of offcanvas elements.

**Note**: This setting is only applied if the "ThemeWare®" display mode is selected.
{% endhint %}

## Colour configuration

***

### Backdrop colour

**Field type**:\
Color picker

**Example value**:\
`rgba(0, 0, 0, 0.5)`

**Path to the configuration**:\
Tab "Content" => Block "Offcanvas (Cart & navigation)" => Section "Colour configuration"

**Technical name**:\
`twt-offcanvas-backdrop-color`

{% hint style="info" %}
Select the desired background colour of the backdrop.
{% endhint %}

***

### Glass effect \[px] (overlay)

**Field type**:\
Number field

**Example value**:\
`0`

**Path to the configuration**:\
Tab "Content" => Block "Offcanvas (Cart & navigation)" => Section "Colour configuration"

**Technical name**:\
`twt-offcanvas-backdrop-effect-blur`

{% hint style="info" %}
Enter the desired strength for the blur effect of the overlay (backdrop).
{% endhint %}

## Button "Close menu"

***

### Layout type

**Field type**:\
Select

**Available values**:\
• Button\
• Link

**Example value**:\
`Button`

**Path to the configuration**:\
Tab "Content" => Block "Offcanvas (Cart & navigation)" => Section "Button "Close menu""

**Technical name**:\
`twt-offcanvas-close-style`

{% hint style="info" %}
Select how the button "Close menu" above the content is displayed.

**Button**: A filled surface with a separator and a soft shadow below it.

**Link**: Only text and icon, without a surface, separator or shadow. The background colour has no effect then.

**Note**: The button belongs to the offcanvas navigation and the offcanvas cart alike. The filter panel brings its own.
{% endhint %}

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`$twt-color-secondary-button`

**Path to the configuration**:\
Tab "Content" => Block "Offcanvas (Cart & navigation)" => Section "Button "Close menu""

**Technical name**:\
`twt-offcanvas-close-background-color`

{% hint style="info" %}
Here you can configure the background colour for the button "Close menu".

**Text colour / hover effect:**\
According to Bootstrap, the text colour is automatically inverted from this colour value.\
For the hover effect, this colour value is automatically darkened.

**Note**: In the layout type "Link" this setting has no effect.
{% endhint %}