Navigation

The navigation panel ensures a consistent and visually pleasing design for the navigation menu, resulting in a unified and user-friendly experience. It provides clear navigation cues, enhancing the overall usability of the application and improving the user experience.

Navigation comprises of following components:

• Primary
• Secondary

Primary

The primary navigation encompasses the main menu, offering users a structured and easily understandable method to navigate and reach various sections or pages within the application.

The primary navigation consists of the following elements:

Navigation Style

You can set the primary navigation style to either Horizontal or Vertical based on the requirement. It will enhance the aesthetics of the application and user experience goals.

Figure: Navigation Style

Horizontal - Horizontal navigation menu is are positioned at the top to bottom of the application. Enabling you to quick access the options from left to right.

Vertical - Vertical navigation menu is are positioned on the left side of the application positioned vertically from top to bottom. You can scroll vertically to access options. 

Background Color

Enables you to set the background color of primary vertical or horizontal navigation of your application. It allows your content to be visually appealing. 

Figure: Background Color

Text Color

Use Text Color to choose the preferred color for the primary vertical navigation fonts, ensuring ample contrast with the background and enhancing the easy readability of text for a meaningful presentation of information. Select your desired color from the available color palette.

Figure: Text Color

Active Background Color

Active Background Color enables you to set the background color of the selected item of the menu. You can select the required color based on the requirement from the color palette. 

Figure: Active Background Color

Active Parent Text Color

Active Parent Text Color enables you to change the color of the selected option or expanded option in the menu.

Figure: Active Parent Text Color

Active Text Color

Active Text Color enables you to set the text color of the selected menu. It helps in enhancing the user experience when interacting with navigation elements.

Figure: Active Text Color

Hover Background Contrast

The Hover Background Contrast improves the usability and accessibility of the application. When the user hovers over a navigation item or any interactive element, the alteration in background contrast provides visual feedback, indicating that the element is interactive and prepared for engagement.

Figure: Hover Background Contrast

Secondary

Secondary navigation provide users supplementary navigational choices and that enhance the overall user experience within the application.

The secondary navigation consists of the following elements:

Background Color

Enables you to set the background color of primary vertical navigation of your application or the area behind the vertical navigation. It improves overall visual appeal of your content. 

Figure: Background Color

Text Color

Text Color enables you to select the required text color for the primary vertical navigation fonts to ensures sufficient contrast with the background and improves easy readability of the text for meaningful presentation of text-based information. You can select the required color from the color palette.

Figure: Text Color

Divider Color

The inclusion of divider color serves to elevate the visual appeal of the interface and enhance the user experience.

Figure: Divider Color

Active Background Color

Active Background Color enables you to set the background color of the selected item of the secondary navigation. You can select the required color from the color palette. 

Figure: Active Background Color

Active Parent Text Color

Active Parent Text Color enables you to change the color of the selected item.

Figure: Active Parent Text Color

Active Second Parent Text Color

Active Second Parent Text Color in themes refers to the designated text color applied to the second-level parent element that is currently active or selected.

Figure: Active Second Parent Text Color

Active Text Color

Active Text Color enables you to set the text color of the selected menu. It helps in enhancing the user experience when interacting with navigation elements.

Figure: Active Text Color

Hover Background Contrast

The Hover Background Contrast serves to enhance both the usability and accessibility of the application. When a user hovers over a navigational element, a shift in the background offers visual feedback, signaling that the element is interactive and prepared for engagement.

Figure: Hover Background Contrast