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](/reference/servoy-developer/object-editors/color-chooser.md) 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`).
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.servoy.com/reference/servoy-developer/object-editors/theme-editor/sidenav-properties.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.