blazor-docs/knowledge-base/menu-center-items.md

title	description	type	page_title	slug	position	tags	ticketid	res_type
Center Root Items in Horizontal Menu	How to center the root items in a horizontal Blazor menu bar.	how-to	Center Root Items in Horizontal Menu	menu-center-items		menu, center, items	1543208	kb

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.

caption 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; }
    }
}