# Styling

Blazor Edition provides a set of native UI controls built for Blazor such as FlexGrid, Chart, ListView, and input controls including AutoComplete and ComboBox.

## Content



Menu offers different ways of styling the UI of the Menu control. It allows you to use different styling properties available in the **C1Menu** class which allows you to easily style all visual aspects of the control.

The following table lists all the styling properties available in the **C1Menu** class that can be used to style different elements of the menu:

| **Properties** | **Description** |
| --- | --- |
| [ItemStyle](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Menu/C1.Blazor.Menu.C1MenuList.ItemStyle.html) | Changes the style of the items |
| [SubMenuStyle](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Menu/C1.Blazor.Menu.C1MenuList.SubMenuStyle.html) | Changes the style of the submenus |
| [SeparatorStyle](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Menu/C1.Blazor.Menu.C1MenuList.SeparatorStyle.html) | Changes the style of the separator items |
| [OpenIconStyle](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Menu/C1.Blazor.Menu.C1MenuList.OpenIconStyle.html) | Changes the style of the open icon |
| [IsSubMenuOpenedStyle](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Menu/C1.Blazor.Menu.C1MenuList.IsSubMenuOpenedStyle.html) | Changes the style of the opened submenu item |

The following image showcases styling applied on the menu items and the menu item opening icons.

![Blazor Menu Styling](https://cdn.mescius.io/document-site-files/images/f5b600ba-f1a7-4f89-a20c-aa6c0c35880d/images/menustyling.png)

The following code demonstrates how you can style the Menu control using **ItemStyle** and **OpenIconStyle** properties of the **C1Menu** class.

```razor
@using C1.Blazor.Core
@using C1.Blazor.Menu
<C1Menu Style="@("width: 150px")" OnItemSelected="OnSelectedItem"
    ItemStyle="@_itemStyle" OpenIconTemplate="C1IconTemplate.TriangleRight"
    OpenIconStyle="@iconStyle" OpenOnClick="false">
        <C1MenuItem Header="Wijmo">
            <C1MenuItem Header="Framework">
                <C1MenuItem Header="JavaScript" />
                <C1MenuItem Header="Angular" />
                <C1MenuItem Header="React" />
                <C1MenuItem Header="View" />
            </C1MenuItem>
            <C1MenuItem Header="Documentation"/>
            <C1MenuItem Header="Resources">
                <C1MenuItem Header="Blogs" />
                <C1MenuItem Header="Samples" />
                <C1MenuItem Header="Licensing" />
            </C1MenuItem>
            <C1MenuItem Header="Demos" />
        </C1MenuItem>
        <C1MenuItem Header="ComponentOne">
            <C1MenuItem Header="Platforms">
                <C1MenuItem Header="WinForms" />
                <C1MenuItem Header="WPF" />
                <C1MenuItem Header="WinUI" />
                <C1MenuItem Header="Blazor" />
                <C1MenuItem Header="MVC" />
                <C1MenuItem Header="UWP" />
                <C1MenuItem Header="Xamarin" />
                <C1MenuItem Header="Others" />
            </C1MenuItem>
            <C1MenuItem Header="Resources">
                <C1MenuItem Header="Documentation">
                    <C1MenuItem Header="WinForms Edition" />
                    <C1MenuItem Header="WPF Edition" />
                    <C1MenuItem Header="WinUI Edition" />
                    <C1MenuItem Header="Blazor Edition" />
                    <C1MenuItem Header="MVC Edition" />
                    <C1MenuItem Header="UWP Edition" />
                    <C1MenuItem Header="Xamarin Edition" />
                    <C1MenuItem Header="Others Edition" />
                </C1MenuItem>
                <C1MenuItem Header="Blogs" />
            </C1MenuItem>
            <C1MenuItem Header="Samples" />
            <C1MenuItem Header="Licensing" />
            <C1MenuItem Header="Demos" />
        </C1MenuItem>
    </C1Menu>
@code {
    string selectedItem = "";
    public void OnSelectedItem(C1MenuItem item)
    {
        selectedItem = GetFullPath(item);
    }
    public C1Style _itemStyle = new C1Style
    {
        Color = C1Color.Brown,
        BackgroundColor = C1Color.BlanchedAlmond
    };
    public C1Style iconStyle = new C1Style
    {
        Color = C1Color.White,
        Height = "30px",
        Width = "15px"
    };
    public static string GetFullPath(C1MenuItem item)
    {
        if (item.ParentItem == null)
            return item.Header;
        return $"{GetFullPath(item.ParentItem)} / {item.Header}";
    }
}
```