Breadcrumb
Use the breadcrumb shortcode to display the current page’s location within the site's navigational hierarchy.
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" >}}
The shortcode supports the following arguments:
Name | Type | Required | Default | Comment |
---|---|---|---|---|
path | string | Path of the page to display the breadcrumb for. |
Name | Type | Required | Default |
---|---|---|---|
path | string | ||
Path of the page to display the breadcrumb for. |
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
---
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));
}