<style>
    .horizontal-separator {
        display: inline-block;
        width: 100%;
    }

        .horizontal-separator::before {
            position: absolute;
            width: 100%;
            height: 100%;
            border-top:1px solid black;
            content: " ";
        }
</style>

<TelerikMenu Data="@MenuItems"
             UrlField="@nameof(MenuItem.Page)"
             ItemsField="@nameof(MenuItem.SubSectionList)"
             TextField="@nameof(MenuItem.Section)">
    <ItemTemplate>
        @{
            MenuItem item = context as MenuItem;
            if (item.IsSeparator)
            {
                @(new MarkupString(item.Section))
            }
            else
            {
                if (!string.IsNullOrEmpty(item.Page))
                {
                    <NavLink href="@item.Page">@item.Section</NavLink>
                }
                else
                {
                    <span>@item.Section</span>
                }
            }
        }
    </ItemTemplate>
</TelerikMenu>

@code {
    public List<MenuItem> MenuItems { get; set; }

    public class MenuItem
    {
        public string Section { get; set; }
        public string Page { get; set; }
        public List<MenuItem> SubSectionList { get; set; }
        public bool IsSeparator { get; set; }
    }

    protected override void OnInitialized()
    {
        MenuItems = new List<MenuItem>()
        {
            new MenuItem()
            {
                Section = "Company", // items that don't have a URL will not render links
                SubSectionList = new List<MenuItem>()
                {
                    new MenuItem()
                    {
                        Section = "Overview",
                        Page = "company/overview"
                    },
                    new MenuItem(){ IsSeparator = true, Section="<span class=\"horizontal-separator\"></span>" },// separator content must match the direction
                    new MenuItem()
                    {
                        Section = "Events",
                        Page = "company/events"
                    },
                    new MenuItem()
                    {
                        Section = "Careers",
                        Page = "company/careers"
                    }
                }
            },
            new MenuItem(){ Section = "|", IsSeparator=true }, // separator content must match the direction
            new MenuItem()
            {
                Section = "Services",
                SubSectionList = new List<MenuItem>()
                {
                    new MenuItem()
                    {
                        Section = "Consulting",
                        Page = "consultingservices"
                    },
                    new MenuItem()
                    {
                        Section = "Education",
                        Page = "education"
                    }
                }
            }
        };

        base.OnInitialized();
    }
}