Styling the navigation links based on active route

[ajmchambers]

I think it would be good to include an example of styling the active navigation links based on the current route as this probably a pretty common ask, its basically one of the first things I tried to get working and the right approach is not immediately obvious.

To be complete it would be good to have an example of styling a link that has child routes e.g.
if the link was to /items which displayed a list of items.
Then navigating to /items/item1 should still consider the link as active as it is a child route of items.

Not sure how best to do this, seems vaadin router passes route information down to the routed elements, e.g. location.params.id.

However since the navigation links are in app-index.ts where the router itself is attached it won't have access to that .

So one option would be to move the navigation links into one of the routed components (maybe an overall parent layout component that matches all routes, which handles the navigation bar itself with a slot for the content - then have child routes to '/' and '/about' for the home and about content.

Or another option would be to add an event listener in the app-index.ts that updates some state containing the current routing information (bit like this: vaadin/router#483).

window.addEventListener('vaadin-router-location-changed', this.handleRouteChange)

Maybe there is a better way, any thoughts?

[abdonrd]

I think the vaadin-router-location-changed is a good option:

window.addEventListener('vaadin-router-location-changed', (event) => {
  const { route } = event.detail.location;

  // And now you use the `route.name`!
});