added support for vertical nav tabs

- updated _navs.scss with tabs override css
- added pages/UI/navbar demo with navbar color examples & vertical tabs example
- added navbar & tabs sidebar entry in demo files with sidebar

build/scss/_navs.scss

@@ -19,6 +19,45 @@
   }
 }
 
+//
+// Vertical Tabs
+//
+.nav-tabs.flex-column {
+  border-right: $nav-tabs-border-width solid $nav-tabs-border-color;
+  border-bottom: 0;
+
+  .nav-link {
+    margin-right: -$nav-tabs-border-width;
+
+    @include hover-focus {
+      border-color: $gray-200 $nav-tabs-border-color $gray-200 $gray-200;
+    }
+  }
+
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    border-color: $gray-300 $nav-tabs-link-active-bg $gray-300 $gray-300;
+  }
+
+  &.nav-tabs-right {
+    border-right: 0;
+    border-left: $nav-tabs-border-width solid $nav-tabs-border-color;
+
+
+    .nav-link {
+      margin-left: -$nav-tabs-border-width;
+
+      @include hover-focus {
+        border-color: $gray-200 $gray-200 $gray-200 $nav-tabs-border-color;
+      }
+    }
+
+    .nav-link.active,
+    .nav-item.show .nav-link {
+      border-color: $gray-300 $gray-300 $gray-300 $nav-tabs-link-active-bg;
+    }
+  }
+}
 
 //
 // Color variants

dist/css/adminlte.css

@@ -14401,6 +14401,42 @@ html.maximized-card {
   color: #ffffff;
 }
 
+.nav-tabs.flex-column {
+  border-right: 1px solid #dee2e6;
+  border-bottom: 0;
+}
+
+.nav-tabs.flex-column .nav-link {
+  margin-right: -1px;
+}
+
+.nav-tabs.flex-column .nav-link:hover, .nav-tabs.flex-column .nav-link:focus {
+  border-color: #e9ecef #dee2e6 #e9ecef #e9ecef;
+}
+
+.nav-tabs.flex-column .nav-link.active,
+.nav-tabs.flex-column .nav-item.show .nav-link {
+  border-color: #dee2e6 #ffffff #dee2e6 #dee2e6;
+}
+
+.nav-tabs.flex-column.nav-tabs-right {
+  border-right: 0;
+  border-left: 1px solid #dee2e6;
+}
+
+.nav-tabs.flex-column.nav-tabs-right .nav-link {
+  margin-left: -1px;
+}
+
+.nav-tabs.flex-column.nav-tabs-right .nav-link:hover, .nav-tabs.flex-column.nav-tabs-right .nav-link:focus {
+  border-color: #e9ecef #e9ecef #e9ecef #dee2e6;
+}
+
+.nav-tabs.flex-column.nav-tabs-right .nav-link.active,
+.nav-tabs.flex-column.nav-tabs-right .nav-item.show .nav-link {
+  border-color: #dee2e6 #dee2e6 #dee2e6 #ffffff;
+}
+
 .navbar-light {
   background-color: #f8f9fa;
 }

index.html

@@ -333,6 +333,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="pages/UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

index2.html

@@ -320,6 +320,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="pages/UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

index3.html

@@ -330,6 +330,12 @@ to get the desired effect
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="pages/UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/UI/buttons.html

@@ -322,6 +322,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/UI/general.html

@@ -356,6 +356,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/UI/icons.html

@@ -322,6 +322,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/UI/modals.html

@@ -326,6 +326,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/UI/sliders.html

@@ -327,6 +327,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/calendar.html

@@ -328,6 +328,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/charts/chartjs.html

@@ -322,6 +322,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/charts/flot.html

@@ -323,6 +323,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/charts/inline.html

@@ -324,6 +324,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/examples/404.html

@@ -323,6 +323,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/examples/500.html

@@ -323,6 +323,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/examples/blank.html

@@ -324,6 +324,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/examples/invoice.html

@@ -322,6 +322,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/examples/legacy-user-menu.html

@@ -351,6 +351,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/examples/profile.html

@@ -323,6 +323,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/forms/advanced.html

@@ -333,6 +333,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview menu-open">

pages/forms/editors.html

@@ -325,6 +325,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview menu-open">

pages/forms/general.html

@@ -323,6 +323,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview menu-open">

pages/layout/boxed.html

@@ -324,6 +324,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/layout/collapsed-sidebar.html

@@ -324,6 +324,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/layout/fixed-footer.html

@@ -323,6 +323,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/layout/fixed-topnav.html

@@ -323,6 +323,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/layout/fixed.html

@@ -325,6 +325,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/mailbox/compose.html

@@ -325,6 +325,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/mailbox/mailbox.html

@@ -324,6 +324,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/mailbox/read-mail.html

@@ -323,6 +323,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/tables/data.html

@@ -325,6 +325,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/tables/simple.html

@@ -322,6 +322,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">

pages/widgets.html

@@ -322,6 +322,12 @@
                   <p>Modals & Alerts</p>
                 </a>
               </li>
+              <li class="nav-item">
+                <a href="UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
             </ul>
           </li>
           <li class="nav-item has-treeview">