Is it possible to have parent and child collections with Eleventy (11ty)?

Question

I'd like to be able to have parent and child collections using Eleventy, which I can then loop through to create navigation.

I currently have some posts with in a collection called continents, with the front matter displayed like this:

---
title: Europe
tags: continents
---

Which I loop through to create a list of links:

<ul class="parent-list">
  {% for post in collections.continents %}
    <li><a href="{{ post_url | post }}">{{ post.data.title}}</a></li>
  {% endfor %}
</ul>

Is it possible to have a child collection of continents? For example countries? If so, where would this data need to be added to my theme?

It would be great to be able to then loop through the collections like this:

<ul class="parent-list">
  {% for post in collections.continents %}
    <li><a href="{{ post_url | post }}">{{ post.data.title}}</a></li>
    <ul class="child-list">
      {% for post in collections.countries %}
        <li><a href="{{ post_url | post }}">{{ post.data.title}}</a></li>
      {% endfor %}
    </ul>
  {% endfor %}
</ul>

I'm aware of eleventy-navigation but it looks like you can only have one level of navigation with this too.

eleventy-navigation solves this exact problem and it does support N-level depth. Specifically as an example the sidebar on 11ty.dev/docs shows 3 different levels — zachleat

Raymond Camden Raymond Camden · Accepted Answer · 2019-12-04T16:40:03

As far as I know, collections are only one level deep, so you can't do collections.parent.child. You could dynamically create collections such that you had collections.europe and collections.northamerica. You could then switch your second inner loop to something like this:

{% for post in collections.countries[post.data.title] %}

Does that make sense?

I should add, in order for this to work, your child posts should use front matter to set their parent, like: continent: europe

Is it possible to have parent and child collections with Eleventy (11ty)?

1 Answers