Adding Bread Crumbs to the front end in Wagtail CMS

Wagtail is a new Django based CMS, it has a rather slick admin interface including a bread crumbs. Due to the fact Wagtail can order its content in a tree structure (unlike most other Django CMSs) you can also add a bread crumbs style navigation in the front end too. Here’s what I did.

I added this code into my base.html template:

{% if self.get_ancestors|length > 1 %}
<ul class=”breadcrumb”>

{% for page in self.get_ancestors %}
{% if page.is_root == False %}
<li><a href=”{% pageurl page %}”>{{ page.title }}</a></li>
{% endif %}
{% endfor %}

<li class=”active”>{{ self.title }}</li>

</ul>
{% endif %}

Don’t forget to  {% load wagtailcore_tags %} at the top of base.html too.

The Breadcrumbs should work fine as long as your home page is below the wagtail root!

Advertisements

6 thoughts on “Adding Bread Crumbs to the front end in Wagtail CMS

  1. Dieter

    Helpful! However the quotes are not needed:

    ”{% pageurl page %}”

    => these quotes had to be removed in my case to make it work.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.