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 🔗
- CodePen: codepen.io/Cod...
- MDN docs on aria-current: developer.mozi...
---------------------------------------
📹 Related Videos 📹
- Responsive Navbar: • Responsive Navbar HTML...
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic...
- Blog: chrispenningto...
- Twitter: / cpenned

[@Marty72]

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

[@CodinginPublic]

I didn’t realize that. Thanks so much!

[@DragonRoyZ]

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

[@CodinginPublic]

So glad it was a help!

[@johnmarkbondad6009]

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

[@CodinginPublic]

You’re welcome!

[@AlThePal78]

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

[@CodinginPublic]

Glad it was a help!

[@Fatima-ie5kj]

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

[@CodinginPublic]

Same! I've always done that until I just found this a few weeks back!

[@MarshallSC1]

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.

[@CodinginPublic]

Yes, been trying to learn aria labels myself and hoping passing on that knowledge is a help! (Thanks for the heads up on the video description! 😬)

[@anonymouseverx]

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

[@CodinginPublic]

So glad you enjoyed it!

[@adnanamin3666]

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

[@CodinginPublic]

You’re welcome! Glad it was a help!

[@neontuts5637]

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

[@CodinginPublic]

Glad it was a help! Just found about about the aria-current attribute myself and stopped using "active" classes everywhere :)

[@neontuts5637]

​@@CodinginPublic Awesome! Thanks again 🙏

[@humbulanimunyai6320]

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

[@CodinginPublic]

🙏

[@lukecartwright613]

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

[@CodinginPublic]

You’re welcome! Glad you enjoyed it!

[@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.

[@CodinginPublic]

Thanks for the suggestion. I just need to set up a different workspace for recording videos. I don't want to make things harder on people to watch, but I also don't want to have to switch up multiple settings every time I go to record. I'll work on it. Thanks for the suggestion!

[@astroboy3720]

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

[@CodinginPublic]

Sure thing! Glad it was a help. Thanks for saying something!

[@eatatjoe69]

this was pretty good. Informative and i think I learned JS

[@CodinginPublic]

Great!

[@charanathenuka3423]

excellent work! thank you very much❤

[@CodinginPublic]

You’re welcome! So glad it was a help!

[@kevonevans3107]

Thanks for this works perfectly

[@CodinginPublic]

You’re welcome!

[@lhc2721]

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

[@CodinginPublic]

Glad it was helpful!

[@absobel]

Very helpful, thanks

[@CodinginPublic]

Glad you found it helpful!

[@c4346]

Very clever, thanks for the tip!

[@CodinginPublic]

Sure thing!

[@devlife5596]

I need to sign in for comment. Firstly, Thanks for your TUT. Second. Can you please DO NOT change VS Font Style. Its very hard to read. Its extremely waste time visitors time for reading your code. Any way, I still like this videos. Thanks for your time!

[@CodinginPublic]

Glad you’re enjoying the channel! And I appreciate your opinion on the font.

[@twinconceptsdesign]

Really great 👍 👌

[@hamzanouh9153]

Great and easy way

[@CodinginPublic]

Thank you so much 😊

[@amjadnikzad4890]

thank you it was informative!

[@CodinginPublic]

Great! Thanks for saying something!

[@pc8406]

thank you😊

[@CodinginPublic]

You're welcome 😊

[@samnorte1891]

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

[@CodinginPublic]

Hmm. I don’t remember? Been too long since I built this…it should work the same though unless I overwrote the styles somehow here?

[@lvekua]

Love it! ❤

[@CodinginPublic]

Thanks for saying something!

[@lvekua]

@@CodinginPublic actually I wanted to ask you if this method could work with navigation that links to other sections with ids on the same page.

[@blackpurple9163]

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

[@CodinginPublic]

Glad you enjoyed it! There's not an easy way to do it with the underline property, but you could do something like this with an ::after pseudo-element? You'd likely have to create a custom keyframe animation, but it's possible. Not easy to explain in a comment though :)

[@blackpurple9163]

@@CodinginPublic I understand, I thought of doing that with an svg in the after pseudo-class but since I'm very new to svg, I don't know how to make it 'wavey' so it doesn't look like 2 images changing from one to the other

[@VectorBiH]

thank you

[@CodinginPublic]

You’re welcome!

[@Strawberry00562]

thanks bro

[@CodinginPublic]

You're welcome!

[@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?

[@CodinginPublic]

Well, because the aria attribute says something about the actual page you’re on, you’d always want it to reflect the actual page. If you’re just going for a visual styling for the parent of the sub page, you could add some regex or something to check the current url against your parent pages and add a class of “active” or something to those parents?

[@figureof8795]

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: document.querySelectorAll('.nav-link').forEach (link => { console.log(link); }) EDIT: does the file have to be html or can it be php?

[@CodinginPublic]

Yeah, PHP would be different. Sorry I can't help with PHP.

[@figureof8795]

@@CodinginPublic no problem. Thanks for the response.

[@tomasslezak3628]

Nice trick

[@tulioferreira8766]

ajudou muito, thank you parça

[@CodinginPublic]

You’re welcome!

[@luckyrao6271]

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

[@CodinginPublic]

You need to use some kind of framework that allows you to build components (Astro, Hugo, etc.) and then use that component on each page. Hope that helps!

[@icwhy4366]

i'm pretty sure you can use sections to do this

[@icwhy4366]

its possible using java jquery I just tested it.

[@sydneysolomon5500]

What software did u use for your coding?

[@CodinginPublic]

VSCode :)

[@sairohit5510]

how to do this with scroll snap?

[@CodinginPublic]

Here’s a video I did on scroll snap. Hopefully this helps? Add Scroll Snap with CSS kzbin.info/www/bejne/jKavq4GalrV1obM

[@marwanbaz5885]

how to use this in a react website?

[@CodinginPublic]

If you use React Router, the NavLink component sets this by default. So you can just style it with CSS.

[@izzatrahman451]

good video but I am stuck at document undefined :(

[@CodinginPublic]

Did you link to your JavaScript document in your HTML page?

[@izzatrahman451]

@@CodinginPublic ya, i put my nav in the layout might be the issue?

[@CodinginPublic]

There are a few ways to this this, but move it to the bottom of your document just before the closing body tag and see if that helps :)

[@nevendrean5772]

You may need to "link.removeAttribute('aria-current')" before

[@CodinginPublic]

Perhaps on a SPA? But if you’re changing routes, any of those manually-added attributes will clear.