Multi-level navigation

#1

What is the easiest way to create a multi-level navigation system in 11ty? I am trying to modify the basic JSON navigation from the 11ty course.

#2

Not sure if its the easiest, but if you’ve not already tried the eleventy-navigation plugin, that might be worth a look. It does seem like its Zach’s preferred approach.

If you go down this route, you need to

  1. install it as an npm package.
  2. Call it into your .eleventy.js file.
  3. Add some front matter to your files (which is where the navigation tree is established)
Eg. file for humans.md
---
eleventyNavigation:  
  key: Humans
  parent: Mammals
  title: All Humans
---

Then you can access the navigation as lists.

One way to do it is via filters, such as one of the below:
(eg. use one of these lines to spit out the menu items you’re after…which you then format in CSS)

// Get everything found by the Navigation plugin & render it to a basic HTML list
{{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}
// Only get the Humans' children
{{ collections.all | eleventyNavigation("Humans") | eleventyNavigationToHtml | safe }}
// Only get the Humans' parents
{{ collections.all | eleventyNavigationBreadcrumb("Humans") | eleventyNavigationToHtml | safe }}

Or if you want to do it yourself, you can create a variable and use that:

{% set navPages = collections.all | eleventyNavigation %}
// navPages provides a variable that you can then dump:
{{ navPages | dump | safe }}
// or loop through
<ul>
{%- for entry in navPages %}
  <li{% if entry.url == page.url %} class="my-active-class"{% endif %}>
    <a href="{{ entry.url | url }}">{{ entry.title }}</a>
  </li>
{%- endfor %}
</ul>

Plus there are advanced options for such things as classes or active page.
In theory that should provide you with a simple way to create good navigation.
In practice, you might have to spend a good few hours/days playing with it :nerd_face:
ie. the documentation is decent enough, but dullards like me always need more info & examples.

Sitepoint explains its usage quite well in the navigation section here, using shortcodes as well:

But yeah, if you try this route and you experience my learning curve, perhaps have some beers/coffees handy.

Cheers!