Breadcrumb

Use the breadcrumb shortcode to display the current page’s location within the site's navigational hierarchy.

Overview  

Use the breadcrumb shortcode to display the current page’s location within the site’s navigational hierarchy. As an example, the following shortcode displays a breadcrumb for the current page.

{{< breadcrumb path="breadcrumb" >}}

Arguments  

The shortcode supports the following arguments:

Frontmatter configuration  

Hugo has the option to exclude certain pages from publishing  using the build options in the page’s frontmatter. These pages do not have a permalink, but are still part of the breadcrumb. You can set the optional parameter redirect to an alternative path if needed.

The following example is taken from the content/en/docs/_index.md page, which is the list page of the docs section in the Hinode docs repository  . The docs section itself is redirected to the page docs/getting-started/introduction/ using an alias in the frontmatter of the introduction page. The redirect parameter in the _index.md page instructs the breadcrumb to create a redirect to that same alias.

---
title: Docs
redirect: "/docs/"
_build:
  list: false
  render: false
---

Customization  

The file assets/scss/components/_breadcrumb.scss defines the styling of the _breadcrumb. It adds spacing to avoid the breadcrumb is hidden by the (fixed) main navigation:

• assets/scss/components/_breadcrumb.scss

.breadcrumb {
    padding-top: calc(0.3 * var(--navbar-offset));
}