Dry way to apply current class to navigation elements in django templates

Question

Say there are navigations, nav1, nav2, nav3 and many subnavs within each of them.

For the css effect, you need to apply class=current to the currently selected navs.

What is the dry way to do that.

For the subnavs, you can check to see if request.get_full_path is the same as the url that subnav refers to, in the base template.

How can you make it dry for the navigation too.

Answer 1

In your approach, where you add a class to denote the active nav element to the element itself, you can add the name of the active nav element into the context from your view. Then, use some javascript to add the current class to the appropriate element.

For example, if you have the following nav elements:

<a id="home" href="#">Home</a>
<a id="about" href="#">About</a>

In your view, add a context variable current to denote the id of the current nav element by id:

return render_to_response('template.html',
                          {'current': 'home'})

Then in javascript (jQuery shown here):

$("#{{ current }}").addClass('current')

This will be evaluated as:

$("#home").addClass('current')

Which will in turn apply your #current CSS to the home element.

Another approach is to add a class to the body tag which identifies the currently active nav menu. Then in your css, you define styles for each body class which highlight the appropriate nav item. Then, your template inserts the current variable directly into the body class list, and there is no need for javascript.