Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Style Navigation Based on Route in Nuxt


    Your navigation should visually identify which page the user is currently visiting. This lesson walks through adding styles to the navigation element which matches the current page the user is viewing.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    I'm going to ditch this header and make it so the navigation shows me where I am instead of relying on this. I'll do that real quick by jumping between each of these pages and deleting it.


    Now with all of them gone, we can focus on the navigation. The navigation is in the default view. First with each of these next links, I'm going to add a couple classes from Takions, one being the link which essentially gets rid of the underline and then other being underline hover which gives me an underline when I hover on it. It looks like this.

    To know which one of these is currently active, let's add an underline. We do that by specifying a class. I'll call this nux link active and then just say text decoration underline. Right now we're on the show page.

    You can see show is underlined and home is underlined. That's because the current URL matches show and just the simple forward slash. To fix that, there's a convenient class called exact active. You can see because we're using exact active instead of just active that home no longer shows up. When I click on these and they lose focus, they stay underlined now.

    I'm also just going to say font weight bold to make it stand out a tiny bit more. The last tip here is in your config if you want to change the name of that class, the default is just nux link exact active. You can always just say router link active class something else. But I'm just going to use the default because nux link exact active works fine just for me.