Remove all

LOADING ...

Breadcrumbs for Django website

27.04.2025

12.02.2026

Django app

510

Tags:

Django

Django app

Kind of Django app:

Middleware

Description

This tool is a Django application that generates "Breadcrumbs" of the page it is installed on. Due to the peculiarity of the Django framework, all generation occurs on the server, i.e. SSR rendering method.

Installation and Setting up

To install this package, you can download the source code from this site or via PyPi:

pip install django-referer-breadcrumbs

After installation, you need to connect the application and the corresponding middleware in settings.py:

INSTALLED_APPS = [ ... 'django_referer_breadcrumbs', ... ] MIDDLEWARE = [ ... 'django_referer_breadcrumbs.middleware.BreadcrumbsMiddleware', ... ]

Now, in order for this application to find the pages to add breadcrumbs to, your views will need to return a TemplateResponse object. For example, I have a default article view that returns an HttpResponse using the render shortcut function:

from django.shortcuts import render def article(request): ... return render(request, template_name, context)

Instead of the render function, you need to substitute TemplateResponse. Like this:

from django.template.response import TemplateResponse def article(request): ... return TemplateResponse(request, template_name, context)

We are done with setting up and installing the necessary django application. Now, about how and where to insert the breadcrumb template.

A usage guide

To use this application, you need to insert the appropriate template block where you would like to see breadcrumbs. Here is the block:

{% if isBreadcrumbsMiddlewareConnected %} {% include 'breadcrumbs.html' with separator='⟫' first_separator='|' last_separator=")" %} {% endif %}

As you can see, the application defines a variable isBreadcrumbsMiddlewareConnected to know whether the application is connected or not. Then there are the following variables that you can send to the server for rendering:

separator - what symbol will separate each of the path elements
first_separator - this is the very first character that will be before the first element
last_separator - this is the very last character that will be after the last element
custom_urls - another variable is the list of addresses you would like to render instead of the generated one

It will look something like this:

I also defined several CSS classes for additional styling of the breadcrumbs:

breadcrumbs-container - for the entire container
breadcrumbs-separator-first - for the first separator
breadcrumbs-separator - for all separators
breadcrumbs-separator-last - for the las separator

How it works

Most django apps that implement the breadcrumb element do so by passing a list of items in the views themselves. My app works differently.

The source for the breadcrumb items is the HTTP_REFERER key-value pair in the META dictionary in the request itself:

from urllib.parse import urlparse from django.template.response import TemplateResponse class BreadcrumbsMiddleware: def __init__(self, get_response): self.get_response = get_response def __call__(self, request): response = self.get_response(request) return response def remove_items(self, list, item): # remove the item for all its occurrences c = list.count(item) for i in range(c): list.remove(item) return list def process_template_response(self, request, response: TemplateResponse): ref_url = request.META.get('HTTP_REFERER') urls = [] if ref_url: parsed_url = urlparse(ref_url) folders_url = self.remove_items(parsed_url.path.split('/'),'') if len(parsed_url.query) > 0: folders_url.append(f'?{parsed_url.query}') current_url = f"{parsed_url.scheme}://{parsed_url.netloc}/" for folder in folders_url: current_url += folder + '/' urls.append({ 'path': current_url, 'name': folder }) # Removing last '/' from the last element if len(parsed_url.query) > 0: urls[-1]['path'] = urls[-1]['path'][:-1] if response.context_data is not None: response.context_data.update({'isBreadcrumbsMiddlewareConnected': True}) response.context_data.update({'breadcrumbs_urls': urls}) return response

After the referring URL has been received, it is processed and returned to special templates for rendering. I would like to note that due to the peculiarities of the address source, i.e. HTTP_REFERER, if you go to the page via Google search or directly by entering the address in the search bar, no breadcrumbs will appear.

This is what the templates for rendering breadcrumbs look like, breadcrumbs.html:

{% load static %} <div class="breadcrumbs-container"> {% if custom_urls %} {% include 'breadcrumbs-items.html' with urls=custom_urls %} {% else %} {% include 'breadcrumbs-items.html' with urls=breadcrumbs_urls %} {% endif %} </div>

And this is directly, breadcrumbs-items.html:

{% load static %} {% for url in urls %} {% if forloop.counter == 1 %} {% if first_separator %} {{first_separator}} {% else %} {{separator}} {% endif %} {% endif %} {% if forloop.counter < urls|length and forloop.counter > 1 or forloop.counter == urls|length and forloop.counter != 1 %} {{separator}} {% endif %} <a href="{{url.path}}">{{url.name}}</a> {% if forloop.counter == urls|length %} {% if last_separator %} {{last_separator}} {% else %} {{separator}} {% endif %} {% endif %} {% endfor %}

Similar tools

Django application for managing ad blocks from YAN

09.10.2025

08.03.2026

Django app

254

Complete guide to installing and configuring Django Yandex Ad Manager for advanced advertising integration. Learn to implement banners, full-screen ads, carousels, and in-image ads with platform targeting, pagination support, and smart middleware injection. Step-by-step setup with code examples for optimal ad placement and monetization.

Do not forget to share, like and leave a comment :)

Reviews

(0)

Send

LOADING ...

It's empty now. Be the first (oﾟvﾟ)ノ