⚠️ This lesson is retired and might contain outdated information.

Style Navigation Based on Route in Nuxt

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated a month ago

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.

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.

egghead
egghead
~ 29 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today