Easy snippet to get breadcrumb in a Wagtail page

breadcrumb.jinja

<div class="breadcrumb-content">
    {% if self.get_ancestors|length > 1 %}
        <ul class="breadcrumb">
            {% for p in self.get_ancestors %}
                {% if p.is_root == False %}
                    <li><a href="{{ p.url }}">{{ p.title }}</a></li>
                {% endif %}
            {% endfor %}

            <li class="active">{{ self.title }}</li>
        </ul>
    {% endif %}
</div>

Thank you!

Really nice! Thanks.

This is a super helpful snippet, thank you! :)

As of Wagtail 6.1 this should get updated to populate an array inside of a view; to then use in a template.
For the routed page; this will make sure the query count will be zero. The database should NOT be hit.

Rough sketch:

class MyPage(...):
    def get_context(self, ...):
        context = super().get_context(...)
        breadcrumbs = []
        
        page = self
        while page.get_parent() is not None:
            if page.is_root():
                break
            # Note how we do not add self.
            page = page.get_parent()
            breadcrumbs.append(page)

        breadcrumbs.reverse()
        context["breadcrumbs"] = breadcrumbs
        return context

And then in the template:

<div class="breadcrumb-content">
    {% if breadcrumbs|length > 1 %}
        <ul class="breadcrumb">
            {% for p in breadcrumbs %}
                <li><a href="{{ p.url }}">{{ p.title }}</a></li>
            {% endfor %}

            <li class="active">{{ self.title }}</li>
        </ul>
    {% endif %}
</div>