Home/ Questions/Q 8662019
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T16:38:08+00:00

I have a layout Jade view that has a menu via unordered list, and

  • 0

I have a layout Jade view that has a menu via unordered list, and I want to set the <li> to be <li class="active">...</li> when the current page is rendered in the browser.

I assume I will have to access the current request to determine when to set the attribute on the <li>

I can’t find any examples of how to do this so hoping someone can help

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this before your call res.render() in your route:

    res.locals.path = req.path;
res.render('/page');

    or

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

    Then you would have to do a bunch of if/else statements in your view (as the above solution suggests).

    - if(currentUrl === '/')
    li(class='active')
        a(href='/') Current Driver Standings
- else
    li
        a(href='/') Current Driver Standings

    I however, prefer to do this on client side instead, to keep my template files free from as much logic as possible:

    In page template file (this is ejs, not sure how to echo in jade):

    <body data-path="<%= path %>">

    Then with jQuery you can grab the path from body and attach an active class:

    $(function(){
    var path = $('body').attr('data-path');
    $('nav li a[href='+path+']').parents('li').addClass('active');
});

    Update: You can also just use var path = window.location.pathname instead of saving it to an attribute on body

    //no need to save path to <body> tag first:

$(function(){
    var path = window.location.pathname;
    $('nav li a[href='+path+']').parents('li').addClass('active');
});
    • 0