Sidenav Properties

Reference documentation for Servoy Theme Sidenav Properties

Overview

Sidenav Properties

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

Some properties have an additional button: Select Color, which opens the color chooser wizard.

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).