Docs

Breadcrumb

Last modified on June 7, 2025 • 2 min read • 238 words
Share via

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.

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

Arguments  

The shortcode supports the following arguments:

Name Type Required Default Comment
path path Path of the page that the element references.
Name Type Required Default
path path
Path of the page that the element references.

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));
}