just-the-docs/_includes/nav.html

{%- comment -%}
  Include as: {%- include nav.html pages = pages key = key -%}
  Depends on: include.pages, include.key, page, site.
  Results in: HTML for the navigation panel.
  Includes:
    sorted_pages.html
  Overwrites: 
    nav_pages, first_level_pages, second_level_pages, third_level_pages,
    node, children_list, child, grand_children_list, grand_child.
{%- endcomment -%}

{%- assign nav_pages = include.pages
    | where_exp: "item", "item.title != nil"
    | where_exp: "item", "item.nav_exclude != true" -%}

{%- include sorted_pages.html pages = nav_pages -%}

{%- assign first_level_pages = sorted_pages
    | where_exp: "item", "item.parent == nil" -%}
{%- assign second_level_pages = sorted_pages
    | where_exp: "item", "item.parent != nil"
    | where_exp: "item", "item.grand_parent == nil" -%}
{%- assign third_level_pages = sorted_pages
    | where_exp: "item", "item.grand_parent != nil" -%}

{%- comment -%}
  The order of sibling pages in `sorted_pages` determines the order of display of
  links to them in lists of navigation links.
  
  Note that Liquid evaluates conditions from right to left (and it does not allow
  the use of parentheses). Some conditions are not so easy to express clearly...
  
  For example, consider the following condition:
  
    C: page.collection = = include.key and 
       page.url = = node.url or 
       page.grand_parent = = node.title or 
       page.parent = = node.title and 
       page.grand_parent = = nil
 
  Here, `node` is a first-level page. The last part of the condition
  -- namely: `page.parent = = node.title and page.grand_parent = = nil` --
  is evaluated first; it holds if and only if `page` is a child of `node`.
  
  The condition `page.grand_parent = = node.title or ...` holds when 
  `page` is a grandchild of node, OR `...` holds.
  
  The condition `page.url = = node.url or ...` holds when 
  `page` is `node`, OR `...` holds.
  
  The condition C: `page.collection = = include.key and ...` holds when we are 
  generating the nav links for a collection that includes `page`, AND `...` holds.
{%- endcomment -%}

<ul class="nav-list">
{%- for node in first_level_pages -%}
    {%- unless node.nav_exclude -%}
      <li class="nav-list-item{% if page.collection == include.key and page.url == node.url or page.grand_parent == node.title or page.parent == node.title and page.grand_parent == nil %} active{% endif %}">
        {%- if node.has_children -%}
          <a href="#" class="nav-list-expander" aria-label="toggle links in {{ node.title }} category">
            <svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg>
          </a>
        {%- endif -%}
        <a href="{{ node.url | relative_url }}" class="nav-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
        {%- if node.has_children -%}
          {%- assign children_list = second_level_pages
                | where: "parent", node.title -%}
          {%- if node.child_nav_order == 'desc' or node.child_nav_order == 'reversed' -%}
            {%- assign children_list = children_list | reverse -%}
          {%- endif -%}
          <ul class="nav-list">
          {%- for child in children_list -%}
            {%- unless child.nav_exclude -%}
            <li class="nav-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
              {%- if child.has_children -%}
                <a href="#" class="nav-list-expander" aria-label="toggle links in {{ child.title }} category">
                  <svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg>
                </a>
              {%- endif -%}
              <a href="{{ child.url | relative_url }}" class="nav-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
              {%- if child.has_children -%}
                {%- assign grand_children_list = third_level_pages
                      | where: "parent", child.title
                      | where: "grand_parent", node.title -%}
                {%- if child.child_nav_order == 'desc' or child.child_nav_order == 'reversed' -%}
                  {%- assign grand_children_list = grand_children_list | reverse -%}
                {%- endif -%}
                <ul class="nav-list">
                {%- for grand_child in grand_children_list -%}
                  {%- unless grand_child.nav_exclude -%}
                  <li class="nav-list-item {% if page.url == grand_child.url %} active{% endif %}">
                    <a href="{{ grand_child.url | relative_url }}" class="nav-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
                  </li>
                  {%- endunless -%}
                {%- endfor -%}
                </ul>
              {%- endif -%}
            </li>
            {%- endunless -%}
          {%- endfor -%}
          </ul>
        {%- endif -%}
      </li>
    {%- endunless -%}
{%- endfor -%}
</ul>