Remove all

LOADING ...

Breadcrumbs for Django website

27.04.2025

21.05.2025

391

Tags:

Django

Django app

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 %}

Media files

Django breadcrumbs app

Similar tools

Generator of table of contents for Django website’s articles

25.04.2025

21.05.2025

364

This tool is a Django application that generates the "Table of contents" of the page on which it is installed. Due to the peculiarity of the Django framework, all generation occurs on the server, that is, the SSR rendering method. This application also creates anchor links to the collected chapters, if the heading have an id attribute.

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

Reviews

(0)

Send

LOADING ...

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