Creating navigation or menus

Navigation and menus can be created manually or automatically. We generally
recommend creating headers and footers manually by managing links within partial
header and footer files, whereas tables of contents, or menus for content-heavy
sites should be automatically generated.

Explicit menu

Assume we are creating a header menu. First, create a partial file that can be
used to store the header’s content:

partial: header
title: My Website
menu:
- doc: !pod.doc /content/pages/index.yaml
  title: Home
- doc: !pod.doc /content/pages/about.yaml
  title: About
- doc: !pod.doc /content/pages/contact.yaml
  title: Contact

Next, create a template to render this content:

<div class="header">
  <div class="header__logo">
    {{partial.title}}
  </div>
  <div class="header__menu">
    {% for item in partial.menu %}
      <a
        class="header__menu__item"
        href="{{item.url.path}}"
      >
        {{item.title}}
      </a>
    {% endfor %}
  </div>
</div>

Finally, use a code snippet to render the template:

Automatic menu

Assume we are creating a table of contents allowing the user to navigate through
various categories of page content. First, create your content structure:

Second, ensure that each _collection.yaml file has fields populated, with
appropriate titles and orders.

Last, use a code snippet to render the menu:

TODO