RadzenMenu

Radzen.Blazor Components
1

Hi. Is there a way to show two Menu components on the same page, with each Menu having different styling (background color etc)?

Cheers
Reg

2

You can target each component by id using CSS or you can simply set desired styles inline:

image
image1920×1080 265 KB

image
image1920×1080 206 KB

3

Thanks. It works when changing certain characteristics - Background color, Font Size etc - but not the Font color for some reason?

4

Hi @SolutionJ,

The components use custom CSS properties for styling (a.k.a. CSS variables). You can use your browser's DevTools to inspect the components and find the CSS variables you need to update with your styles:

style="--rz-menu-top-item-color: red;"

image
image1196×112 8.64 KB

5

Thank you, that will work, but can I suggest that this is a bug in the Visual Page designer? Why can I adjust other style properties of the menu using the Style tab but not the text color?

6

You mean Radzen Blazor Studio, right?

7

Sorry, yes, that’s right.

Cheers
Reg

8

Editing custom CSS properties on a component instance via the Styles tab is not possible at the moment.

You can use the Appearance Panel to globally edit the component's theme.

9

Good morning,

Yes, I am aware of that, but my need originated from wanting two different appearances for the Menu in one app.

Anyway, perhaps this feature will come along in the future.

Many thanks
Reg