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 *@
<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; }
}
}