How to Create Custom Breadcrumbs in Hugo

Starting with Hugo version 0.109.0 a new .Ancestors method is available for pages, which allows you to trace the navigation tree up to the home page.

This greatly simplifies the implementation of breadcrumbs in a page, without having to iterate using the .Parent method and manually rebuild the whole tree and save it temporarily in a scratch.

Code

You can then implement breadcrumbs by applying the following code:

<nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
    <ul>
        {{- range .Ancestors.Reverse }}
        <li>
            <a href="{{ .Permalink }}">
                {{ if .IsHome }}
                    Home
                    {{ .LinkTitle }}
                {{ end }}
            </a>
        </li>
        {{- end -}}
        <li>
            <span aria-current="page">
                {{ if .IsHome }}
                    Home
                    {{ .LinkTitle }}
                {{ end }}
            </span>
        </li>
    </ul>
</nav>

Compared to previous solutions, the code is significantly shorter (about 60%) and looks much more maintainable.

In Hugo’s documentation, the use of {{ .LinkTitle }} is shown to retrieve the link title from variables of the page.

---
title: "Travel Guide to South Korea"
description: "All articles published on the site"
draft: false
linkTitle: "South Korea"
---

How this variable works, however, is not explained. If a value for linkTitle is specified in the front matter, Hugo will default to that value. If no value is provided, it will use what is specified in the title variable.