Support 3 levels of pages

_includes/nav.html

@@ -3,23 +3,41 @@
     {% assign pages_list = site.html_pages | sort:"nav_order" %}
     {% for node in pages_list %}
       {% unless node.nav_exclude %}
-      <li class="navigation-list-item{% if page.url == node.url %} active{% endif %} js-side-nav-item">
+        {% if node.parent == nil %}
-        {% if node.parent == nil or node.has_children == true %}
+          <li class="navigation-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
-        <a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url or (page.parent != nil and page.parent == node.parent) %} active{% endif %}">{{ node.title }}</a>
+            {% if page.parent == node.title or page.grand_parent == node.title %}
-          {% if (node.has_children == true and node.parent == page.parent) %}
+              {% assign first_level_url = node.url | absolute_url %}
+            {% endif %}
+            <a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
+            {% if node.has_children %}
               {% assign children_list = site.html_pages | sort:"nav_order" %}
-            <ul class="navigation-list-child-list">
+              <ul class="navigation-list-child-list ">
                 {% for child in children_list %}
-                {% if child.parent == node.parent and child.title != node.title %}
+                  {% if child.parent == node.title %}
-                <li class="navigation-list-item {% if page.url == child.url %} active{% endif %}">
+                    <li class="navigation-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
+                      {% if page.url == child.url or page.parent == child.title %}
+                        {% assign second_level_url = child.url | absolute_url %}
+                      {% endif %}
                       <a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
+                      {% if child.has_children %}
+                        {% assign grand_children_list = site.html_pages | sort:"nav_order" %}
+                        <ul class="navigation-list-child-list">
+                          {% for grand_child in grand_children_list %}
+                            {% if grand_child.parent == child.title %}
+                              <li class="navigation-list-item {% if page.url == grand_child.url %} active{% endif %}">
+                                <a href="{{ grand_child.url | absolute_url }}" class="navigation-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
                               </li>
                             {% endif %}
                           {% endfor %}
                         </ul>
                       {% endif %}
+                    </li>
+                  {% endif %}
+                {% endfor %}
+              </ul>
             {% endif %}
           </li>
+        {% endif %}
       {% endunless %}
     {% endfor %}
   </ul>

_layouts/default.html

@@ -37,10 +37,15 @@
       </div>
       <div class="main-content">
         {% unless page.url == "/" %}
-          {% if page.parent != nil and page.parent != page.title %}
+          {% if page.parent %}
             <nav class="breadcrumb-nav">
               <ol class="breadcrumb-nav-list">
-                <li class="breadcrumb-nav-list-item"><a href="{{ site.url }}{{ site.baseurl }}/{{ page.parent | slugify }}">{{ page.parent }}</a></li>
+                {% if page.grand_parent %}
+                  <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
+                  <li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
+                {% else %}
+                  <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
+                {% endif %}
                 <li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
               </ol>
             </nav>

_sass/navigation.scss

@@ -64,6 +64,16 @@
   @include mq(md) {
     @include fs-3;
   }
+
+  .navigation-list-child-list {
+    display: none;
+  }
+
+  &.active {
+    .navigation-list-child-list {
+      display: block;
+    }
+  }
 }
 
 .navigation-list-link {

docs/ui-components/ui-components.md

@@ -1,10 +1,9 @@
 ---
 layout: default
-title: UI Components
+title: "UI Components"
 nav_order: 3
 has_children: true
-parent: UI Components
+permalink: /docs/ui-components
-permalink: /ui-components
 ---
 
 # UI Components

docs/utilities/layout.md

@@ -3,6 +3,7 @@ layout: default
 title: Layout
 nav_order: 2
 parent: Utilities
+has_children: true
 ---
 
 # Layout Utilities

docs/utilities/utilities.md

@@ -2,9 +2,8 @@
 layout: default
 title: Utilities
 nav_order: 4
-parent: Utilities
 has_children: true
-permalink: /utilities
+permalink: docs/utilities
 ---
 
 # Utilities