Directory structure-based navigation concept for eleventy-plugin-navigation. Based on a moonshoot 🚀 in a discussion about automatic hierarchical navigation.
Eleventy Navigation plugin defines its tree structure based on key and parent data in a site's pages.
If we want the site tree to mimic the folder structure, we can automate the setting of these properties by leveraging Computed Data, and a little URL path wrangling. See eleventyComputed.js data, nav.njk include and startsWith filter for most of the action. (Also check the Eleventy log for details on the navigation structure.)
Under the hood here we're setting the key and parent values to their URL paths, which are inherently unique (whereas setting by page title could become problematic). We also pass the order property from the page's frontmatter to eleventyNavigation. This allows us to override the default sort order (based on date created in collections) should you want to manually re-order siblings (see Mammals child pages, for example).
Perhaps not a bullet-proof approach, but certainly gets us most the way there without breaking a sweat.
npm install
npm run dev