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

Already subscribed? Sign In

Autoplay

    Style Navigation Based on Route in Nuxt

    John LindquistJohn Lindquist

    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.

    vueVue.js
    Code

    Code

    Become a Member to view code

    You must be a 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
    Transcript

    Transcript

    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.

    pause

    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.

    Discuss

    Discuss