Added new kb article customize-menu-font-background-colors-blazor

knowledge-base/customize-menu-font-background-colors-blazor.md

@@ -0,0 +1,117 @@
+---
+title: Customizing the Font and Background Colors of the Menu in Blazor
+description: Learn how to change the font color, weight, and background colors of the Menu component in a  Telerik Blazor application to improve UI contrast.
+type: how-to
+page_title: How to Customize Menu Font and Background Colors
+slug: customize-menu-font-background-colors-blazor
+tags: menu, font color, background color, customization
+res_type: kb
+ticketid: 1657882, 1543208
+---
+
+## Environment
+
+<table>
+    <tbody>
+        <tr>
+            <td>Product</td>
+            <td>Chart for Blazor</td>
+        </tr>
+    </tbody>
+</table>
+
+## Description
+
+This KB article also 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 component and achieve the desired visual results: 
+
+1. Override the default theme styles. 
+2. Use a custom CSS to change the font color and weight of the root menu items. 
+3. Customize the background and font colors of the child menu items.
+
+>caption Menu component with custom CSS styles
+````CSHTML
+<style>
+    /* root menu item default state */
+    .my-menu.k-menu > .k-item {
+        color: #fff;
+        font-weight: bold;
+    }
+
+    /* root menu item hover state */
+    .my-menu.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;">
+    <TelerikMenu Data="@Data" Class="my-menu"></TelerikMenu>
+</div>
+
+@code {
+    public List<Product> Data { get; set; }
+
+    protected override void OnInitialized()
+    {
+        Data = new List<Product>();
+
+        for (int i = 1; i <= 2; i++)
+        {
+            Data.Add(new Product()
+            {
+                ID = i,
+                Text = "Product " + i.ToString(),
+                Items = new List<Product> {
+                    new Product() {
+                        ID = i + 100,
+                        Text = "Sub Product " + (i + 100).ToString()
+                    },
+                    new Product() {
+                        ID = i + 100,
+                        Text = "Sub Product " + (i + 100).ToString()
+                    },
+                    new Product() {
+                        ID = i + 100,
+                        Text = "Sub Product " + (i + 100).ToString()
+                    }
+                }
+            });
+        }
+    }
+
+    public class Product
+    {
+        public int ID { get; set; }
+        public string Text { get; set; }
+        public List<Product> Items { get; set; }
+    }
+}
+````
+
+## Notes
+
+- The `.my-menu` class is a custom class used to apply the styles specifically to the targeted Menu component. Make sure this class matches the one set in the `Class` attribute of your `TelerikMenu` component.
+- You may need to adjust the color values in the CSS to match your application's design and color scheme.
+
+## See Also
+
+- [Telerik Blazor Menu - Overview]({%slug components/menu/overview%})
+- [Telerik Blazor Styling and Themes - Override Theme Styles]({%slug themes-override%})
+-[ How to inspect HTML elements on a page and see what styles affect them](https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools)