Toggle active link Bootstrap navbar Toggle active link Bootstrap navbar express express

Toggle active link Bootstrap navbar


You can try with something like that in you jade layout :

li(class=title=='Home'?'active':undefined)  a(href="/") Homeli(class=title=='About'?'active':undefined)  a(href="/about") Aboutli(class=title=='Contact'?'active':undefined)  a(href="/contact") Contact

Then just add this to your server.js :

app.get('/', function (req, res) {  res.render('index', title: 'Home')});app.get('/about', function (req, res) {  res.render('about', title: 'About')});

This way, you can also remove the hard coded title in your layout and modify it through this solution as :

title #{title} | Test Application

And it will render this as a title for your home :

Home | Test Application


Here the solution I've found (I dont have the link anymore, sorry for the code owner)

ul.nav    -var obj = { 'home':'Home', 'about':'About', 'contact':'Contact' }    -each val, key in obj         -if (id == key)             li.active               a(href='#{key}') #{val}         -else                         li               a(href='#{key}') #{val}

and I set the server.js as

app.get('/about', function (req, res) {    res.render("about", {        title: 'About',         id: 'about',        user: JSON.stringify(req.user, 0, 2)    });});