Eleventy navigation

How to use hierarchical menu

Last modified 2025-05-12

ITADS

Table of content
  1. Create an item into the menu
  2. Custom link text
  3. Adding an item as a child
  4. Recursive menu tree
  5. Menu order

LibDoc’s pages navigation is based on Eleventy Navigation plugin. Page menu items must be set into the front matter of each page.

Create an item into the menu

Here is the minimal requirement to create a menu entry.

eleventyNavigation:
    key: First item

It is possible to customize the text of the menu item adding the key title. Note that the identifier of the menu item remains the same.

eleventyNavigation:
    key: First item
    title: The very first entry

Adding an item as a child

This example adds a menu item as a child of a parent. To make an menu item as a child, add the key parent with the value equal to the item’s parent key value.

eleventyNavigation:
    key: Sub item
    parent: First item

Recursive menu tree

Eleventy Navigation menu tree structure is recursive, you can add multiple sub items.

eleventyNavigation:
    key: Sub sub item
    parent: Sub item

On each tree level, menu items can be sorted by an arbitrary number called order. By default, consider all page order are equal to zero.

# Page 1 
eleventyNavigation:
    key: Trees
# Page 2
eleventyNavigation:
    key: Flowers
# Page 3
eleventyNavigation:
    key: Mammals

Priorizing "flowers" page with a single order: -1:

# Page 1 
eleventyNavigation:
    key: Trees
# Page 2
eleventyNavigation:
    key: Flowers
    order: -1
# Page 3
eleventyNavigation:
    key: Mammals

Custom order:

# Page 1 
eleventyNavigation:
    key: Trees
    order: 2
# Page 2
eleventyNavigation:
    key: Flowers
    order: 3
# Page 3
eleventyNavigation:
    key: Mammals
    order: 1