How do I indicate an active nav-item in a common header? - html

Question

I have a header that I plan to use on the top of all my pages. I'd like to keep it in a separate file (something I'm used to doing with php, but I'm new to the world of Bootstrap); however, I am not sure how I would handle dynamically assigning the active class to the nav-item that represents the current page. Does Bootstrap (4) have a baked-in solution for this sort of thing? I've been searching around but haven't found a good solution yet. Thanks in advance!
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-transparent fixed-top">
<div class="container">
<a class="navbar-brand" href="#">My Site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>

Answer 1

Bootstrap includes some jQuery and is not just CSS. However, you can always run some JavaScript or jQuery on page load that toggles the class based on reading an element when the page is loaded. For example you could:
1) have an identifier on each page (eg. class name inside an element on a page that holds the page's name/value). Example:
<h1 class="page-lookup">
Home
</h1>
2) set you jQuery in a function to read for class and grab the value of the element with a .val(). Example:
const activePage = $(".page-lookup").val()
3) Add an id on each in your navbar to uniquely identify them. Example:
<li id="home-page" class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
4) Run a switch case that looks up the stored value (activePage) for a match. In the case that matches you can run jQuery to update the class to include the "active" syntax that will trigger Bootstrap's formatting.
Example:
switch (activePage) {
case Home:
$('#home-page).attr("class", "nav-item active");
break;
case About:
$('#about-page).attr("class", "nav-item active");
break;
}