Simple DRY Tabs using Django 1.3

**Placed in templates/includes/tabs.html**

<ul class="tab-menu">
    <li class="{% if active_tab == 'tab1' %} active{% endif %}"><a href="#">Tab 1</a></li>
    <li class="{% if active_tab == 'tab2' %} active{% endif %}"><a href="#">Tab 2</a></li>
    <li class="{% if active_tab == 'tab3' %} active{% endif %}"><a href="#">Tab 3</a></li>

**Placed in your page template**

{% include "includes/tabs.html" with active_tab='tab1' %}

More like this

  1. Menu/navigation bars in a tag by ep 6 years, 8 months ago
  2. Admin actions as buttons instead of a menu [v2] by itavor 2 years, 4 months ago
  3. Active page class for selected menu items by kunitoki 1 year, 6 months ago
  4. DRY menu Custom Template Tag by sergzach 2 years, 1 month ago
  5. Cookie based Messages (deprecated) by guettli 5 years ago


cferreir (on August 5, 2011):

Thanks for sharing. This was very helpful. Finally got my navigation working where it supports multiple/nested menu levels and shows which ones are active.


sergzach (on March 26, 2012):

Thank you! When I created a snippet #2722 I did not take into account the option with of inclusion tag.

I think your solution is better.

My decision have only one plus (your have several ones). In case of #2722 inheritance is possible. Sometimes it is more convenient and conceptual than inclusion.


sergzach (on March 26, 2012):

And one more plus in #2722. In your case if you want to mek whole fragment different (not only class attribute) you should write several times very similar code for each option. But I would like DRY menu.


sergzach (on March 27, 2012):

Now I use your snippet instead of mine. Thanks a lot!


ccarnell (on August 2, 2012):

This is such a clean solution; thank you so much for taking the time to share this!


jnns (on June 18, 2013):

Thanks for this, I didn't know about {% include with %}. This is great!


(Forgotten your password?)