You can use slice filter

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

OR

You can use in operator.

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

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="{{ item.link }}" {% if item.open_in_new_tab %} target="_blank"{% endif %}>{{ item.title }}</a>
{% endfor %}

Template tag:

@register.simple_tag(takes_context=True)
def get_active(context, item):
    request = context['request']
    currentURL = request.path
    linkURL = item.link
    currentURLStripped = str(currentURL).replace("/", "")
    linkURLStripped = str(linkURL).replace("/", "")
    if linkURLStripped=="" and currentURLStripped=="":
        return "active"
    elif linkURLStripped in currentURLStripped and linkURLStripped!="":
        return "active"
    else:
        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.

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 == item.link %}active{% endif %}" href="{{ item.link }}" {% 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?