How can i change the position/orientation of my RadzenMenuItem

Radzen.Blazor Components
1

Hello everyone

In the following images you can see my problem. I need a solution so my RadzenMenuItem is right:

grafik
grafik352×200 10.4 KB

-->
grafik
grafik362×254 13 KB

This is my code:

<RadzenStack Orientation="Orientation.Horizontal" Gap="0">
                <RadzenMenuItem Title="@USER_GUIDE" Path="@USER_GUIDE_URL" Click="() => NavigateToPath(USER_GUIDE_URL)" Icon="@USER_GUIDE_ICON"/>
                <RadzenMenuItem Title="@RELEASE_NOTES" Path="@RELEASE_NOTES_URL" Click="() => NavigateToPath(RELEASE_NOTES_URL)" Icon="@RELEASE_NOTES_ICON"/>
                <RadzenMenuItem Title="@CONTACT" Path="@CONTACT_URL" Click="() => NavigateToPath(CONTACT_URL)" Icon="@CONTACT_ICON"/>
                <RadzenMenuItem Title="@IMPRESSUM" Path="@IMPRESSUM_URL" Click="() => NavigateToPath(IMPRESSUM_URL)" Icon="@IMPRESSUM_ICON"/>
                <RadzenMenuItem Icon="@PROFILE_ICON">
                    <RadzenMenuItem Text="@PROFILE_EDIT_TEXT" Path="@PROFILE_EDIT_URL" Click="() => NavigateToPath(PROFILE_EDIT_URL)"/>
                </RadzenMenuItem>
        </RadzenStack>

and this is my css:

.rzi {
    font-variation-settings: 'FILL' 1;
}

.rz-menu:not(.rz-profile-menu) .rzi:not(.rz-navigation-item-icon-children) {
    margin-inline: 0;
}
2

Hi @Samuel_Scherrer,

RadzenMenu does not have the option to change the menu item position. RadzenProfileMenu however works exactly as you want by default:

image
image588×458 31.5 KB

You can try using it instead.

3

Hi @korchev

I used tthat Component before, but the the Icon is not centered and will stay a little bit higher than the arrow...

I found another "solution", I just didnt use a menu with child-components...

4

But now I've got another problem here... @korchev

My Admin-Menu looks like this: (and this is good)

grafik
grafik288×173 3.7 KB

But my icons in my navbar are not centered:
grafik

Thats because an RadzenMenuItem with an icon has a space like this:
grafik

When i remove that space with this CSS:

.rz-menu:not(.rz-profile-menu) .rzi:not(.rz-navigation-item-icon-children) {
    margin-inline: 0;
}

Then the icons are fixed:
grafik

:grimacing: BUT :grimacing:

the margin-inline: 0 has an effect on the admin-menu-icons also:

grafik
grafik275×167 3.33 KB

This is my code for my NavBar:

<RadzenRow JustifyContent="JustifyContent.SpaceBetween" Style="width: 100%; align-content: center;">
        <RadzenStack Orientation="Orientation.Horizontal" Gap="0">
            <RadzenMenuItem Text="@ADMIN" Style="margin-left: auto;">
                <RadzenMenuItem Text="@USER_MANAGEMENT" Path="@URL" Click="() => NavigateToPath(URL)" Icon="@ICON"/>
                <RadzenMenuItem Text="@NON_BILLABLE_TEAMS" Path="@URL2" Click="() => NavigateToPath(URL2)" Icon="@ICON2"/>
            </RadzenMenuItem>
        </RadzenStack>
        <RadzenStack Orientation="Orientation.Horizontal" Gap="0">
            <RadzenMenuItem Title="@USER_GUIDE" Path="@URL3" Click="() => NavigateToPath(URL3)" Icon="@ICON3"/>
            <RadzenMenuItem Title="@RELEASE_NOTES" Path="@URL4" Click="() => NavigateToPath(URL4)" Icon="@ICON4"/>
            @* ... *@
        </RadzenStack>
    </RadzenRow>

When i used the "class"/"Style"-Property in RadzenStack/RadzenMenuItem, it also didnt work...

5

You should use another CSS selector or update the existing one so it doesn't affect second level children.

6

I tried all that (with "div" "ul" "li" or .MyOwnCSSClassXY etc.), but could be that I made a mistake. Can you give me an example of what you mean?

7

The easiest way is to assign a class to the inner menu items and then set whatever margin you want to their icons.

<RadzeMenuItem class="inner-menu-item" ... />

.inner-menu-item .rzi {
   margin-inline: 10px;
}

Make sure the CSS specificity is higher than the other selector. You can use the browser's developer tools to see if the rule applies or not.