> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/en/styling/components/sidebar-navigation.md).
# Sidebar navigation
### Colors
In addition to the usual colors, the **active path (2)** can also be colored. The **:hover (3)** colors are additionally used for the active element.
**Background (1)** is the general background color of a menu item. **Background:active path (4)** sets the color for the active item. This makes it easier for the customer to distinguish which area of which level he can navigate deeper. **Background:hover (2)** marks the active parent element and the mouse-over action of the current menu elements.
{% hint style="info" %}
You can underline an active element by activating this option in the basic configuration.
{% endhint %}
### Basic configuration
In addition to the font display settings, you can also specify a **vertical padding (1)**. The **vertical padding (1)** determines the height of each menu item. If there are many categories, a value as small as possible should be chosen.
Through the option **margin bottom (2)** the individual elements can be separated from each other.
The **display mode (3)** determines the mode of sidebar navigation. In mode `Expandable` subcategories can be expanded and collapsed without changing/loading the page.
There are various options available for the **Collapse icon (4)**. The icons are displayed as soon as the **Display mode** is set to `Expandable`.
**Hover animation (5)** can display an animated subline on mouse-over and active-state from the second navigation level.
Examples:
### Category icon
> from theme version 4.7.0
Via the **custom fields** under Catalogues > Categories > \[Select category] in the tab "Additional" you will find a media field **Category Icon** for configuring the icon.
You can use the checkbox **Icon (1)** to activate the display of icons in the main navigation and set the **Size (2)** of the icons for the respective menu.
Example:
