Sidenav Properties
Reference documentation for Servoy Theme Sidenav Properties
Last updated
Reference documentation for Servoy Theme Sidenav Properties
Last updated
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.
Some properties have an additional button: Select Color, which opens the color chooser wizard.
Here's an in-depth look at each property:
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).
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).
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).
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).
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).
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).
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).
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).
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).
Defines the text color for secondary items in the sidenav, ensuring readability.
Value: Hex color code or CSS variable (e.g., @main-color-inverse).
Specifies the font size for secondary text items in the sidenav.
Value: CSS size value (e.g., @font-size-h6).
Sets the border width for secondary items in the sidenav.
Value: CSS size value (e.g., 1px).
Defines the background color for selected secondary items in the sidenav.
Value: Hex color code or CSS variable (e.g., @main-color-light).
Sets the text color for selected secondary items in the sidenav.
Value: Hex color code or CSS variable (e.g., @main-color-inverse).
Defines the border color for selected secondary items in the sidenav.
Value: Hex color code or CSS variable (e.g., @main-color-inverse).
Specifies the border width for selected secondary items in the sidenav.
Value: CSS size value (e.g., 0px 0px 0px 5px).
