django template tag for active CSS class

Navigation bar is an important part of the web application since it is the map that guides the users in different parts of the application. For better user experience navigation bars should indication which option is currently selected by the user. A common way to indicate which option is selected is by simply changing the CSS style of the selected option.

Vincent Foley has a very good article in his blog of how to implement a navigation bar in django. I include the latest paragraph of his post here, so if you are not familiar with url patterns and django template tags please read the full article of Vincent:

## tags.py
@register.simple_tag
def active(request, pattern):
    import re
    if re.search(pattern, request.path):
        return 'active'
    return ''

<!-- navigation -->

{% load tags %}
<div id="navigation">
    <a class="{% active request "^/$" %}" href="/">Home</a>
    <a class="{% active request "^/services/" %}" href="/services/">Services</a>
    <a class="{% active request "^/contact/" %}" href="/contact/">Contact</a>
</div>

This is a pretty good implementation but from my point of view it has one problem. It binds the url patterns with the template page. If you need to change the url pattern you must not forget to change the template also. Furthermore, what happens if you ship the application and the client decides to change the urls of the application.

Fortunately django has two features that allows to push this implementation one step further.
The first feature is that in django we can name the the url patterns, so the urls.py will look something like this:

## urls.py
urlpatterns += patterns('',
(r'/$', view_home_method, 'home_url_name'),
(r'/services/$', view_services_method, 'services_url_name'),
(r'/contact/$', view_contact_method, 'contact_url_name'),
)


The second feature is that we can create variables in the template page, the following code creates three variables (home, services and contact) these variables holds the url patterns for the respective names:

{% url home_url_name as home %}
{% url services_url_name as services %}
{% url contact_url_name as contact %}

Combining these two features of django we can modify the code of Vincent as follows:

{% load tags %}

{% url home_url_name as home %}
{% url services_url_name as services %}
{% url contact_url_name as contact %}

<div id="navigation">
    <a class="{% active request home %}" href="home">Home</a>
    <a class="{% active request services %}" href="services">Services</a>
    <a class="{% active request contact %}" href="contact">Contact</a>
</div>

As you can see we have totally decoupled the url patters from the template page. I know we have coupled it with the url names but there are no reasons whatsoever to change the url names since they are not visible anywhere, from now on we can change the url patterns as we wish.
Also note that the href tag has changed to the new variable that we created so it points to the correct url.

Important: There is not need to change the template tag.

Enjoy.

About these ads