# Separator

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 allows you to add a separator bar between the menu items to separate each item in the menu. In Menu, these separators are represented by the [C1MenuSeparator](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Menu/C1.Blazor.Menu.C1MenuSeparator.html) class.

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

To add a separator bar to a menu, use the following code:

```razor
@using C1.Blazor.Menu
<C1Menu Style="@("width: 150px")" OnItemSelected="OnSelectedItem">
        <C1MenuItem Header="ComponentOne">
            <C1MenuItem Header="Platforms">
                <C1MenuSeparator/>
                <C1MenuItem Header="WinForms" />
                 <C1MenuSeparator/>
                <C1MenuItem Header="WPF" />
                <C1MenuSeparator/>
                <C1MenuItem Header="WinUI" />
                <C1MenuSeparator/>
                <C1MenuItem Header="Blazor" />
                <C1MenuSeparator/>
                <C1MenuItem Header="MVC" />
                <C1MenuSeparator/>
                <C1MenuItem Header="UWP" />
                <C1MenuSeparator/>
                <C1MenuItem Header="Xamarin" />
                <C1MenuSeparator/>
                <C1MenuItem Header="Others" />
            </C1MenuItem>
            <C1MenuSeparator/>
            <C1MenuItem Header="Resources">
                <C1MenuItem Header="Documentation">
                    <C1MenuSeparator/>
                    <C1MenuItem Header="WinForms Edition" />
                    <C1MenuSeparator/>
                    <C1MenuItem Header="WPF Edition" />
                    <C1MenuSeparator/>
                    <C1MenuItem Header="WinUI Edition" />
                    <C1MenuSeparator/>
                    <C1MenuItem Header="Blazor Edition" />
                    <C1MenuSeparator/>
                    <C1MenuItem Header="MVC Edition" />
                    <C1MenuSeparator/>
                    <C1MenuItem Header="UWP Edition" />
                    <C1MenuSeparator/>
                    <C1MenuItem Header="Xamarin Edition" />
                    <C1MenuSeparator/>
                    <C1MenuItem Header="Others Edition" />
                </C1MenuItem>
                <C1MenuSeparator/>
                <C1MenuItem Header="Blogs" />
            </C1MenuItem>
            <C1MenuSeparator/>
            <C1MenuItem Header="Samples" />
            <C1MenuSeparator/>
            <C1MenuItem Header="Licensing" />
            <C1MenuSeparator/>
            <C1MenuItem Header="Demos" />
        </C1MenuItem>
    </C1Menu>
@code {
    string selectedItem = "";
    public void OnSelectedItem(C1MenuItem item)
    {
        selectedItem = GetFullPath(item);
    }
    public static string GetFullPath(C1MenuItem item)
    {
        if (item.ParentItem == null)
            return item.Header;
        return $"{GetFullPath(item.ParentItem)} / {item.Header}";
    }
}
```