Update This post is from the old theme. Since I don’t have intentions to manage ridiculously deep page structures, there is no longer breadcrumb navigation in this blog.
Breadcrumbs provide an effective method for users to identify the current page’s location and navigate back to its parent pages if necessary. It is handy if your site relies heavily on nested sections, like mine.
While Hugo does not have built-in support for breadcrumbs, making one from scratch is relatively simple. I will explain two possible methods of writing a breadcrumb partial in Hugo.
Using the Parent accessor
A Hugo page has a
.Parent variable, and it returns the parent section of the page. So, for example, the
.Parent of this post would be
/posts/. The official Hugo documentation provides an excellent partial code that shows the breadcrumb navigation using a recursive method:
Here is how the
get-items template works:
1 First, render a
<li> element for the current page.
2 Then, if the current page has a parent, prepend a
<li> element for that page.
3 Repeat the previous step until it reaches the homepage.
Adding this partial to the
<body> of this page (
and compiling the site gives the following HTML code:
Note that my homepage does have a title of Welcome!, so I will need to do some fixes on that if I would use this code.
Parsing the URL
Another method of creating a breadcrumb is to use the URL because it will reflect on the section structure of the pages. Here is an example: