Blazor | ComponentOne
Controls / Menu / Separator
In This Topic
    Separator
    In This Topic

    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 class.

    Blazor Menu separator

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

    Razor
    Copy Code 
    @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}";
    }
}