Node.js Express + Jade (Active Class on Lined Item)

Question

How would I set an active tag to a class depending on the URL?

In the example below '/' (Home) is set to active.

.nav-collapse.collapse
  ul.nav.top-2
    li.active
      a(href='/') Home
    li
    li
      a(href='/about') About
    li
    li
      a(href='/contact') Contact
    li

Would it be better to inject something into the page to identify it as the active page?

possible duplicate of [Jade: Change active menu item in parent template](http://stackoverflow.com/questions/15719660/jade-change-active-menu-item-in-parent-template) — Pickels, May 15 '13 at 17:54

Michael Yin · Answer 1 · 2013-05-18T07:10:31.947

10

Here's what I do, like hexacyanide's example,

res.render('/path', {
  path: req.path
});

..and in layout.jade:

.nav-collapse.collapse
  ul.nav.top-2
    li(class=path=='/'?'active':undefined)
      a(href='/') Home
    li(class=path=='/about'?'active':undefined)
      a(href='/about') About
    li(class=path=='/contact'?'active':undefined)
      a(href='/contact') Contact

edited May 18 '13 at 07:10

answered May 14 '13 at 23:28

Michael Yin

1,764
13
13

score 1 · Answer 2 · answered May 14 '13 at 21:11

You can also consider adding id to body tag, with will be telling you on what page you are. And then you can specify simple CSS rules dependent of that id. It's very popular scheme, for example provided by Wordpress.

For this id you can use Jade variable provided by render method.

In your express code:

res.render('/', { id : 'home' });

In template:

body##{id}

and later in ul.nav

li.home
  a(href='/') Home
li
li.about
  a(href='/about') About
li
li.contact
  a(href='/contact') Contact

In CSS:

#home ul.nav li.home {
    background: red;
}

#about ul.nav li.about {
    background: red;
}

score 0 · Answer 3 · answered May 14 '13 at 20:59

0

Take a look at Jade's conditionals, documented on GitHub. You would want to pass the path to the render in Express like so:

res.render('/path', {
  path: req.path
});

Then in Jade, you would use a conditional like so:

if path == 'home'
  //active styling
else
  //not active

answered May 14 '13 at 20:59

hexacyanide

88,222
31
159
162

be careful path will come with a preceding slash – dciccale Aug 27 '15 at 21:43

Node.js Express + Jade (Active Class on Lined Item)

3 Answers3