Implementing Breadcrumb Navigation in Hugo Sites

Breadcrumb navigation is a useful feature for websites, including those built with Hugo, a popular static site generator. It helps visitors understand their location within the site hierarchy and improves overall site usability. Implementing breadcrumbs in Hugo can be straightforward with the right approach.

What Are Breadcrumbs?

Breadcrumbs are a type of secondary navigation that shows the user’s current page in relation to the website’s structure. They typically appear near the top of a page and look like a trail, for example: Home > Blog > Post Title.

Why Use Breadcrumbs in Hugo?

Adding breadcrumbs enhances user experience by making navigation easier, especially on large sites. They also contribute to SEO by providing search engines with a clearer understanding of your site’s structure.

Implementing Breadcrumbs in Hugo

Hugo does not have built-in breadcrumb functionality, but you can implement it using templates and shortcodes. The key is to generate the trail dynamically based on the current page’s position in the site hierarchy.

Using a Partial Template

Create a partial template called breadcrumbs.html in your layouts/partials directory. This template will generate the breadcrumb trail based on page hierarchy.

Here’s a simple example of what the partial might include:

{{ $current := . }}
{{ if .IsHome }}
  
    
      Home
    
  
{{ else }}
  
    
      Home
      {{ range .Ancestors }}
        {{ .Title }}
      {{ end }}
      {{ .Title }}
    
  
{{ end }}

Including the Partial in Your Templates

Once you’ve created breadcrumbs.html, include it in your layout templates where you want the breadcrumbs to appear:

{{ partial "breadcrumbs.html" . }}

Additional Tips

Customize the HTML structure and CSS to match your site’s design.
Use Hugo’s Page variables like .Parent and .Ancestors to build the trail.
Test on different pages to ensure the breadcrumbs update correctly based on hierarchy.

Implementing breadcrumbs in Hugo improves navigation and SEO. With a few simple templates, you can create a dynamic trail that helps visitors explore your site more efficiently.

Table of Contents