Does Eleventy support preserving nested folder structure in template loops?

[alexkreidler]

I have a somewhat nested folder structure like this:

└── docs
    ├── a
    │   └── b
    │       └── c
    ├── d
    │   └── e
    │       └── f
    ├── g
    │   └── h
    ├── k
    └── l
        └── m

I want to build a navigation sidebar for my documentation-style site that mirrors the nested structure of the directory.

Is there a way to do this in 11ty? From what I've seen, Collections work on nested directories but completely flatten them.

[TigersWay]

Of course, kinda selling my own work... But you could try the Ancestry plugin. I started it exactly for that kind of "problems".
Just updated it with the new v0.11.0 And it seems to be working.

[zachleat]

I’m assuming you’ve seen the navigation plugin too? Is there a reason you can’t use that here? https://www.11ty.dev/docs/plugins/navigation/

[alexkreidler]

Actually, I hadn't seen that. Thanks for both your responses guys! Much appreciated.

[adamduncan]

Wondering if there's a more automatic way of achieving this using the Navigation plugin, without having to declare parent and key manually in each directory (data) or page (frontmatter)?

Looking at the Real World example's use of eleventyComputed was really helpful.

For example, is this ludicrous? Achieves what we're after in terms of structured output/order in navigation based on folder structure, but feels a bit dirty and brittle:

// eleventyComputed.js
module.exports = {
  eleventyNavigation: {
    key: data => {
      // Get URL path fragments
      const urlParts = data.page.url.split('/');
      // Taking all but first and last leaves us with the page path to use as key
      const pathDirs = urlParts.slice(1, urlParts.length - 1);
      const path = pathDirs.join('/');
      return data.key || path;
    },
    title: data => data.title,
    parent: data => {
      // Get URL path fragments
      const urlParts = data.page.url.split('/');
      // Taking all but first and last two leaves us with the parent directory path
      const parentDirs = urlParts.slice(1, urlParts.length - 2);
      const parent = parentDirs.join('/');
      // If no parent specified, try to use the automatic fallback
      // Because this is also based on URL paths, keys and parents should automatically match as needed
      return data.parent || parent;
    },
    order: data => data.order
  }
};

[markhougaard]

@adamduncan Do you have a more elaborate example of that in a repo? Would love to see it in full glory 🙂

[adamduncan]

@marksdk — Have put together a demo repo here: https://github.com/adamduncan/eleventy-auto-navigation

I hope you and others find it helpful.

[markhougaard]

@adamduncan Thanks so much for the repo! I'll definitely check it out 👍