Blazored Menu Idea

gistfile1.txt

<BlazoredMenu>
    <BlazoredMenuItem>
        <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
            <span class="oi oi-home" aria-hidden="true"></span> Home
        </NavLink>
    </BlazoredMenuItem>
    
    <BlazoredMenuItem>
        <NavLink class="nav-link" href="counter">
            <span class="oi oi-plus" aria-hidden="true"></span> Counter
        </NavLink>
    </BlazoredMenuItem>
    
    <BlazoredSubMenu Header="Sub Menu">
        <BlazoredMenuItem>
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </BlazoredMenuItem>
        
        <BlazoredMenuItem>
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </BlazoredMenuItem>
    </BlazoredSubMenu>
    
    <BlazoredMenuItem>
        <NavLink class="nav-link" href="fetchdata">
            <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
        </NavLink>
    </BlazoredMenuItem>  
</BlazoredMenu>

This is an elegant approach. Congrats.

I'm more interested on a dynamic menu. I mean, populate a helper and send helper to a menu component. Something like:

var MyMenu = new MenuHelper();
MyMenu.Add( "/", "Home" );
MyMenu.Add( "/counter", "Counter" );

var MySubMenuStuff = new MenuHelper();
MySubMenuStuff( "/stuff/about", "about" );
MyMenu.Add( "Stuff",   MySubMenuStuff );

Calling the component:

   <BlazoredMenu helper=@MyMenu>

By the way, I tried to put <NavLink into a loop unsuccessfully, at the end I wrote my 'own' NavLink. The only "complexity" is to know if the item should be active (because is a link to the current url). This is my draft:

        @foreach (var item in ItemsMenu)
        {
            <li class="nav-item px-3">
                <a class="nav-link @(item.IsCurrentUrl?"active":"") " tabindex=""
                   onclick=@( () => { ItemClick(item); } )>
                    <span class=@item.IconClass aria-hidden="true"></span>
                    @item.Label
                </a>
            </li>
        }


    public class MenuItem
    {
        public MenuItem(string href, string label, string iconClass="")
        {
            Href = href;
            Label = label;
            IconClass = iconClass;
        }

        public string Href { set; get; }
        public string Label { set; get; }
        public string IconClass { set; get; }
        public string HrefAbsolute { set; get; }
        public bool IsCurrentUrl { set; get; } = false; 
	// public IEnumerable<MenuItem> SubMenus {set; get; } <-- with submenus 
    }

    public class NavMenuBase : BlazorComponent
    {
        [Inject] public Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper { get; set; }

        protected bool collapseNavMenu { get; set; } = true;

        protected void ToggleNavMenu()
        {
            collapseNavMenu = !collapseNavMenu;
        }

        protected MenuItem[] ItemsMenu { set; get; }

        protected override void OnInit()
        {
            UriHelper.OnLocationChanged += OnLocationChanged;
            ItemsMenu = new MenuItem[]
            {
                new MenuItem("/","Home", "oi oi-home"),
                new MenuItem("counter","Counter"),
                new MenuItem("/some/random/path","Sample"),
            };
            OnLocationChanged(null, null);
        }

        protected void ItemClick(MenuItem item)
        {
            UriHelper.NavigateTo(item.Href);
        }

        public void Dispose()
        {
            UriHelper.OnLocationChanged -= OnLocationChanged;
        }

        private void OnLocationChanged(object sender, string newUriAbsolute)
        {
            foreach (var item in ItemsMenu)
            {
                item.HrefAbsolute = UriHelper.ToAbsoluteUri(item.Href).AbsoluteUri;
                item.IsCurrentUrl = (item.HrefAbsolute == UriHelper.GetAbsoluteUri());
            }
            StateHasChanged();
        }

    }

I will be posted to see your code. Regards.

I agree, it’s rare my apps have a ‘static’ menu, it’s usually composed based on the user