Show Active Nav Link with JavaScript

In this video, I'll show you how to show which page is the active webpage to set it apart visually.

🔗 Key Links 🔗

---------------------------------------

📹 Related Videos 📹

---------------------------------------

🌐 Connect With Me 🌐

[Marty]

Just a heads up, the text-decoration shorthand notation doesn't work in Safari.

[DragonRoyZ]

Of all the Tutorials, this is the most straight forward and short solution. Thanks a lot!

[johnmarkbondad]

I never thought this would be done in a simpler way. thanks

[MarshallSC]

And, you just elevated what already was a high quality content of tutorials.
Aria labels are important but often neglected.

P.S. Video description is from one of the previous videos.

[AlThePal]

Literally made my life easier I am trying to do my own stuff because bs got confusing after a while when I was using it so I want to do my own thing now thanks for the insperation

[neontuts]

Thanks for sharing this amazing way to add the current page indicator. It's easy to implement and adds accessibility.

[adnanamin]

Very clear explanation in a short amount of time! Clever! Thanks a lot.

[anonymouseverx]

Extremely helpful with new solutions like always. Thank you so much, Chris.

[humbulanimunyai]

As always, clear step by step explanation, anyway i enjoyed that part of window object

[Fatima-iekj]

I always make a custom class active and switching between this class manually between page's but not anymore after watching this.🥰 Thank you

[astroboy]

I needed this so much, thank you for this clear vid.

[lukecartwright]

This is awesome! It's both accessible AND cool. Thank you

[lhc]

thanks, this was to the point and nicely explained. :)

[ClarkeDesign]

Nice tutorial. For tutorials though, can you use a more easy to read font (for class and href for example) for some of your elements in the code. Just makes it easier to digest.

[blackpurple]

Great explanation, btw any way to animate that wavy underline so it looks like it's moving?
With css only if possible otherwise any other way?
I'm using react+tailwind so I don't want to depend on any other libraries or frameworks if possible

[axvgarcia]

thanks for the video! one question, how can I keep the aria-current attribute in a navigation link after selecting a child page of that link?

[samnorte]

Fantastic! Thanks for the tutorial, but it looks like this is not working for dropdown menu, isn't it?

[figureof]

For some reason my console is not showing the links. Ive correctly linked my external JS file but the following code does'nt seem to work:


(link => {
console.log(link);
})

EDIT:

does the file have to be html or can it be php?

[sydneysolomon]

What software did u use for your coding?

[luckyrao]

how to use same navbar in all webpages of the website and also this trick to show active nav link