Question

I’m having trouble conceptualizing how to render menus with active states in an Express app using Jade view partials.

I have something like this:

ul.menu
  li
    a(href='/some/route').active
  li
    a(href='/another/route')

What I’d like is for the .active class to be applied to the current route, so my CSS can render an active UI state.

When I wrote in PHP, this would’ve been accomplished through some complex chain of if/else, statements, but I’m assuming there’s a more elegant approach. What am I missing?

Answer 1

Jade is ignorant about the route. I don’t think there’s any way to avoid the if/else in one form or another.

In Express, just pass the route as a local:

res.render('my_view', {
  current: 'current/url'
});

And in the view, have an array of menu links and do something like:

ul.menu
  for each item in links
    li
      if (item.url == current)
         a(href=item.url).active
      else
         a(href=item.url)