Menu item stay selected on page

[Kenney Phan]

Hi, I want my menu item to stay selected (color white) with respect to what page it's on. So if it's on home page, I want the 'Dashboard' menu item to stay the color 'white'. Thank you.

Attachment: SfNavBarHighlight_c7d376d9.zip

[Gayathri KarunaiAnandam]

Hi Kenney, 

We have checked your reported query. We can add “e-custom-selected “class to selected menuItem by which we set selection which is performed by using class attribute. We can select the specified item by using ItemSelected event as demonstrated in the below code snippet. 

  <SfSidebar Width="220px" DockSize="72px" EnableDock="true" Position="@Position" Target="#wrapper" @ref="@sidebar" @bind-IsOpen="@sidebarOpen" HtmlAttributes="@htmlAttribute" MediaQuery="(min-width: 600px)" EnableGestures="true"> 

            <ChildContent> 

<SfMenu TValue="MenuItem" Orientation="@VerOrientation"> 

                            <MenuEvents TValue="MenuItem" ItemSelected="@OnMenuSelect" OnOpen="@OnOpen"></MenuEvents> 

                            <MenuItems> 

                                @foreach (var item in MainMenuItems) 

                                { 

                                    <MenuItem Text="@item.Text" IconCss="@item.IconCss" Url="@item.Url" class=@(item.Text == _selectedItem ? "e-custom-selected" : "")></MenuItem> 

                                } 

                            </MenuItems> 

                        </SfMenu> 

</ChildContent> 

        </SfSidebar> 

@code 

{ 

private string _selectedItem = "Dashboard"; 

private void OnMenuSelect(MenuEventArgs<MenuItem> args) 

    { 

        _selectedItem = args.Item.Text; 

        if (args.Item.Text == "Administrator") 

        { 

            //sidebarOpen = true; 

            userHidden = false; 

        } 

    } 

} 

 

<style> 

 

    .e-menu-container ul .e-menu-item.e-custom-selected .e-menu-url .e-anchor-wrap { 

        color: #fff; 

    } 

</style> 

 

For your reference, we have modified your provided sample. Please check the below link. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp11097372170 

Please get back to us, if you need further assistance. 

Regards, 

Gayathri K 

[Kenney Phan]

Hi, thank you for your help.

How do I apply this if I want to highlight a sub-menu item with their parent item? 

For example, selecting "User Accounts" under "Administrator" will highlight both 'User Accounts' & 'Administrator'

Thank you

[Mohan Kumar Ramasamy]

Hi Kenney, 

Thanks for update. 

We have checked your reported query. We can achieve your requirement using ItemSelected event. Please refer below code snippets. 

       <SfSidebar Width="220px" DockSize="72px" EnableDock="true" Position="@Position" Target="#wrapper" @ref="@sidebar" @bind-IsOpen="@sidebarOpen" HtmlAttributes="@htmlAttribute" MediaQuery="(min-width: 600px)" EnableGestures="true"> 

            <ChildContent> 

                <div class="dock"> 

                    <div class="sidebar-item" id="toggle" @onclick="@Toggle"> 

                        <span class="e-icons expand"></span> 

                        <span class="e-text" title="menu">Menu</span> 

                    </div> 

                    <div> 

                        <SfMenu TValue="MenuItem" Orientation="@VerOrientation" ShowItemOnClick="true"> 

                            <MenuEvents TValue="MenuItem" ItemSelected="@OnMenuSelect" OnOpen="@OnOpen"></MenuEvents> 

                            <MenuItems> 

                                @foreach (var item in MainMenuItems) 

                                { 

                                    

                                <MenuItem Text="@item.Text" IconCss="@item.IconCss" Url="@item.Url" isSubmenu="false" class=@(item.Text == _selectedItem ? "e-custom-selected" : "")> 

 

                                    @if (item.Items != null) 

                                    { 

                                <MenuItems> 

                                    @foreach (var subItem in item.Items) 

                                    { 

 

                                <MenuItem Text="@subItem.Text" isSubmenu="true" class=@(subItem.Text == _selectedSubMenuItem ? "e-custom-selected" : "")></MenuItem> 

                                } 

                                </MenuItems>} 

                                </MenuItem> 

                                } 

                            </MenuItems> 

                        </SfMenu> 

                    </div> 

                </div> 

            </ChildContent> 

        </SfSidebar> 

 

@code 

{ 

    SfSidebar sidebar; 

     

    private string _selectedItem = "Dashboard"; 

    private string _selectedSubMenuItem = ""; 

    /* Open sidebar on click Administrator */ 

    private void OnMenuSelect(MenuEventArgs<MenuItem> args) 

    { 

        if (args.Item.HtmlAttributes["isSubmenu"] !=null && args.Item.HtmlAttributes["isSubmenu"]=="true") { 

            _selectedSubMenuItem = args.Item.Text; 

        } else { 

            _selectedItem = args.Item.Text; 

        } 

         

        if (args.Item.Text == "Administrator") 

        { 

            //sidebarOpen = true; 

            userHidden = false; 

        } 

    } 

 

} 

 

<style> 

 

    .e-menu-container ul .e-menu-item.e-custom-selected .e-menu-url .e-anchor-wrap { 

        color: #fff; 

    } 

 

        /* sub-menu item text */ 

    .e-menu-container ul .e-menu-item.e-custom-selected{ 

        color: #fff !important; 

    } 

</style> 

For your reference, we have prepared a sample based on this. Please refer below link. 

Link: https://www.syncfusion.com/downloads/support/forum/164607/ze/BlazorApp1362115031  

Please let us know, if you need any further assistance. 

Regards, 

Mohan kumar R