Blazor | ComponentOne
Controls / Menu / Menu Opening Behavior
In This Topic
    Menu Opening Behavior
    In This Topic

    By default, the menu and its submenu items open on a clicking the Menu control. However, you can change this opening behavior of the menu items by setting the OpenOnClick property to false. This changes the opening behavior of the menu items and the items open when you hover on them as shown in the following GIF.

    Blazor Menu opening behavior

    To open menu items on hovering over them, use the following code:

    Razor
    Copy Code
    @using C1.Blazor.Menu
    
    <C1Menu OpenOnClick="false" ItemsSource="@_dataSource" OnItemSelected="OnSelectedItem"
            ChildItemsPaths="Subdirectories" DisplayMemberPaths="Name" />
    
    @code{
        string selectedItem = "";
        public void OnSelectedItem(C1MenuItem item)
        {
            selectedItem = GetFullPath(item);
        }
    
        readonly IList<Hierarchical> _dataSource = new List<Hierarchical>()
    {
            new Hierarchical ()
            {
                Name = "Devices",
                Subdirectories = new List<Hierarchical >
        {
                    new Hierarchical  {Name = "Wi-fi Router"},
                    new Hierarchical
                    {
                        Name = "Mobiles",
                        Subdirectories = new List<Hierarchical>
                        {
                            new Hierarchical  {Name = "Xiaomi"},
                            new Hierarchical  {Name = "Apple"},
                            new Hierarchical  {Name = "Nokia"}
                        }
    
                    },
                    new Hierarchical  
                    {
                        Name = "Appliances",
                        Subdirectories= new List<Hierarchical>
                        {
                            new Hierarchical{Name="Television"},
                            new Hierarchical{Name="Washing Machine"}
                        }
                    },
                }
            },
            new Hierarchical
            {
                Name = "Reports",
                Subdirectories = new List<Hierarchical >()
        {
                    new Hierarchical
                    {
                        Name = "Sales Report",
                        Subdirectories = new List<Hierarchical >()
                {
                            new Hierarchical  {Name = "Quarterly Report"},
                            new Hierarchical  {Name = "Annual Report"}
                        }
                    },
                    new Hierarchical  {Name = "Profit Report"},
                    new Hierarchical  {Name = "Revenue Report"}
                }
            },
        };
    
        public class Hierarchical
        {
            public string Name { get; set; }
            public List<Hierarchical> Subdirectories { get; set; }
        }
    
        public static string GetFullPath(C1MenuItem item)
        {
            if (item.ParentItem == null)
                return item.Header;
            return $"{GetFullPath(item.ParentItem)} / {item.Header}";
        }
    }