Highlighting Multiple Expanded Items in the Angular PanelBar
Environment
| Product | Progress® Kendo UI® for Angular PanelBar |
Description
I want to visually highlight multiple expanded items in the Kendo UI for Angular PanelBar.
By default, the PanelBar only highlights one expanded item at a time - when you expand a new item, the highlight moves from the previously expanded item to the newly expanded one. I need a way to configure all expanded items to remain visually highlighted simultaneously, making it easier for users to identify which sections are currently open.
This Knowledge Base article also answers the following questions:
- How to highlight multiple expanded items in Kendo UI for Angular PanelBar?
- How to apply custom CSS to visually distinguish expanded PanelBar items?
- How to improve PanelBar navigation UX by showing expanded state?
Solution
To visually highlight all expanded items simultaneously in the Kendo UI for Angular PanelBar, apply the following custom CSS. This solution overrides the default behavior, in which only one item is highlighted at a time.
/* Highlight expanded items with primary theme colors */
kendo-panelbar-item.k-expanded > .k-link {
background-color: var(--kendo-color-primary, #1274ac) !important;
color: var(--kendo-color-surface-alt, #ffffff) !important;
}
/* Ensure non-expanded items use default styling */
kendo-panelbar-item > .k-link {
background-color: var(--kendo-color-surface-alt, #ffffff) !important;
color: var(--kendo-color-primary, #1274ac) !important;
}This solution targets the expanded state of PanelBar items and ensures that all expanded items remain highlighted, instead of only the most recently expanded one.
The following example demonstrates how to apply the custom CSS to highlight expanded items in the PanelBar. Click on items like "My Teammates", "Projects", "Sales Forecast", and "Programs" to expand them and see how multiple expanded items remain highlighted simultaneously.