navbar menu

pages/_data/menu.yml

@@ -11,6 +11,7 @@ forms:
 base:
   title: Base
   icon: package
+  columns: 2
   children:
     blank:
       title: Starter page
@@ -118,6 +119,7 @@ docs:
   title: Docs
   icon: file-text
   url: docs/index.html
+  columns: 3
   children:
     index: 
       title: Introduction

pages/_includes/layout/navbar-menu.html

@@ -5,10 +5,30 @@
 		{% assign icon = level-1[1].icon %}
 		<li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}">
 			<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-toggle="dropdown" role="button"
-			   aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% elsif level-1[1].toggle %}href="{{ level-1[1].url }}" data-toggle="{{ level-1[1].toggle }}" {% else %}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
+			   aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% else %}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
 				<span class="nav-link-icon">{% include ui/icon.html icon=icon %}</span>
 				<span class="nav-link-title">{{ level-1[1].title }}</span>
 			</a>
+
+			{% if level-1[1].children %}
+			<ul class="dropdown-menu dropdown-menu-arrow{% if level-1[1].right %} dropdown-menu-right{% endif %}{% if level-1[1].columns %} dropdown-menu-columns  dropdown-menu-columns-{{ level-1[1].columns }}{% endif %}">
+				{% for level-2 in level-1[1].children %}
+				<li {% if level-2[1].children %}class="dropright"{% endif %}>
+					<a class="dropdown-item{% if level-2[1].children %} dropdown-toggle{% endif %}{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
+						{{ level-2[1].title }}
+					</a>
+
+					{% if level-2[1].children %}
+					<div class="dropdown-menu">
+						{% for level-3 in level-2[1].children %}
+						<a href="{{ site.base }}/{{ level-3[1].url }}" class="dropdown-item">{{ level-3[1].title }}</a>
+						{% endfor %}
+					</div>
+					{% endif %}
+				</li>
+				{% endfor %}
+			</ul>
+			{% endif %}
 		</li>
 	{% endfor %}
 

scss/ui/_dropdowns.scss

@@ -53,6 +53,7 @@
 
   .dropdown-item {
     display: inline-flex;
+    min-width: 10rem;
   }
 }