Breadcrumbs

The Breadcrumbs partial provides a semantic navigation trail that helps users understand their location within the site hierarchy. It automatically handles the current page display and includes proper accessibility attributes for screen readers.

Manifest

{
  "name": "breadcrumbs",
  "type": "_partials",
  "styles": ["breadcrumbs.css"],
  "scripts": [],
  "requires": []
}

Configuration

The breadcrumb partial uses a breadcrumb object in the Metalsmith metadata. In this example the breadcrumb was automatically generated by the Metalsmith Menu Plus plugin and is available in the navigation object.

navigation.breadcrumbs

[
  { "title":"Home", "path":"/" },
  { "title":"References", "path":"/references/" },
  { "title":"Partials", "path":"/references/partials/" },
  { "title":"Breadcrumbs","path":"/references/partials/breadcrumbs/"}
]

Example

HOME › REFERENCES › PARTIALS › BREADCRUMBS