Breadcrumb

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:

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