Set active item CSS class when in vertical, hamburger mode

[HappyCamper]

Hi there,

I would like to set the active item in the menubar a different class (So that you can visually see that the item is selected, and expand the parent, if required).  How can I do this?  

To know the selected item I'll be writing a function that looks at the current routing in blazor, then iterate through the menu items to find the active item, and then set the class of the active item.  doable?

[Saranya Dhayalan]

Hi Rudi, 

 

Thank you for contacting Syncfusion support 

 

We have checked your reported query, you can achieve this by override the e-selected class in the menu item. Please find the  below code snippet: 

 

@using Syncfusion.Blazor.Navigations 

 

<div class="control-section"> 

    <div class="menu-control"> 

        <SfMenu Items="@menuItems"></SfMenu> 

    </div> 

</div> 

@code{ 

    private List<MenuItem> menuItems = new List<MenuItem>{ 

            new MenuItem 

            { 

                Text = "File", 

                IconCss = "em-icons e-file", 

                Items = new List<MenuItem> 

            { 

                    new MenuItem { Text= "Open", IconCss= "em-icons e-open" }, 

                    new MenuItem { Text= "Save", IconCss= "em-icons e-save" }, 

                    new MenuItem { Separator= true }, 

                    new MenuItem { Text= "Exit" } 

                } 

            }, 

            new 

            MenuItem { 

                Text = "Edit", 

                IconCss = "em-icons e-edit", 

                Items = new List<MenuItem> 

            { 

                    new MenuItem { Text= "Cut", IconCss= "em-icons e-cut" }, 

                    new MenuItem { Text= "Copy", IconCss= "em-icons e-copy" }, 

                    new MenuItem { Text= "Paste", IconCss= "em-icons e-paste" } 

                } 

            }, 

            new MenuItem 

            { 

                Text = "View", 

                Items = new List<MenuItem> 

            { 

                    new MenuItem { 

                        Text = "Toolbars", 

                        Items = new List<MenuItem>() 

                    { 

                            new MenuItem { Text= "Menu Bar" }, 

                            new MenuItem { Text= "Bookmarks Toolbar" }, 

                            new MenuItem { Text= "Customize" } 

                        } 

                    }, 

                    new MenuItem { 

                        Text = "Zoom", 

                        Items = new List<MenuItem>() 

                    { 

                            new MenuItem { Text= "Zoom In" }, 

                            new MenuItem { Text= "Zoom Out" }, 

                            new MenuItem { Text= "Reset" }, 

                        } 

                    }, 

                    new MenuItem { Text = "Full Screen" } 

                } 

            }, 

            new MenuItem 

            { 

                Text = "Tools", 

                Items = new List<MenuItem>() 

            { 

                    new MenuItem { Text= "Spelling & Grammar" }, 

                    new MenuItem { Text= "Customize" }, 

                    new MenuItem { Separator= true }, 

                    new MenuItem { Text= "Options" } 

                } 

            }, 

            new MenuItem { Text = "Help" } 

            }; 

} 

<style> 

    .e-menu-wrapper ul .e-menu-item.e-selected{ 

        background-color: green; 

        color: white; 

    } 

    .e-menu-wrapper ul .e-menu-item.e-focused { 

            background-color: green; 

            color: white; 

     } 

    .e-menu-wrapper .e-ul .e-menu-item.e-focused{ 

        background-color: green; 

        color: white; 

    } 

    .e-menu-wrapper .e-ul .e-menu-item.e-selected{ 

         background-color: green; 

        color: white; 

    } 

 

</style> 

 

Please check the above code snippet and get back to us if you need further assistance on this. 

 

Regards, 

Saranya D