Add .nav-underline modifier class

twbs · Mar 11, 2021 · 18742df · 18742df
1 parent 88cbe44
commit 18742df
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 3 deletions.
diff --git a/scss/_nav.scss b/scss/_nav.scss
@@ -18,6 +18,8 @@
   font-weight: $nav-link-font-weight;
   color: $nav-link-color;
   text-decoration: if($link-decoration == none, null, none);
+  background: none;
+  border: 0;
   @include transition($nav-link-transition);
 
   &:hover,
@@ -43,7 +45,6 @@
 
   .nav-link {
     margin-bottom: -$nav-tabs-border-width;
-    background: none;
     border: $nav-tabs-border-width solid transparent;
     @include border-top-radius($nav-tabs-border-radius);
 
@@ -83,8 +84,6 @@
 
 .nav-pills {
   .nav-link {
-    background: none;
-    border: 0;
     @include border-radius($nav-pills-border-radius);
   }
 
@@ -96,6 +95,24 @@
 }
 
 
+//
+// Underline
+//
+
+.nav-underline {
+  .nav-link {
+    border-bottom: .125rem solid transparent;
+  }
+
+  .nav-link.active,
+  .show > .nav-link {
+    font-weight: $font-weight-bold;
+    color: $dark;
+    border-bottom-color: $dark;
+  }
+}
+
+
 //
 // Justified variants
 //

diff --git a/site/content/docs/5.0/components/navs-tabs.md b/site/content/docs/5.0/components/navs-tabs.md
@@ -167,6 +167,27 @@ Take that same HTML, but use `.nav-pills` instead:
 </ul>
 {{< /example >}}
 
+### Underline
+
+Take that same HTML, but use `.nav-underline` instead:
+
+{{< example >}}
+<ul class="nav nav-underline">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+{{< /example >}}
+
 ### Fill and justify
 
 Force your `.nav`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width.