Navigation

The Navigation partial provides a complete menu system with automatic active state detection, path-based highlighting, and a responsive hamburger menu for narrow screen widths. It highlights both exact page matches and parent sections.

Manifest

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

Configuration

The navigation partial uses a navigation object in the Metalsmith metadata. The name of the object is specified as a Metalsmith Menu Plus plugin option. In thhis case the object mainMenu is available via the metadata.

[
  {"title":"Home","path":"/","navIndex":0,"children":[]},
  {"title":"Section Anatomy","path":"/section-anatomy/","navIndex":1,"children":[]},
  {"title":"From YAML to HTML","path":"/yaml-to-html/","navIndex":2,"children":[]},
  {"title":"Sample Blog","path":"/blog/","navIndex":4,"children":[...]},
  {"title":"References","path":"/references/","navIndex":5,"children":[...}]

Example

See the navigation in action in the header above.