Style active navigation element with a Flask/Jinja2 macro

Question

I am using Flask/Jinja2 and Bootstrap 3.

I\'d like to add class=\"active\" to the current navigation element.

Those elements are stored in

Answer 1

Your code just defines a macro over and over again, it doesn't render anything. Avoid reading request.endpoint and use base templates to do this.

base.html

<ul class="nav nav-pills">
    <li class="{% block nav_here %}{% endblock %}">Here</li>
    <li class="{% block nav_there %}{% endblock %}">There</li>
    <li class="{% block nav_anywhere %}{% endblock %}">Anywhere</li>
</ul>

{% block content %}{% endblock %}

there.html

{% extends "base.html" %}
{% block nav_there %}active{% endblock %}
{% block content %}
    <blockquote>No matter where you go, there you are.</blockquote>
{% endblock %}

The base navigation defines empty nav_ blocks in the li class and the sub template sets the relevant one to active. You can extend this as far as you want to have sub-navigation within pages too.

Answer 2

Use Jinja2 macro in correct way. It's really an useful feature. In this case you do not have a proper understanding how it works. This post will explain it well hopefully. This is the macro for nav menu. Remember to put this macro somewhere above nav menu code. Otherwise Jinja won't find it when needed.

{% macro nav_link(endpoint, name) %}
    {% if request.endpoint.endswith(endpoint) %}
        <li class="active"><a href="{{ url_for(endpoint) }}">{{name}}</a></li>
    {% else %}
        <li><a href="{{ url_for(endpoint) }}">{{name}}</a></li>
    {% endif %}
{% endmacro %}

You have to define this code block separately in your template file. Do not put it in a loop or anywhere else. When you call the macro anywhere in your template this code block will execute and give you the desired output. See how to use this macro. nav-link() is like a regular function. Call it in your navbar code block. Remember You have to define these routes in server first. OR you can add these macros in a separate html files (let's say macros.html) and import any macro in it, anywhere you want.

<ul class="nav navbar-nav">
    {{ nav_link('home', 'Home') }}
    {{ nav_link('about', 'About') }}
    {{ nav_link('contact', 'Contact Us') }}
</ul>

If you are using macros.html like I mentioned above, you can use following code to import your macro.

{% from "macros.html" import nav_link with context %}

This is a good tutorial for jinja2 templating.

Answer 3

For some kind of strange reason, the above solution didn't work for me. Also you have to add code in 2 parts.

My simple solution. check if endpoint is equal., then set active.

 <li class="{% if  request.endpoint == "new_message" %}active{% endif %}"><a href="/new_message"><span class="glyphicon glyphicon-leaf"></span> Message</a></li>