Panel menu styling

Radzen.Blazor Components
1

I tried to change the background color on a panel menu. Firstly I simply add style to the Panel menu item and it works but when I tried to the second level of Panel menu item to do the same nothing happens. Only result I achieve is that sub menus of that particular panel menu item is surrounded by this background color I defined.
So, how to set background color for sub menu items?

Thanks in advance.

2

You can use a CSS variable to set the background color of sub menu items:

<RadzenPanelMenu Style="--rz-panel-menu-item-background-color: red">

image
image1152×692 25.4 KB

3

Thank you Atanas. Indeed it works but unfortunately only for the first level of the submenu, on the second level it does not work.

4

It actually works for the second level as can be seen from my screenshot :slight_smile: For the first level you can set the background of the RadzePanelMenu itself.

5

My bad. I thought about the second and third levels. Sorry for my ANSI C mind, I am starting from level zero.

6

Hi @Djordje,

These are the available background CSS variables:

:root {
    --rz-panel-menu-background-color: green; /* Root level items */
    --rz-panel-menu-item-background-color: red; /* First level child items */
    --rz-panel-menu-item-2nd-level-background-color: yellow; /* Second level child items */
}

For everything beyond these a custom CSS is needed cascading through different levels, e.g:

.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper {
    background-color: purple !important;
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper {
    background-color: pink !important;
}

I agree these are not that intuitive and most probably will be revised with a next major version of Radzen Blazor Components.

7

Thank you again. It works and 3 level is deep enough.