Node.js, Express, EJS - active class on the current page in navigation

Question

I would like to display the “current” class on each of my navigation links, depending on which page I am in in my layout.ejs template.

Currently, the index of my express controller is as follows:

// About exports.about = function(req, res) { res.render('content/about.ejs', { title: 'About' }); }; 

And in my layout.ejs I have the following which I would like to render dynamically.

 <ul class="nav" id="nav"> <li><a href="/">Home</a></li> <li class="current"><a href="/about">About</a></li> <li><a href="/">Contact</a></li> </ul> 

Any ideas on how to achieve this?

Answer 1

You can include page_name: 'about' in the res.render data and then in the template something like:

 <li <% if (page_name === 'about') { %>class="current" <% } %> ><a href="/about">About</a></li> 

I have not tested the syntax, but that is the point.