[Django]-How to implement breadcrumbs in a Django template?

The Django admin view modules have automatic breadcumbs, which are implemented like this:

{% block breadcrumbs %}
    <div class="breadcrumbs">
        <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
        {% block crumbs %}
            {% if title %} &rsaquo; {{ title }}{% endif %}
        {% endblock %}
    </div>
{% endblock %}

So there is some kind of built-in support for this..

My view functions emit the breadcrumbs as a simple list.

Some information is kept in the user’s session. Indirectly, however, it comes from the URL’s.

Breadcrumbs are not a simple linear list of where they’ve been — that’s what browser history is for. A simple list of where they’ve been doesn’t make a good breadcrumb trail because it doesn’t reflect any meaning.

For most of our view functions, the navigation is pretty fixed, and based on template/view/URL design. In our cases, there’s a lot of drilling into details, and the breadcrumbs reflect that narrowing — we have a “realm”, a “list”, a “parent” and a “child”. They form a simple hierarchy from general to specific.

In most cases, a well-defined URL can be trivially broken into a nice trail of breadcrumbs. Indeed, that’s one test for good URL design — the URL can be interpreted as breadcrumbs and displayed meaningfully to the users.

For a few view functions, where we present information that’s part of a “many-to-many” join, for example, there are two candidate parents. The URL may say one thing, but the session’s context stack says another.

For that reason, our view functions have to leave context clues in the session so we can emit breadcrumbs.

Try django-breadcrumbs — a pluggable middleware that add a breadcrumbs callable/iterable in your request object.

It supports simple views, generic views and Django FlatPages app.

I had the same issue and finally I’ve made simple django tempalate tag for it: https://github.com/prymitive/bootstrap-breadcrumbs

http://www.djangosnippets.org/snippets/1289/ – provides a template tag but i’m not sure this would work if you don’t have your urls.py properly declared.

Nothing will work if you don’t have your urls.py properly declared. Having said that, it doesn’t look as though it imports from urls.py. In fact, it looks like to properly use that tag, you still have to pass the template some variables. Okay, that’s not quite true: indirectly through the default url tag, which the breadcrumb tag calls. But as far as I can figure, it doesn’t even actually call that tag; all occurrences of url are locally created variables.

But I’m no expert at parsing template tag definitions. So say somewhere else in the code it magically replicates the functionality of the url tag. The usage seems to be that you pass in arguments to a reverse lookup. Again, no matter what your project is, you urls.py should be configured so that any view can be reached with a reverse lookup. This is especially true with breadcrumbs. Think about it:

home > accounts > my account

Should accounts, ever hold an arbitrary, hardcoded url? Could “my account” ever hold an arbitrary, hardcoded url? Some way, somehow you’re going to write breadcrumbs in such a way that your urls.py gets reversed. That’s really only going to happen in one of two places: in your view, with a call to reverse, or in the template, with a call to a template tag that mimics the functionality of reverse. There may be reasons to prefer the former over the latter (into which the linked snippet locks you), but avoiding a logical configuration of your urls.py file is not one of them.

Try django-mptt.

Utilities for implementing Modified Preorder Tree Traversal (MPTT) with your Django Model classes and working with trees of Model instances.

This answer is just the same as @Andriy Drozdyuk (link). I just want to edit something so it works in Django 3.2 (in my case) and good in bootstrap too.

for create_crumb function (Remove the ">" bug in the current code)

def create_crumb(title, url=None):
    """
    Helper function
    """
    if url:
        crumb = '<li class="breadcrumb-item"><a href="{}">{}</a></li>'.format(url, title)
    else:
        crumb = '<li class="breadcrumb-item active" aria-current="page">{}</li>'.format(title)

    return crumb

And for __init__ in BreadcrumbNode, add list() to make it subscriptable. And change smart_unicode to smart_text in render method

from django.utils.encoding import smart_text

class BreadcrumbNode(Node):
    def __init__(self, vars):
        """
        First var is title, second var is url context variable
        """
        self.vars = list(map(Variable, vars))

    def render(self, context):
        title = self.vars[0].var

        if title.find("'")==-1 and title.find('"')==-1:
            try:
                val = self.vars[0]
                title = val.resolve(context)
            except:
                title = ''

        else:
            title=title.strip("'").strip('"')
            title=smart_text(title)

