1. Home
  2. Forum
  3. Blazor
  4. Set active item CSS class when in vertical, hamburger mode

Set active item CSS class when in vertical, hamburger mode

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?

1 Reply
SD Saranya Dhayalan Syncfusion Team April 20, 2020 06:18 AM UTC

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 


Loader.
Up arrow icon