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 paramater 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: 0.3 * $navbar-offset;
}