Changing the Highlight Color of the Kendo UI for Angular Menu Items
Environment
| Product | Progress® Kendo UI for Angular Menu |
Description
I am using the Kendo UI Menu for Angular and need to change the background color of the items when they are hovered over or active.
This Knowledge Base article also answers the following questions:
- How can I customize the background color of Kendo UI for Angular Menu items on hover and active states?
- What CSS selectors are used to change the Kendo UI for Angular Menu item colors in Angular?
Solution
To customize the highlight color of the items in the Kendo UI for Angular Menu, use one of the following approaches:
Using CSS
To modify the highlight color of the Menu items, utilize the following CSS selectors, apply the desired color for each state using the background-color property, and adjust the value set to the encapsulation meta data. These selectors target the active and hover states of the Menu items, respectively.
Here is an example of how to customize these styles:
.k-menu-group .k-item>.k-link.k-active {
background-color: green; /* Active state color */
}
.k-menu-group .k-item>.k-link:hover {
background-color: gold; /* Hover state color */
}Using SCSS Variables
To adjust the highlight color for the Menu items via SCSS theme variables, refer to the Sass Variables article for the component. Below is an example of how to set custom colors for the hover, active, and selected states:
// Applied to Angular styles.scss file.
$kendo-menu-item-hover-bg: violet !default;
$kendo-menu-item-active-bg: orange !default;
$kendo-menu-item-selected-bg: green !default;
// ...
// Import the entire theme
@use "@progress/kendo-theme-default/scss/all.scss" as *;