Var relativePath = NavigationManager.ToBaseRelativePath(NavigationManager.Uri).ToLower() Protected override void OnInitialized() => NavigationManager.LocationChanged += (s, e) => StateHasChanged() īool IsActive(string href, NavLinkMatch navLinkMatch = NavLinkMatch.Prefix) In your case if the route is active you simply want to put and active class on the element. The NavLink component places a class on the anchor object when it is being rendered based on weather the current navigation location starts with or is equal to the href. In blazor the template does this with the NavLink component. nav-item bg-gray-100 m-1 font-bold text-gray-700 px-4 py-2 rounded-sm shadow-lg But with active class generated by Tailwind CSS I can't do it. Is there something simmilar to achieve that? Should I pass manually id from onclick event of every NAvLink or maybe other solution would be proper?Įdit: I found info ( link) that with Bootstrap NavLink toggles an active CSS class based on whether its href matches the current URL. Var btns = header.getElementsB圜lassName('btn') Var header = document.getElementById('myDIV') I think it should be something like this in JavaScript ( w3schools link):

I've tried a few solutions as this two NavLinks: bool _active = false ĪctiveClass = _active ? ' bg-purple-400' : '' īut of course it is not it.

I know it is not doing by default bootstrap CSS or site.css. In default Blazor template when I click on menu item, it changes background color, till click to other menu element or changing route component page - then that page menu element changes color, other elements return to default background. I created horizontal menu nav bar with new styles. I've started building Blazor server app with Tailwind CSS.

Blackwind mouse change colors