Search code examples
ihp

Highlighting active link with arbitrary number of query parameters

I'm trying to highlight a link in the main navigation bar by adding the "active" css class with ("active", isActivePath MyAction) which works but I would like it to also add the "active" class even if the action has some params in the url e.g.:

This code:

<a class={classes ["nav-link dropdown-toggle", ("active", isActivePath ItemsAction)]} href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

correctly highlights for the URL /Items but it does not highlight if the url is /Items?category=HelloKitty or anything else appended to the url.

Is there a way to make it highlight if the base-url or the start of the url is /Items regardless of anything behind it?

Thanks!

Solution

  • Check out isActivePathOrSub. It does exactly what you want.

    Then the code should be this:

    <a class={classes ["nav-link dropdown-toggle", ("active", isActivePathOrSub ItemsAction)]} href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">