python 43 lines · 7 steps

Active nav-link template tags in Django

Two custom template tags reverse a URL name and mark the link active when it matches the current request path.

Explained by highlit
Django Intermediate template tags url routing active state html rendering
1from django import template
2from django.urls import reverse, NoReverseMatch
3from django.utils.html import format_html
4 
5register = template.Library()
6 
7 
8@register.simple_tag(takes_context=True)
9def nav_link(context, url_name, label, css_class="nav-link", **kwargs):
10 request = context["request"]
11 
12 try:
13 target = reverse(url_name, kwargs=kwargs or None)
14 except NoReverseMatch:
15 target = url_name
16 
17 is_active = request.path == target or (
18 target != "/" and request.path.startswith(target)
19 )
20 
21 classes = css_class
22 if is_active:
23 classes = f"{css_class} active"
24 
25 aria = ' aria-current="page"' if is_active else ""
26 
27 return format_html(
28 '<a href="{}" class="{}"{}>{}</a>',
29 target,
30 classes,
31 template.Template(aria).render(template.Context()) if aria else "",
32 label,
33 )
34 
35 
36@register.simple_tag(takes_context=True)
37def active_class(context, url_name, css_class="active", **kwargs):
38 request = context["request"]
39 try:
40 target = reverse(url_name, kwargs=kwargs or None)
41 except NoReverseMatch:
42 return ""
43 return css_class if request.path.startswith(target) else ""
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1Custom template tags with takes_context=True can read the current request to make rendering decisions.
  2. 2Reversing a URL name and comparing it against request.path is the standard way to detect the active navigation item.
  3. 3format_html safely composes HTML while treating interpolated values as untrusted, unlike raw string formatting.

Related explainers

python 
from fastapi import APIRouter, BackgroundTasks, Depends, HTTPException, status
from pydantic import BaseModel, EmailStr
from sqlalchemy.orm import Session
 

Building a signup endpoint in FastAPI

dependency-injection request-validation background-tasks
Intermediate 8 steps
python 
from django import forms
from django.utils import timezone
 
from .models import Reservation

Multi-field validation in a Django ModelForm

form validation cross-field validation modelform
Intermediate 7 steps
python 
from functools import wraps
import asyncio
 
from fastapi import APIRouter, FastAPI, Request

Per-route request timeouts in FastAPI

decorators async timeouts
Intermediate 6 steps
python 
import os
from pathlib import Path
 
BASE_DIR = Path(__file__).resolve().parent.parent.parent

How a Django settings module is wired

configuration environment-variables middleware
Intermediate 8 steps
python 
def is_valid_card_number(number: str) -> bool:
    digits = [int(c) for c in number if c.isdigit()]
 
    if len(digits) < 13 or len(digits) > 19:

Validating card numbers with the Luhn check

checksum validation luhn-algorithm
Intermediate 6 steps
python 
from django.db.models import Q
 
from .models import Order
 

DISTINCT ON queries in Django

orm querysets postgresql
Intermediate 7 steps

Share this explainer

Here's the card — post it anywhere.

Active nav-link template tags in Django — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code