Solution 1 :

You can use slice filter

{% if request.path|slice:":5" == %} active{% endif %}


You can use in operator.

So instead {% if request.get_full_path == %} do {% if in request.get_full_path %} or to catch homepage {% if request.get_full_path in and request.get_full_path != '/' or request.get_full_path == %}

Solution 2 :

This probably isn’t the most efficient way, but at the moment for me, it’s the only way.

I created a custom template tag which takes in the context and the menu item object, then returns the active class name if the current URL matches the URL of the nav-item (item)

In the HTML, as each nav-item is iterated, the item is passed to the get_active method (a custom template tag that I made)

{% load menu_tags %}
{% get_menu "MAIN" as navigation %}
{% for item in navigation.menu_items.all %}
    {% get_active item as active_class %}
    <a class="nav-link {{ active_class }}" href="{{ }}" {% if item.open_in_new_tab %} target="_blank"{% endif %}>{{ item.title }}</a>
{% endfor %}

Template tag:

def get_active(context, item):
    request = context['request']
    currentURL = request.path
    linkURL =
    currentURLStripped = str(currentURL).replace("/", "")
    linkURLStripped = str(linkURL).replace("/", "")
    if linkURLStripped=="" and currentURLStripped=="":
        return "active"
    elif linkURLStripped in currentURLStripped and linkURLStripped!="":
        return "active"
        return ""

The code above simply takes the URL of the page the user is currently on, for example, if the user is on http://localhost:8000/blog then currentURL will be /blog/. The linkURL is the URL property of the item object, for the item object which links to the contact me page, its URL property will be /contact-me/ and thus the linkURL will be the same.

The method simply strips the “/” from the URL strings. If the URL is for the homepage (i.e. it’s /) then the variable will be empty. if linkURLStripped=="" and currentURLStripped=="": catches the homepage.

elif linkURLStripped in currentURLStripped and linkURLStripped!="": catches the other pages and ignores the homepage.

Problem :

I am developing a Django website using the Wagtail CMS. I have a navbar at the top of the page where using template tags, it loops through pages in the navigation variable.

{% for item in navigation.menu_items.all %}
    <a class="nav-link {% if request.get_full_path == %}active{% endif %}" href="{{ }}" {% if item.open_in_new_tab %} target="_blank"{% endif %}>{{ item.title }}</a>
{% endfor %}

Say that the URL is http://localhost:8000/blog/ and the page URL is the same, then the active class is applied to that iteration.

The problem arises when I am on a page with the URL such as http://localhost:8000/blog/example-blog-post/, this does not match with http://localhost:8000/blog/ and the active class is not applied, even though I am in the blog.

Is there a way to strip the URL and only keeping the root path, so http://localhost:8000/blog/example-blog-post/ becomes http://localhost:8000/blog/ so that the active class can be applied to subpages in the directory?


Comment posted by SidS

This works great if I don’t have an item linking to the homepage with

Comment posted by NKSM

@SidS, try this one

Comment posted by NKSM

@SidS, You can also use

Comment posted by SidS

Thanks for the answer, but unfortunately your code’s outcome isn’t what I’m after. It either correctly activates the link that the user’s on and incorrectly activates the homepage link, or, activates fine until I visit a child page