SFMenu Selected like NavLink

[Sandro Rizzetto]

I wonder if the SfMenu Component has already a auto-mechanism like <NavLink> to check the current Url and set the e-selected class or if I have to do manually with some events

eg if a menuItem has a Url = "/counter" 

and I set 

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

    background-color: yellow;

}

I would like to see the menu highlighted

[Sivakumar ShunmugaSundaram]

HI Sandro,

Thank you for your query regarding the SfMenu component's ability to highlight menu items based on the current URL.

The SfMenu component does not have a built-in automatic mechanism like Blazor's <NavLink> to detect the current URL and apply the selected class for highlighting. However, since the Url property in <MenuItem> handles navigation, you can achieve the desired highlighting by using the ItemSelected event and HtmlAttributes to dynamically apply the selected class based on the selected menu item.

Below is a refined code snippet for your MainLayout.razor file, tailored to your requirement and leveraging the Url property for navigation and the ItemSelected event for highlighting.

@inherits LayoutComponentBase

@using Syncfusion.Blazor.Navigations

<div class="page">

    <main>

        <SfMenu TValue="MenuItem" Orientation="Orientation.Horizontal" CssClass="custom-menu">

            <MenuEvents TValue="MenuItem" ItemSelected="OnItemSelected" />

            <MenuItems>

                @foreach (var item in MenuItems)

                {

                    <MenuItem Text="@item.Text" IconCss="@item.IconCss" Url="@item.Url" HtmlAttributes="@GetMenuItemAttributes(item.Text)">

                    </MenuItem>

                }

            </MenuItems>

        </SfMenu>

        <div class="top-row px-4">

            <a rel='nofollow' href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>

        </div>

        <article class="content px-4">

            @Body

        </article>

    </main>

</div>

@code

{

    private string _selectedItem = "Home"; // Example selected item

    private List<MenuItem> MenuItems = new List<MenuItem>()

    {

        new MenuItem { Text = "Home", Url = "/", Id = "home" },

        new MenuItem { Text = "Counter", Url = "/counter", Id = "counter" },

        new MenuItem { Text = "Weather", Url = "/weather", Id = "weather" },

        new MenuItem { Text = "About", Url = "/Error", Id = "about" }

    };

    private Dictionary<string, object> GetMenuItemAttributes(string itemText)

    {

        return new Dictionary<string, object>

        {

            { "class", itemText == _selectedItem ? "e-custom-selected" : "" }

        };

    }

    private void OnItemSelected(MenuEventArgs<MenuItem> args)

    {

        _selectedItem = args.Item.Text;

    }

}

<style>

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

    {

        background-color: yellow;

    }

   

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

        background-color: yellow !important;

    }

    /* sub-menu item text */

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

        background-color: yellow;

    }

</style> 

Sample: Attached as zip.

Reference forum: Menu item stay selected on page | Blazor Forums | Syncfusion®

This solution meets your requirement to highlight the selected menu item (e.g., with a yellow background) when navigating via the SfMenu component. If you need further customization, such as handling sub-menus or additional styling, please let us know.

Regards,

Sivakumar S

Attachment: sample_1d0fdcd1.zip

[Sandro Rizzetto]

Thanks,
unfortunately in my project the main menu is placed in mainlayout and your solution works, but I have another one on every page; in this case when I click the class is set but another page is loaded and the status is lost

I will suggest something like looking the current uri NavigationManager.ToBaseRelativePath(NavigationManager.Uri) and compare with the Url property of the menuitem

In which event is it doable?

[LeoLavanya Dhanaraj]

Hi Sandro,

We apologize for the inconvenience caused by the delay greatly appreciate your patience and understanding.

According to the specified component sample structure, we have implemented the main Menu in the MainLayout.razor page. When a menu item in the main Menu component is clicked, a new Menu component is rendered for each menu item click, with each component displayed on separate Razor pages.

When we click on the main Menu, the corresponding Razor page Menu component will be shown, and the selection status is maintained for both Menu components. For your reference, we have included a sample and an output screenshot.

Additionally, we suggest using the ItemSelected event for your customization, which is triggered after a menu item is selected.

Attachment: sample_1780934b.zip

[Sandro Rizzetto]

but as I told, basing only on ItemSelected is useless if I reload the page

try to choose an Item and then hit F5.... the highlight goes away

on some event (which??) you have to compare the Url property of the item with the current uri of the page and if equals set the selected class

[Sivakumar ShunmugaSundaram]

Hi Sandro,

To achieve your requirement, we suggest you use Menu component's OnItemRender event. This event is triggered while rendering each menu item. We have shared a updated sample that will highlight the Menu component that is loaded in Home.razor file during initial render based on current URL validation.

Refer the below code snippet:

<SfMenu TValue="MenuItem">

    <MenuItems>

        <MenuItem Text="Home" Url="/"></MenuItem>

        <MenuItem Text="About" Url="/about"></MenuItem>

        <MenuItem Text="Contact" Url="/contact"></MenuItem>

    </MenuItems>

    <MenuEvents TValue="MenuItem" OnItemRender="onItemRender"></MenuEvents>

</SfMenu>

@code {

    public void onItemRender(MenuEventArgs<MenuItem> args)

    {

        var currentUri = NavigationManager.ToBaseRelativePath(NavigationManager.Uri);

        // Compare with the menu item's URL and set the active class

        if (args.Item.Url != null && args.Item.Url.Trim('/') == currentUri)

        {

            args.Item.HtmlAttributes = new Dictionary<string, object>

            {

                { "class", "e-custom-selected"}

            };

        }

    }

}

Sample: Attached as zip file.

Please check the shared details and get back to us if you need any further assistance.

Regards,

Sivakumar S

Attachment: sample_fe28abe0.zip