How to change nav "active" class on different pages with base.html - html

Question

I have my navbar on my base.html, so I extend it on all other pages.
But I have a class "active" on the home page, so it also stays active in all other pages.
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="http://127.0.0.1:8000/backend/">
<i class="ni ni-shop text-primary"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://127.0.0.1:8000/backend/clientes">
<i class="ni ni-ungroup text-orange"></i>
<span class="nav-link-text">Clients</span>
</a>
</li>
</ul>
How can I change the active class to a different menu item based on the page I am?

Answer 1

There's no one-size-fits-all answer to your question, it really depends on your project's structure, url hierarchy etc. But usually, the best solutions are either a custom template tag taking the request as argument (and/or other context variables or plain constants, depending on your own project's logic) to compute the current "section" and render the navbar accordingly.

Answer 2

Send name as variable and value with active.
def index(request):
# your code
context = {
'dashboard': 'active',
}
return render(request, 'index.html', context)
def clients(request):
# your code
context = {
'clients': 'active',
}
return render(request, 'clients.html', context)
Use variable like this:
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link {{ dashboard }}" href="http://127.0.0.1:8000/backend/">
<i class="ni ni-shop text-primary"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link {{ clients }}" href="http://127.0.0.1:8000/backend/clientes">
<i class="ni ni-ungroup text-orange"></i>
<span class="nav-link-text">Clients</span>
</a>
</li>
</ul>

Answer 3

OPTION 1
You can use django contex_processors.
add your settings.py
TEMPLATES = [
{
#other settings
'BACKEND': 'django.template.backends.django.DjangoTemplates',
#other settings
'OPTIONS': {
'context_processors': [
#other options
'context_file_path.defaults',
],
},
},
]
in your context_file.py
def defaults(request):
active_bar = "" # your active bar logic
return {
'active_bar': active_bar,
}
with this method, each request decide which bar active. And active_bar variable is being passed to your template. In your template you can add active class if active_bar variable equals your bar name. Like that:
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link {% if active_bar == 'dashboard' %}active{% endif %}" href="http://127.0.0.1:8000/backend/">
<i class="ni ni-shop text-primary"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item {% if active_bar == 'clients' %}active{% endif %}">
<a class="nav-link" href="http://127.0.0.1:8000/backend/clientes">
<i class="ni ni-ungroup text-orange"></i>
<span class="nav-link-text">Clients</span>
</a>
</li>
</ul>
OPTION 2
You can write a custom js file and add your base html. In this js file you can detect url and decide active pane. After that you can add active class to list pane.