Center Root Items in Horizontal Menu

Environment

Product

Menu for Blazor

Description

How to center the items in a horizontal menu bar? By default they align to the left.

Solution

The Menu uses flexbox, so the easiest way to center the root items is with the justify-content CSS style.

Center the root items in a horizontal menu

@* Center the root items in a horizontal menu *@

<TelerikMenu Class="centered-menu" Data="@MenuItems" />

<style>
    .centered-menu {
        justify-content: center;
    }
</style>

@code {

    List<MenuItem> MenuItems = new List<MenuItem> {
        new MenuItem() { Text = "Item 1" },
        new MenuItem() { Text = "Item 2" },
        new MenuItem() { Text = "Item 3" }
    };

    public class MenuItem
    {
        public string Text { get; set; }
    }
}