> 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 %}