Need up to 30 seconds to load.
in this tutorial you'll learn how to
make a nav link active for each page
with JavaScript alright so I have a
simple example project here and I want
to mention that this is the best
solution out there this will work even
if you have some kind of query string in
the URL or some kind of hash in the URL
I've seen some other Solutions out there
and they run into issues once you get
into these uh once you get these things
into your url it also works on the home
page so if you just have forward slash
or no nothing at all the past name will
still be forward slash we'll talk about
that but we'll also work on the home
page and it will also work if you have
some kind of index.html so just to walk
you through the example here we have
four pages index Solutions projects and
contact.html right so this is just a
simple nav bar I have a separate video
in this playlist or you could check out
one of the links in the description as
well if you want to see how to build a
responsive nav bar like this
um but here we have those four links now
what we want is for example on the home
page that this is there's some kind of a
visual indicator right I'm we are on the
solutions page that this has the visual
indicator and the way that we're going
to do that is with a class so what we
can do is we can just say for example
active
and we're just going to make this
a color of white so these nav links
right now they have a white color but
it's a bit of a lower opacity 75 percent
here right so when they get the active
class they're going to be a hundred
percent opacity right just normal white
color right so now the trick is how to
know which nav link should get this
active class right so now we're going to
write some JavaScript and to make all of
this work you're going to run into
issues if you're if your age wraps right
so you need to make sure that you're
linking properly to these pages right so
here in the in the nav here I'm linking
to forward slash
solutions.html now the problem is if you
if you just load your your HTML like
this in the browser and then click on
solutions for example it's gonna it's
gonna go to the root of your computer
because that's what forward slash means
it's the root of something so you're
saying we should link into a
solutions.html file at the root right so
right now on my computer that's going to
be the the C drive it's going to be the
the root here but there is of course no
solutions that HTML file there it's in
this folder right so to make this work
I'm going to use a server and the server
I'm going to use this live server it's
the most popular one you probably
already have it but if you don't yet
then you may want to install this
extension once you've installed this I
can right click here and click on open
with live server and it will open it up
on a server right it's all local
but then this this will become the root
of your project right and it has some
settings here I can just remove that
doesn't we don't need that but that will
be the root now so now when I click on
the solutions here it's still forward
slash Solutions but the root is here
right so here we actually do have a
solutions.html file you may actually get
five five zero zero I don't know why
it's giving me 5501 but doesn't really
matter
um
but now I can click around here and at
least we can go to these different pages
now right so now let's say on on the
solutions page we want to add the active
class to the solutions nav link right so
now we're going to have to write some
JavaScript so there are two things that
we need and I'll show you it in the
console first so first of all we're
going to use the URL and we can get that
with JavaScript actually so in
JavaScript actually in the browser we
get the window object this is sort of
the global objects in the browser it has
a lot of stuff here it has all sorts of
methods and properties now one thing
that's actually very interesting for us
is called the location
um property here let's take a look if we
can find it how we can also just type it
so we can write window.location
and here it gives you some information
about where we are right so it says
something about the URL so it says
something for example
um the host name okay it also gives us
what we're actually interested in here
is the path name so you can see the path
name here is
solutions.html it's forward slash
solutions.html we can use this and we
can that's the URL and we can compare
this with the href here in the nav links
now that's the trick here so this href
also has forward
slash.html so what we can do is when we
load the page we're going to go over
each nav link we're going to check its
href we're going to compare that with
the URL here and that's the trick so
here in our script we're going to need
two things we're going to go over each
nav link when we load the page so we
need to select all those nav link
elements so we can say nav link else I
like to append l or else to my variable
names if we're working with HTML
elements and then we can select all
elements so we can say documents query
selector all in this case because it's
multiple and it's dot nav underscore
underscore link right I'm using bem
notation here for my last names right so
it's really important if you work with
web development that you have mastered
the underlying fundamentals those are
both CSS as well as JavaScript I have
courses on them both I highly recommend
you check them out if you want to take
it to a professional level so that's all
the nav link elements and then we also
need to know when we load the page when
we go to solutions.html below the page
we want to grab the path name that we
are currently on
right so we can say window path name and
that's just window.location.pathname
right now aprica is here and it's just
all lowercase those are the two things
that we need here so then what we can do
is we can we can go over each nav link
and we can compare its href with what's
in the window path name so we can say
nav link elements for each one
so then we're working with the
individual nav link l we can check if
this
um nav link l dot href and we can
actually see what dot href gives us so
what you can do is you can select this
in your elements Tab and you can see it
says something forward it says something
with dollar sign zero that means you can
you can use it here
right so I can check what's href is
right this is what you get when you take
the href of that nav link you actually
get the complete URL
so we can check if this href includes
this path name in the window the path
name in the window is just going to be
forward slash
solutions.html right which is included
in this case so here we would add the
active class so if this href includes
this window path name
then we want to add the active class so
then we can say for this nav link
element we're going to add a class class
list add it's going to be the active
class that we want to add
right we're gonna fine tune this in a
second but this is the the basic stuff
so now if I refresh here you can see
that Solutions has the active class
right because it's wider right so we can
also double check this you can see it
has the active class right if I click on
Project it's the project link that has
the active class now right so every time
you click on a link you're essentially
loading a new HTML file it's linking
those HTML files are linking to this
script file so the script file is being
loaded again right so it will run it
will run again so when I click on
contact
we're running this code here right so
it's going to take all the nav links
it's going to take the path name in the
window which is forward slash
contact.html so then we're going to go
over each nav link we will take each nap
links href so in contact.html that's
going to be
um this one we're going to take the href
the href of this one
is this is this string right so it's a
complete URL and we're going to check if
that includes the window.path name which
is forward slash contact.html in this
case and that's true for contact right
so then this nav link gets the active
class right so you can pause the video
and try to follow the logic one more
time now you may run into an issue now
when you go to the home page so if we go
to the home page you can see that all of
them get the active class right so
events back now you can see that all of
them now get the active class why is
that well that's because when you go to
the home page we don't have something
like home or in in this case index.html
we don't have that we usually just have
forward slash or nothing so let's see on
this page what the path name is so
window.path name window sorry window
location.path name is just forward slash
here at the root of the URL right so
it's just going to be forward slash and
so then we're going to check does this
we're going to go for each nav links
href so that's going to be you know the
complete your L for example on this on
the solutions here that would be
this
um your this this is the href of the
solutions link right and we're going to
check does this href include this
forward slash and yes that's actually
the case it's not an exact match which
is actually what we want right it's just
gonna check if it includes um that's
forward slash that's how we've set
things up now and so this is not the
ideal solution if we're going to modify
this a little bit so this href
um a cleaner way would be to take the
the path name of this href as well so
then you have two two path names to
compare essentially so how do you take
the path name of this of this string
here well you can just turn this into a
normal URL objects
so that's going to be this href right
and then you can simply take its path
name right so you can sort of create an
URL object with new URL you can pass a
string it will turn that into a URL
object and then you can take the path
and just like we can take the path name
of the location
so if you do that you just get the
forward slash
solutions.html right so then we we can
just we can just strictly compare
whether the path name of the window
location is the same as the path name of
this href and that's a cleaner way of
doing it it's going to allow for that
exact match so what we're going to do is
we're going to go over each Naval link
we're going to take its path name as
well so we're going to say nav link path
name
then we're going to use that new URL
Constructor so we're going to say nav
link l.href and then we're going to take
its path name
so now we have two path names and we can
just compare them you know with equally
right so with equal signs so you can
just say if the window path name is the
exact same as the nav link path name
then there is a match a proper match
right so let's try this so now when you
go to Solutions it still works for
projects contacts Solutions it all works
and now if you go to home it also works
because the the path name of the home
link here
is a forward slash right of the intro
it's just that's just going to be
forward slash and the path name of the
of the window location here is also
going to be forward slash even though we
don't see forward slash here
it's still gonna be
uh that's simply how how browsers have
done it the path name is still forward
slash here as well so you have an exact
match right so this is a cleaner way of
doing it this will allow for the for the
home route to work properly as well now
maybe
um you have something like initially
when you first example first load starts
the the web server
maybe
um it's gonna load index.html like this
and now it's not going to work because
the path name of the look of the window
here is in the forward slash index.html
and the path name of the home link is
simply forward slash right but in this
case the home link should still get the
active link as well so what you can do
here if you can modify this a little bit
most of you maybe don't you don't really
need this in production because
you know when you first load this web
server here this live server it's gonna
pick the index.html file and it's going
to load it at this route right so then
the home is not going to be active so
that looks a bit strange so I'm going to
add these parentheses here because now
we're going to have another condition
here or we're going to add another way
of adding this active class because if
the win if this is an exact match the
nav link path name and the window path
name we want to add the active class but
also if it's not an exact match right so
at the Active class when this is true or
when this is true so or the window path
name is that index.html file
all right so then we can say that's the
index forward slash index.html
and
the nav link path name is for simply
forward slash in that case we also want
to add the active class to that nav link
right so if you want to make sure that
if you go to index.html it also adds the
active class for the Home Route this
already this already is getting a bit
complicated now but this is how you
would do it so if we save now now you
can see when I go to index.html it also
has the active class and everything else
also still works right so don't worry if
this is a bit complicated but it's
really important that you have mastered
JavaScript if you want to work as a web
developer maybe you're already working
as a web developer it's a really good
idea to really hone in those
fundamentals I have a JavaScript course
a lot of people have you know sent me a
lot of emails thanking me for how much
the course helped them same goes for the
CSS right you need to be able to do
flexbox CSS grid these are crucial
concepts for any web developer so
definitely check out my courses the
links are in the description if you want
to take it to a professional or advanced
level by the way if this was helpful I'd
really appreciate it if you could like
And subscribe also check out my courses
on CSS and JavaScript if you want to
take those skills to an advanced level
because in there we will build some
beautiful real world projects from
scratch so you can see how everything
fits together and really Master CSS or
JavaScript and I will also release other
courses from like react and node.js so
if you want to be notified then make
sure you are subscribed to the email
newsletter you can find a link in the
description thanks for watching and I
hope to see you soon
