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>

If you have articles in multiple depths (under category/subcategory/topic/...), then the following method can be useful.

• It hits DB only once, no matter the depth.
• It excludes the Root page (depth__gt=1 -> depth 0 is Root, so we only get the higher).
• Homepage is included in the list.
• It does not include the current page itself. If you want it to include, then set include_self to True.

def construct_breadcrumbs_list(page, include_self=False):
    """
    Constructs a breadcrumb list for the given page, excluding the root.

    Args:
        page: The page object for which to construct the breadcrumb list.
        include_self (bool): If True, includes the page itself in the breadcrumb list.

    Returns:
        list: A list of ancestor pages, excluding the root and self.
    """
    # Retrieve all ancestors of the page, optionally including the page itself
    ancestors = page.get_ancestors(inclusive=include_self).filter(depth__gt=1)

    # Convert the queryset to a list to return the breadcrumbs
    breadcrumbs = list(ancestors)

    return breadcrumbs

Still does a query though... ❤️ 😉

Still does a query though... ❤️ 😉

True. However, the following method also hits one query in my case.

Edit: as I assumed, the following does not hit the db if the page is in the first depth. Otherwise, it will need to hit DB.
That's why I mentioned:

If you have articles in multiple depths (under category/subcategory/topic/...), then the following method can be useful.

    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()

Odd - what version of wagtail are you using? I’ve implemented the test that checks that get_parent uses no queries.

…

On Wed, 19 Jun 2024 at 4:58 PM, Ismayil Ismayilov ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Still does a query though... ❤️ 😉 True. However, the following method also hits one query in my case. 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() — Reply to this email directly, view it on GitHub <https://gist.github.com/VincentLoy/e693aa1f149a59f465a5a71b6d937b9a#gistcomment-5094008> or unsubscribe <https://github.com/notifications/unsubscribe-auth/AVZRXXXME7SS3CEOSV5JL5LZIGMDBBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVA4TGNBUG4ZTEONHORZGSZ3HMVZKMY3SMVQXIZI> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

what version of wagtail are you using?
v 6.1.

It does not hit no matter the depth of page in your case? So if we assume there is such tree: FirstPage > SecondPage > SecondPage, and you try to make breadcrumb in the ThirdPage, it is still 0?

Sorry about confusion, it actually hits one time no matter the depth in my case. I am not sure what may cause such difference. It has to get "parent" data from somewhere, either it has to be prefetched already and cached or it has to be requested.

How it would else be possible not to hit DB using get_ancestors()?

what version of wagtail are you using?
v 6.1.

It does not hit no matter the depth of page in your case? So if we assume there is such tree: FirstPage > SecondPage > SecondPage, and you try to make breadcrumb in the ThirdPage, it is still 0? In my case, in SecondPage, it does not hit, but in SecondPage it does.

Hmm - very odd. No - it really shouldn't hit the DB, no matter the depth...

Possibly I made a mistake in my PR... I'll have to revisit.

I'll submit a fix - my bad. In the future you should then have zero query breadcrumbs - I think I made a mistake not setting the cache on the specific instance of the page.

Thanks for the help! :)

[EDIT]
@ismayil-ismayilov would you mind trying this repo to see if it still queries?
https://github.com/Nigel2392/wagtail/tree/update_page_routing

can be done with pip install git+https://github.com/Nigel2392/wagtail.git@update_page_routing

Thanks for the help! :)

Glad to be helpful!

Possibly I made a mistake in my PR... I'll have to revisit.

Maybe, it is my confusion. Just to make it clear, I do not used/tested routed pages, I just implemented your method to send context in a Page. Let's say there is a Blog Index Page, and I show breadcrumb Homepage>Blog Index.

@ismayil-ismayilov To be clear, you're not going from your browser to the page? IE the page.route method does not get invoked?

Sorry about confusion, it actually hits one time no matter the depth in my case. I am not sure what may cause such difference. It has to get > "parent" data from somewhere, either it has to be prefetched already and cached or it has to be requested.
How it would else be possible not to hit DB using get_ancestors()?

Get ancestors will for now always perform a query - it is not cached.

The parent objects however are cached upon routing to that page.

IE.
Homepage
> BlogPage
> > BlogIndexPage

You should be able to travel from BlogIndexPage to Homepage using get_parent without it performing any queries (inside the serve method of BlogIndexPage, after page.route has been invoked by the page serve view)

Can you tell me if this is the case for you?

Unfortunately, I do not think that's a case for me. I strongly believe I caused a confusion since I may not have the same application method as you refer, sorry about it.

I used your Wagtail repo. It still hits DB.

This is my "simplified" Page class. I basically, applied your method to create a breadcrumb. Nothing more or less.