How to Customize the Default Menu Styles - Fonts and Background Colors
Environment
| Product | Menu for Blazor |
Description
This KB article answers the following questions:
- How do I change the font color and weight of the top-level menu items in a Blazor application?
- How can I customize the background color of dropdown menus in a Blazor application?
- What CSS selectors are needed to style the Telerik Menu in Blazor?
Solution
To customize the appearance of the Menu items:
- Override the default theme styles.
- Use a custom CSS to change the font color and weight of the root menu items.
- Customize the background and font colors of the child menu items.
Menu component with custom CSS styles
<style>
/* root menu item default state */
.custom-menu-styles.k-menu > .k-item {
color: #fff;
font-weight: bold;
}
/* root menu item hover state */
.custom-menu-styles.k-menu > .k-item:hover {
background: #fff;
color: #000;
}
/* child menu item default state */
.k-menu-group .k-item {
background: #ff9;
}
/* child menu item hover state */
.k-menu-group .k-item:hover {
background: #ff3;
}
</style>
<div style="background: orange; padding:1em; width: 60%">
<TelerikMenu Data="@Data" Class="custom-menu-styles"></TelerikMenu>
</div>
@code {
public List<Product> Data { get; set; }
protected override void OnInitialized()
{
Data = new List<Product>();
string[] mainMenuItems = { "Home", "About Us", "Services" };
string[][] subMenuItems = {
new string[] { "Overview", "News", "Updates" },
new string[] { "Company", "Team", "Careers" },
new string[] { "Consulting", "Support", "Development" }
};
int idCounter = 1;
for (int i = 0; i < mainMenuItems.Length; i++)
{
var mainProduct = new Product
{
ID = idCounter++,
Text = mainMenuItems[i],
Items = new List<Product>()
};
foreach (var subItem in subMenuItems[i])
{
mainProduct.Items.Add(new Product
{
ID = idCounter++,
Text = subItem
});
}
Data.Add(mainProduct);
}
}
public class Product
{
public int ID { get; set; }
public string Text { get; set; }
public List<Product> Items { get; set; }
}
}