ExpressJs: using Navbar on views ExpressJs: using Navbar on views express express

ExpressJs: using Navbar on views


You could pass the value of the "active" route as a local var to the partial..

<%- include('partial/nav', {active: "About"}); %>

Then, check the active var to set the "active" class in the nav partial template:

<ul class="nav navbar-nav navbar-right">     <li><a <%if(active=="Home"){%>class="active"<%}%> href="/Index">Home</a></li>     <li><a <%if(active=="About"){%>class="active"<%}%> href="/About">About</a></li>     <li><a <%if(active=="Work"){%>class="active"<%}%> href="/Work">Work</a></li></ul>

Here's a similar approach


You should load your navigation like this--

<script>$("#header").load("header.ejs");</script>

Then retrieve the url of the current page and from that retrieve the active page name . Then use this function to add the active class to the current page,

$(document).ready(function($){var url = window.location.href;$('.nav li a[href="'+url+'"]').addClass('active');});

NOTE: you need to retrieve the page name from your url through some function as it would be the full page url.

You will have to write the header.ejs only once and include it on every page.

Hope this helps!