Add recursive navigation tutorial (#7720)

Merge pull request 7720

docs/_tutorials/navigation.md

@@ -605,3 +605,65 @@ The `for item in items` loop looks through each `item` and gets the `title` and
 For more details on the `group_by` filter, see [Jekyll's Templates documentation](https://jekyllrb.com/docs/templates/) as well as [this Siteleaf tutorial](https://www.siteleaf.com/blog/advanced-liquid-group-by/). For more details on the `sort` filter, see [sort](https://shopify.github.io/liquid/filters/sort/) in Liquid's documentation.
 
 Whether you use properties in your doc's front matter to retrieve your pages or a YAML data file, in both cases you can programmatically build a more robust navigation for your site.
+
+## Scenario 9: Nested tree navigation with recursion
+
+Suppose you want a nested tree navigation of any depth. We can achieve this by recursively looping through our tree of navigation links.
+
+**YAML**
+
+```yaml
+nav:
+  - title: Deployment
+    url: deployment.html
+    subnav:
+      - title: Heroku
+        url: heroku.html
+        subnav:
+          - title: Jekyll on Heroku
+            url: jekyll-on-heroku.html
+  - title: Help
+    url: help.html
+```
+
+**Liquid**
+
+First, we'll create an include that we can use for rendering the navigation tree. This file would be `_includes/nav.html`
+
+{% raw %}
+```liquid
+<ul>
+  {% for item in include.nav %}
+    <li><a href="{{ item.url }}">{{ item.title }}</a></li>
+
+    {% if item.subnav %}
+      {% include nav.html nav=item.subnav %}
+    {% endif %}
+  {% endfor %}
+</ul>
+```
+{% endraw %}
+
+To render this in your layout or pages, you would simply include the template and pass in the `nav` parameter. In this case, we'll use the `page.nav` to grab it from the yaml frontmatter.
+
+{% raw %}
+```liquid
+{% include nav.html nav=page.nav %}
+```
+{% endraw %}
+
+Our include will use this first, then look through each item for a `subnav` property to recursively render the nested lists.
+
+**Result**
+<div class="highlight result" data-proofer-ignore>
+   <ul>
+      <li><a href="#">Deployment</a></li>
+      <ul>
+        <li><a href="#">Heroku</a></li>
+        <ul>
+          <li><a href="#">Jekyll On Heroku</a></li>
+        </ul>
+      </ul>
+      <li><a href="#">Help</a></li>
+   </ul>
+</div>