# Sidenav Properties

## Overview

<figure><img src="https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-3bb9a8697f55a76aa04504c75863df9e3218df91%2Ftheme-sidenav.jpg?alt=media" alt=""><figcaption><p>Sidenav Properties</p></figcaption></figure>

The **Sidenav Properties** section defines the appearance of the side navigation menu in your application. The sidenav is crucial for providing easy access to various sections of the application.

## Properties

{% hint style="info" %}
Some properties have an additional button: `Select Color`, which opens the [color chooser](https://docs.servoy.com/reference/servoy-developer/object-editors/color-chooser) wizard.
{% endhint %}

Here's an in-depth look at each property:

### Sidenav color

Sets the background color for the sidenav. This color should be consistent with the overall theme and help the sidenav stand out.\
Value: Hex color code or CSS variable (e.g., `@secondary-color`).

### Sidenav text color

Defines the color of the text within the sidenav, ensuring it is readable against the background.\
Value: Hex color code or CSS variable (e.g., `@secondary-color-inverse`).

### Sidenav text font size

Specifies the font size of the text within the sidenav. This size should be readable and consistent with other text elements in the application.\
Value: CSS size value (e.g., `@font-size-h6`).

### Sidenav border width

Sets the width of the border around the sidenav. This can help define the edges of the sidenav and separate it from other content.\
Value: CSS size value (e.g., `1px`).

### Sidenav selected color

Defines the background color for the selected item in the sidenav, helping users identify the current section.\
Value: Hex color code or CSS variable (e.g., `@secondary-color-light`).

### Sidenav selected text color

Sets the text color for the selected item in the sidenav, ensuring it stands out against the selected background color.\
Value: Hex color code or CSS variable (e.g., `@sidenav-text-color`).

### Sidenav selected border color

Defines the border color for the selected item in the sidenav, adding emphasis to the current selection.\
Value: Hex color code or CSS variable (e.g., `@main-color`).

### Sidenav selected border width

Specifies the border width for the selected item in the sidenav, enhancing its visual prominence.\
Value: CSS size value (e.g., `0px 0px 0px 0px`).

### Sidenav secondary color

Sets the background color for secondary items in the sidenav, differentiating them from primary items.\
Value: Hex color code or CSS variable (e.g., `@main-color`).

### Sidenav secondary text color

Defines the text color for secondary items in the sidenav, ensuring readability.\
Value: Hex color code or CSS variable (e.g., `@main-color-inverse`).

### Sidenav secondary text font size

Specifies the font size for secondary text items in the sidenav.\
Value: CSS size value (e.g., `@font-size-h6`).

### Sidenav secondary border width

Sets the border width for secondary items in the sidenav.\
Value: CSS size value (e.g., `1px`).

### Sidenav secondary selected color

Defines the background color for selected secondary items in the sidenav.\
Value: Hex color code or CSS variable (e.g., `@main-color-light`).

### Sidenav secondary selected text color

Sets the text color for selected secondary items in the sidenav.\
Value: Hex color code or CSS variable (e.g., `@main-color-inverse`).

### Sidenav secondary selected border color

Defines the border color for selected secondary items in the sidenav.\
Value: Hex color code or CSS variable (e.g., `@main-color-inverse`).

### Sidenav secondary selected border width

Specifies the border width for selected secondary items in the sidenav.\
Value: CSS size value (e.g., `0px 0px 0px 5px`).