> 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/shopping-experiences/category-navigation-category-sidebar/configuration.md).

# Configuration

## Basic configuration

***

### Layout type

**Field type**:\
Select

**Available values**:\
• Shopware\
• ThemeWare®\
• ThemeWare® "Buttons" (Beta)

**Example value**:\
`ThemeWare®`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Basic configuration"

**Technical name**:\
`twt-category-navigation-layout-type`

{% hint style="info" %}
**Shopware**: This layout type uses Shopware's default filters and is not modified by ThemeWare®. (HC-Architecture®)

**ThemeWare®**: This layout type is the classic ThemeWare® style for Shopware 6.

**ThemeWare® "Buttons"**: This layout type is in a testing phase, feel free to give it a try.
{% endhint %}

## Headline

***

### Show "Category navigation" headline

**Field type**:\
Select

**Available values**:\
• don't show\
• show

**Example value**:\
`don't show`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Basic configuration"

**Technical name**:\
`twt-category-navigation-headline-show`

{% hint style="info" %}
To edit or translate the headline please use the following snippet: twt.listing.navigation.title
{% endhint %}

***

### Margin bottom \[px]

**Field type**:\
Number field

**Example value**:\
`0`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Headline"

**Technical name**:\
`twt-category-navigation-headline-margin-bottom`

## Colour configuration

***

### Background colour (Navigation)

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Colour configuration"

**Technical name**:\
`twt-category-navigation-box-background-color`

***

### Border colour (Navigation)

**Field type**:\
Color picker

**Example value**:\
`#eeeeee`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Colour configuration"

**Technical name**:\
`twt-category-navigation-box-border-color`

***

### Border colour

**Field type**:\
Color picker

**Example value**:\
`#eeeeee`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Colour configuration"

**Technical name**:\
`twt-category-navigation-border-color`

***

### Accent colour

**Field type**:\
Color picker

**Example value**:\
`#000000`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Colour configuration"

**Technical name**:\
`twt-category-navigation-accent-color`

## Links

***

### Text colour

**Field type**:\
Color picker

**Example value**:\
`#111111`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Links"

**Technical name**:\
`twt-category-navigation-link-color`

***

### Text colour @hover

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Links"

**Technical name**:\
`twt-category-navigation-link-color-hover`

***

### Text colour @active

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Links"

**Technical name**:\
`twt-category-navigation-link-color-active`

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Links"

**Technical name**:\
`twt-category-navigation-link-background-color`

***

### Background colour @hover

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Links"

**Technical name**:\
`twt-category-navigation-link-background-color-hover`

***

### Background colour @active

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Category navigation (Category "Sidebar")" => Section "Links"

**Technical name**:\
`twt-category-navigation-link-background-color-active`