Custom background in RadzenPanelMenu first level

Radzen.Blazor Components
1

HI,

I'm new to using Radzen components. I have a RadzenPanelMenu with some items as sub menus. I would like to customize the background of the items. How can I do?

Here the code

<RadzenPanelMenu Multiple="true">
    <RadzenPanelMenuItem Text="Amministrazione">
        <RadzenPanelMenuItem Text="Aggiungi utente" Path="administration/account/identity/add-user" Icon="person_add" />
        <RadzenPanelMenuItem Text="Lista utenti" Path="administration/account/identity/users" Icon="groups" />
    </RadzenPanelMenuItem>
</RadzenPanelMenu>

I attach the screen of the expected result (I modified the code via DevOps).

Cattura
Cattura1860×686 44.9 KB

2

Hi @Matteo_Antonini,

You can use CSS just as you have done in your browser's developer tools (which is probably what you mean by DevOps). Here is something to start with:

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

You can check all CSS variables used by RadzenPanelMenu here.

3

Hi @korchev,

Thank you for your reply. First, yes I was wrong, I wrote DevOps instead of developer toolbar.
Then, I did as you said, but it doesn't give the effect I want. I attach screen and also the code.

<RadzenPanelMenu Multiple="true" Style="--rz-panel-menu-background-color: green;--rz-panel-menu-item-background-color: red;">
    <RadzenPanelMenuItem Text="Amministrazione">
        <RadzenPanelMenuItem Text="Aggiungi utente" Path="administration/account/identity/add-user" Icon="person_add" />
        <RadzenPanelMenuItem Text="Lista utenti" Path="administration/account/identity/users" Icon="groups" />
    </RadzenPanelMenuItem>
</RadzenPanelMenu>

Cattura
Cattura1859×665 34.6 KB

4

Tweak the available CSS to match your requirement.

5

Hi, can you give me an example?

6

Already did and also linked the source code.