Blazor Server Side (.Net Core) custom menu

1
votes

As pretty much new to Blazor, I am still finding a way to customize the <NavLink>. I am planning to make an application using Metronic Theme but I am still struggling to find a way to use it's navigation menu. Can we customize this <NavLink>? Any help will be appreciated.

Thank you

Regards J

2
blazorblazor-server-side.net-core-3.1
Can you explain more what do you mean by struggling?. You can add same html and css required for nav menu in some .razor file. It should give you the nav menu. - chindirala sampath kumar
Struggling means, I cannot customize <NavLink> component. It adds bootstrap active class to the selected Nav button, I want to change that "active" class to something like "metronic-active" class, is it possible? - DrXSsive

2 Answers

0
votes

The <NavMenu /> component is located in the <your project>/Shared folder. Yes you can customize it. By default ASP.NET Core tends to bundle Twitter's Boostrap UI framework in it's templates. The theme you want to use apparently also uses bootstrap so you may want to gut all the CSS and simply replace with the theme's recommendation.

You'll need a good foundation of how to use Razor Syntax to be able to jam your theme into an ASP.NET Core project.

0
votes

So after digging a lot, I find answer to my question..

There is a service named "NavigationManager" which holds all the information about the current URL of the page. We can use "NavigationManager.Uri" to determine which page we are on. Also, it has an event handler "NavigationManager.LocationChanged" which triggered whenever URL is changed. 

public void LocationChanged(object sender, LocationChangedEventArgs args)
{

}

By subscribing to this event, we can see where we are heading next, and can add custom classes to our navigation bar.

Cheers J