Changing the active class of a link with the twitter bootstrap css in python/flask

For jinja/flask/bootstrap users:

If you define your nav like they did in the blog example http://getbootstrap.com/examples/blog/
simply assign ids to your links that match your url_for arguments and you just need to modify the layout-template, the rest just works #magic.

<nav class="blog-nav">
  <a id="allposts"  class="blog-nav-item" href="{{ url_for('allposts')}}">All Posts</a>
  <a id="index"     class="blog-nav-item" href="{{ url_for('index')}}">Index</a>
  <a id="favorites" class="blog-nav-item" href="{{ url_for('favorites')}}">Favorites</a>
</nav>

At the bottom of your base/layout template just add this

<script>
  $(document).ready(function () {
  $("#{{request.endpoint}}").addClass("active"); })
</script>

and the right elements will be set active.

EDIT:
If you have a layout with elements in a list, like this:

<nav class="blog-nav">
  <ul class="nav navbar-nav">
    <li>
        <a id="allposts"  class="blog-nav-item" href="{{ url_for('allposts')}}">All Posts</a>
    </li>
    <li>
        <a id="index"     class="blog-nav-item" href="{{ url_for('index')}}">Index</a>
    </li>
    <li>
        <a id="favorites" class="blog-nav-item" href="{{ url_for('favorites')}}">Favorites</a>
    </li>
  </ul>
</nav>

use the parent() function to get the li element instead of the link.

<script>
    $(document).ready(function () {
    $("#{{request.endpoint}}").parent().addClass("active"); })
</script>

Here is another simpler way if you have menus distributed all over the page. This way uses inline if statements to print out the class active.

<ul>

<li class="{{ 'active' if active_page == 'menu1' else '' }}">
<a href="/blah1">Link 1</a>
</li>

<li class="{{ 'active' if active_page == 'menu2' else '' }}">
<a href="/blah2"> Link 2 </a>
</li>

</ul>

Class active is for highlighting

You still need to set the variable on every page to mark them

{% extends "master.html" %}
{% set active_page = "menu1" %}

or

{% set active_page = "menu2" %}

Add the following CSS somewhere on your page:

a[href $= {{ page_name|default("'/'"|safe) }}]{ [INSERT YOUR ACTIVE STYLING HERE] }

Now, on each template define page_name, for example:

{% extends "template.html" %}
{% set page_name = "gallery" %}

This seems much simpler and easier to build on, than other options.

EDIT:

Almost 1 year later I’m returning to make this a much simpler fix, because setting the page name on every page is pretty inefficient.

Instead create a function like so:

@app.context_processor
def context_processor():
    out = {}
    out['request'] = request # Make sure you import request from flask
    return out

This will allow you to pass variables implicitly to jinja, in this case we are passing the request for access to request.url_rule which contains the route the user is accessing. In the previous version, we just change {{ page_name|default("'/'"|safe) }} to "{{ request.url_rule|safe }}". Much cleaner.

I liked @philmaweb‘s approach, but there’s really no reason to require duplicating the endpoint in the id of each element.

base.js:

$(document).ready(function () {
    var scriptElement = $('#baseScript')[0];
    var path = scriptElement.getAttribute('data-path');
    $('a[href="'+path+'"]').addClass("active");
});

base.html

<script id="baseScript" src="{{ url_for('static', filename='js/base.js') }}"
data-path="{{ request.path }}"></script>

Why not just put this script inline? You could, of course, but allowing inline JS is a security nightmare. You should be using a CSP on your site (e.g. Flask-Talisman) which will not allow inline JS. With data-* attributes, it’s not hard to do this in a secure way.

NB: If you have multiple links leading to the same, current page and you want only ONE of them to be marked “active”—then this approach may not work for you.

I did not want to have to define the ID in the child pages, as many of the links I have do not have a specific child template.

Using the request.base_url and if it matches the _external url_for the route, then render that nav item as active.

{% set nav_items = [
    ("public.home", "Home"),
    ("public.downloads", "Downloads"),
    ("public.about", "About")
    ("account.login", "Login"),
 ]
 -%}

...

   <ul class="navbar-nav mr-auto">
   {% for route, display_text in  nav_items %}
     <li class={% if request.base_url == url_for(route, _external=True) %}"nav-item active"{% else %}"nav-item"{% endif %}>
       <a class="nav-link" href="{{ url_for(route) }}">{{ display_text }}
     {% if request.base_url == url_for(route, _external=True) %}<span class="sr-only">(current)</span>{% endif %}
       </a>
     </li>
   {% endfor %}
   </ul>

we can make class active by using jinja if statements

<ul class="nav navbar-nav">
     <li class="{% if request.endpoint=='home' %}active{%endif %}"><a href="{{  url_for('home') }}">home</a></li>
     <li class="{% if request.endpoint=='add_client' %}active{%endif %}"><a href="{{  url_for('add_client') }}">Add Report</a></li>
    </li>
  </ul>

I tried different solution for this for the solution 1st by Codegeek didn’t work as I have multiple Ul and li under it so I just include my navbar in template.html

{% include 'sidebar.html' %}

then in Navbar file in the li class you can set active with help of "request.endpoint" but then again it will return you entire route instead use split and take last route name and set active if same for exmaple

 <li class="{% if request.endpoint.split('.')[1] == 'index' %} active {% else %}  {% endif %}">

request.endpoint.split('.')[1] will return the route eg localhost/example. You will get example which you can compare and use. If you won’t split and use request.endpoint than you will get ‘file.example’ (entire route).