top menu dropdowns

pages/_includes/layout/layouts-list.html

@@ -3,7 +3,7 @@
 	<div class="col-{% if include.wide %}12{% else %}6{% endif %} mb-{% if include.wide %}5{% else %}6{% endif %}{% if layout.soon %} opacity-25{% endif %}">
 		<div class="row">
 			<div class="col-auto">
-				<a href="{{ site.base }}/{{ layout.page }}">
+				<a href="{{ site.base }}/{{ layout.page }}" class="position-relative">
 					{% include parts/demo-layout.html topmenu=layout.config.topmenu topmenu-dark=layout.config.topmenu-dark sidebar=layout.config.sidebar sidebar-narrow=layout.config.sidebar-narrow sidebar-right=layout.config.sidebar-right sidebar-dark=layout.config.sidebar-dark hide-topnav=layout.config.hide-topnav %}
 				</a>
 			</div>

pages/_includes/layout/menu.html

@@ -23,10 +23,10 @@
 		</a>
 
 		{% if level-1[1].children %}
-		<div class="dropdown-menu">
+		<ul class="dropdown-menu">
 			{% for level-2 in level-1[1].children %}
-			<div class="dropright">
-				<a class="dropdown-item" {% 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 %}>
+			<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 %}>
 					<span class="nav-text">
 						{{ level-2[1].title }}
 						{% if level-2[1].label %}
@@ -34,15 +34,17 @@
 						{% endif %}
 					</span>
 				</a>
-			</div>
 
-			<ul class="dropdown-menu">
-				<li><a href="">AA</a></li>
-				<li><a href="">BB</a></li>
-				<li><a href="">CC</a></li>
-			</ul>
+				{% 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 %}
-		</div>
+		</ul>
 		{% endif %}
 	</li>
 	{% endfor %}

pages/_includes/layout/topmenu.html

-<header class="topnav topbar">
+<header class="topnav">
 	<div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
 		<div class="container{% if include.fluid %}-fluid{% endif %}">
 			{% include layout/menu.html top=true %}

pages/_includes/layout/topnav.html

-<header class="topnav topbar">
+<header class="topnav">
 	<div class="container{% if include.fluid %}-fluid{% endif %}">
 		<div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
 			{% include layout/navbar.html search=true menu-layout=page.menu-layout %}

scss/_variables.scss

@@ -49,6 +49,7 @@ $white: #ffffff !default;
 $text-muted: $gray-700 !default;
 $border-color: $gray-400 !default;
 $hover-bg: $gray-200 !default;
+$active-bg: rgba($blue, .06) !default;
 
 $primary: $blue !default;
 $secondary: $text-muted !default;
@@ -231,6 +232,7 @@ $card-group-margin: 1.5rem !default;
 $card-shadow: rgba($dark, .04) 0 2px 4px 0 !default;
 $card-shadow-hover: rgba($dark, .16) 0 2px 16px 0 !default;
 
+
 //close
 $close-font-weight: 400 !default;
 $close-font-size: 1.5rem !default;
@@ -244,6 +246,9 @@ $dropdown-link-hover-bg: $hover-bg !default;
 $dropdown-link-hover-color: inherit !default;
 $dropdown-spacer: 1px !default;
 
+$dropdown-link-active-color: $primary !default;
+$dropdown-link-active-bg: $active-bg !default;
+
 //grid
 $grid-gutter-width: 1.5rem !default;
 

scss/layout/_layout.scss

@@ -116,12 +116,27 @@ $sidenav-folded-item-height: 3.5rem;
 
 
 /**
-Topnav
+Top nav
  */
 .topnav {
   border-bottom: 1px solid;
   background-color: $navbar-bg;
   border-color: $navbar-border-color;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  padding: 0 .5rem;
+  z-index: $zindex-sticky;
+  min-height: $navbar-height;
+
+  & + & {
+    top: add($navbar-height, 1px);
+  }
+
+  & + & + & {
+    top: add($navbar-height * 2, 2px);
+  }
 
   @media print {
     display: none;
@@ -133,6 +148,25 @@ Topnav
     min-height: $navbar-height;
   }
 
+  .nav-link {
+    height: $navbar-height;
+  }
+
+  .nav-item {
+    &.active {
+      position: relative;
+
+      &:after {
+        content: '';
+        position: absolute;
+        bottom: -1px;
+        left: 2px;
+        right: 2px;
+        border-bottom: 1px solid $primary;
+      }
+    }
+  }
+
   .navbar-brand-logo {
     &-sm {
       display: none;
@@ -148,27 +182,6 @@ Topnav
       }
     }
   }
-}
-
-/**
-Topbar
- */
-.topbar {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  padding: 0 .5rem;
-  z-index: $zindex-sticky;
-  min-height: $navbar-height;
-
-  & + & {
-    top: add($navbar-height, 1px);
-  }
-
-  & + & + & {
-    top: add($navbar-height * 2, 2px);
-  }
 
   .sidebar + .content & {
     left: $sidenav-width;
@@ -186,7 +199,7 @@ Topbar
   }
 }
 
-.topbar-fixed {
+.topnav-fixed {
   position: fixed;
   z-index: $zindex-fixed;
 }
@@ -235,15 +248,15 @@ Content
     padding-top: 0 !important;
   }
 
-  .topbar + & {
+  .topnav + & {
     padding-top: add($navbar-height, 1px);
   }
 
-  .topbar + .topbar + & {
+  .topnav + .topnav + & {
     padding-top: add($navbar-height * 2, 2px);
   }
 
-  .topbar + .topbar + .topbar + & {
+  .topnav + .topnav + .topnav + & {
     padding-top: add($navbar-height * 3, 3px);
   }
 }

scss/layout/_navbar.scss

@@ -20,11 +20,20 @@ Navbar logo
     padding-right: $navbar-nav-link-padding-x;
   }
 
-  .nav-item {
+  .nav-item:hover,
+  .dropright:hover {
+    > .dropdown-menu {
+      display: block;
+    }
+  }
+
+  .dropdown-menu {
+    margin-top: 0;
 
-    &:hover {
-      .dropdown-menu {
-        display: block;
+    .dropdown,
+    .dropright {
+      .dropdown-toggle:after {
+        margin-left: auto;
       }
     }
   }

scss/ui/_cards.scss

@@ -77,7 +77,7 @@
 
   &:hover {
     text-decoration: none;
-    background: rgba($primary, .06);
+    background: $active-bg;
   }
 }
 

scss/ui/_dropdowns.scss

@@ -25,7 +25,6 @@
   overflow-x: hidden;
 }
 
-
 .dropdown-item {
   color: inherit;
   display: flex;
@@ -60,3 +59,10 @@
     }
   }
 }
+
+.dropright {
+  >.dropdown-menu {
+    margin-top: subtract(-$dropdown-padding-y, 1px);
+    margin-left: 0;
+  }
+}

scss/ui/_lists.scss

@@ -157,7 +157,7 @@
     &.active {
       font-weight: $font-weight-bold;
       color: inherit;
-      background: rgba($primary, .06);
+      background: $active-bg;
 
       .icon {
         color: inherit;