Jade: Change active menu item in parent template

Question

I have a navigation bar in my parent jade template and I\'d like to highlight the item which is currently in view. So if I\'m on the blog page,

ul
  li Home         


        

Answer 1

Here's a simpler way:

Use this in your layout.jade (where nav is the name of the page that's active. nav = 'about' for example)

ul(class="#{nav}")
  li.home Home
  li.blog Blog
  li.contact Contact Us
  li.about About

Then put this is your CSS:

ul.home li.home,
ul.blog li.blog,
ul.contact li.contact,
ul.about li.about {
    color: red;
}

The only css rule that will apply is the one whose ul class exists. You'll need to pass in a variable nav that equals 'about', 'home', 'contact', or 'blog' depending on what page you're on.