And add this in base.html for the view for Bootstrap. Check the docs

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
    <ol class="breadcrumb">
        {% block breadcrumbs %}

        {% endblock breadcrumbs %}
    </ol>
</nav>

Obviously, no one best answer, but for practical reason I find that it is worth considering the naïve way. Just overwrite and rewrite the whole breadcrumb… (at least until the official django.contrib.breadcrumb released )

Without being too fancy, it is better to keep things simple. It helps the newcomer to understand. It is extremely customizable (e.g. permission checking, breadcrumb icon, separator characters, active breadcrumb, etc…)

Base Template

<!-- File: base.html -->
<html>
<body>
  {% block breadcrumb %}
  <ul class="breadcrumb">
    <li><a href="{% url 'dashboard:index' %}">Dashboard</a></li>
  </ul>
  {% endblock breadcrumb %}
  {% block content %}{% endblock content %}
</body>
</html>

Implementation Template

Later on each pages we rewrite and overwrite the whole breadcrumb block.

<!-- File: page.html -->
{% extends 'base.html' %}
{% block breadcrumb %}
<ul class="breadcrumb">
  <li><a href="{% url 'dashboard:index' %}">Dashboard</a></li>
  <li><a href="{% url 'dashboard:level-1:index' %}">Level 1</a></li>
  <li class="active">Level 2</li>
</ul>
{% endblock breadcrumb %}

Practicallity

Realworld use cases:

• Django Oscar: base template, simple bread
• Django Admin: base template, simple bread, permission check breadcrumb

You could also reduce the boiler plate required to manage breadcrumbs using django-view-breadcrumbs, by adding a crumbs property to the view.

urls.py

    urlpatterns = [
        ...
        path('posts/<slug:slug>', views.PostDetail.as_view(), name='post_detail'),
        ...
    ] 

views.py

    from django.views.generic import DetailView
    from view_breadcrumbs import DetailBreadcrumbMixin


    class PostDetail(DetailBreadcrumbMixin, DetailView):
        model = Post
        template_name = 'app/post/detail.html'

base.html

    {% load django_bootstrap_breadcrumbs %}

    {% block breadcrumbs %}
        {% render_breadcrumbs %}
    {% endblock %}

Something like this may work for your situation:

Capture the entire URL in your view and make links from it. This will require modifying your urls.py, each view that needs to have breadcrumbs, and your templates.

First you would capture the entire URL in your urls.py file

original urls.py

...
(r'^myapp/$', 'myView'),
(r'^myapp/(?P<pk>.+)/$', 'myOtherView'),
...

new urls.py

...
(r'^(?P<whole_url>myapp/)$', 'myView'),
(r'^(?P<whole_url>myapp/(?P<pk>.+)/)$', 'myOtherView'),
...

Then in your view something like:

views.py

...
def myView(request, whole_url):
    # dissect the url
    slugs = whole_url.split('/')
    # for each 'directory' in the url create a piece of bread
    breadcrumbs = []
    url = '/'
    for slug in slugs:
        if slug != '':
            url = '%s%s/' % (url, slug)
            breadcrumb = { 'slug':slug, 'url':url }
            breadcrumbs.append(breadcrumb)
    
    objects = {
        'breadcrumbs': breadcrumbs,
    }
    return render_to_response('myTemplate.html', objects)
...

Which should be pulled out into a function that gets imported into the views that need it

Then in your template print out the breadcrumbs

myTemplate.html

...
<div class="breadcrumb-nav">
    <ul>
    {% for breadcrumb in breadcrumbs %}
        <li><a href="{{ breadcrumb.url }}">{{ breadcrumb.slug }}</a></li>
    {% endfor %}
    </ul>
</div>
...

One shortcoming of doing it this way is that as it stands you can only show the ‘directory’ part of the url as the link text. One fix for this off the top of my head (probably not a good one) would be to keep a dictionary in the file that defines the breadcrumb function.

Anyways that’s one way you could accomplish breadcrumbs, cheers 🙂

You might want to try django-headcrumbs (don’t worry, they are not going to eat your brains).

It’s very lightweight and absolutely straightforward to use, all you have to do is annotate your views (because defining crumbs structure in templates sounds crazy to me) with a decorator that explains how to get back from the given view.

Here is an example from the documentation:

from headcrumbs.decorators import crumb
from headcrumbs.util import name_from_pk

@crumb('Staff')  # This is the root crumb -- it doesn’t have a parent
def index(request):
    # In our example you’ll fetch the list of divisions (from a database)
    # and output it.

@crumb(name_from_pk(Division), parent=index)
def division(request, slug):
    # Here you find all employees from the given division
    # and list them.

There are also some utility functions (e.g. name_from_pk you can see in the example) that automagically generate nice names for your crumbs without you having to wright lots of code.

I’ve created template filter for this.

Apply your custom filter (I’ve named it ‘makebreadcrumbs’) to the request.path like this:

{% with request.resolver_match.namespace as name_space %}
    {{ request.path|makebreadcrumbs:name_space|safe }}
{% endwith %}

We need to pass url namespace as an arg to our filter.

Also use safe filter, because our filter will be returning string that needs to be resolved as html content.

Custom filter should look like this:

@register.filter
def makebreadcrumbs(value, arg):
    my_crumbs = []
    crumbs = value.split('/')[1:-1]  # slice domain and last empty value
    for index, c in enumerate(crumbs):
        if c == arg and len(crumbs) != 1:  
        # check it is a index of the app. example: /users/user/change_password - /users/ is the index.
            link = '<a href="{}">{}</a>'.format(reverse(c+':index'), c)
        else:
            if index == len(crumbs)-1:
                link = '<span>{}</span>'.format(c)  
                # the current bread crumb should not be a link.
            else:
                link = '<a href="{}">{}</a>'.format(reverse(arg+':' + c), c)
        my_crumbs.append(link)
    return ' &gt; '.join(my_crumbs)  
    # return whole list of crumbs joined by the right arrow special character.

Important:

splited parts of the ‘value’ in our filter should be equal to the namespace in the urls.py, so the reverse method can be called.

Hope it helped.

A generic way, to collect all callable paths of the current url could be resolved by the following code snippet:

from django.urls import resolve, Resolver404

path_items = request.path.split("/")
path_items.pop(0)
path_tmp = ""

breadcrumb_config = OrderedDict()
for path_item in path_items:
    path_tmp += "/" + path_item
    try:
        resolve(path_tmp)
        breadcrumb_config[path_item] = {'is_representative': True, 'current_path': path_tmp}
    except Resolver404:
        breadcrumb_config[path_item] = {'is_representative': False, 'current_path': path_tmp}

If the resolve function can’t get a real path from any urlpattern, the Resolver404 exception will be thrown. For those items we set the is_representative flag to false. The OrderedDict breadcrumb_config holds after that the breadcrumb items with there configuration.

For bootstrap 4 breadcrumb for example, you can do something like the following in your template:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
      {% for crumb, values in BREADCRUMB_CONFIG.items %}
        <li class="breadcrumb-item {% if forloop.last or not values.is_representative %}active{% endif %}" {% if forloop.last %}aria-current="page"{% endif %}>
            {% if values.is_representative %}
                <a href="{{values.current_path}}">
                    {{crumb}}
                </a>
            {% else %}
                {{crumb}}
            {% endif %}
        </li>
      {% endfor %}
  </ol>
</nav>

Only the links which won’t raises a 404 are clickable.

I believe there is nothing simpler than that (django 3.2):

 def list(request):
        return render(request, 'list.html', {
            'crumbs' : [
                ("Today", "https://www.python.org/"),
                ("Is", "https://www.python.org/"),
                ("Sunday", "https://www.djangoproject.com/"),
            ]
        })

Breadcrumbs.html

<div class="page-title-right">
   <ol class="breadcrumb m-0">
      {% if crumbs %}
            {% for c in crumbs %}
                <li class="breadcrumb-item {{c.2}}"><a href="{{c.1}}">{{c.0}}</a></li>
            {% endfor %}
      {% endif %}
   </ol>
</div>

css:

.m-0 {
    margin: 0!important;
}
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0;
    margin-bottom: 1rem;
    list-style: none;
    border-radius: .25rem;
}
dl, ol, ul {
    margin-top: 0;
    margin-bottom: 1rem;
}
ol, ul {
    padding-left: 2rem;
}