feat(Nav): add "underline border" variant

Author: mrholek

docs/content/components/navs-tabs.md

@@ -189,6 +189,27 @@ Take that same HTML, but use `.nav-underline` instead:
 </ul>
 {{< /example >}}
 
+### Underline border
+
+Take that same HTML, but use `.nav-underline-border` instead:
+
+{{< example >}}
+<ul class="nav nav-underline-border">
+  <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" 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.

scss/_nav.scss

@@ -154,6 +154,48 @@
 }
 
 
+//
+// Underline border
+//
+
+.nav-underline-border {
+  // scss-docs-start nav-underline-css-vars
+  --#{$prefix}nav-underline-border-gap: #{$nav-underline-border-gap};
+  --#{$prefix}nav-underline-border-border-color: #{$nav-underline-border-border-color};
+  --#{$prefix}nav-underline-border-border-width: #{$nav-underline-border-border-width};
+  --#{$prefix}nav-underline-border-link-padding-x: #{$nav-underline-border-link-padding-x};
+  --#{$prefix}nav-underline-border-link-padding-y: #{$nav-underline-border-link-padding-y};
+  --#{$prefix}nav-underline-border-link-color: #{$nav-underline-border-link-color};
+  --#{$prefix}nav-underline-border-link-active-color: #{$nav-underline-border-link-active-color};
+  --#{$prefix}nav-underline-border-link-disabled-color: #{$nav-underline-border-link-disabled-color};
+  // scss-docs-end nav-underline-css-vars
+
+  --#{$prefix}nav-link-color: var(--#{$prefix}nav-underline-border-link-color);
+  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}nav-underline-border-link-disabled-color);
+
+  gap: var(--#{$prefix}nav-underline-border-gap);
+  border-bottom: var(--#{$prefix}nav-underline-border-border-width) solid var(--#{$prefix}nav-underline-border-border-color);
+
+  .nav-link {
+    padding: var(--#{$prefix}nav-underline-border-link-padding-y) var(--#{$prefix}nav-underline-border-link-padding-x);
+    margin-bottom: calc(-1 * var(--#{$prefix}nav-underline-border-border-width)); // stylelint-disable-line function-disallowed-list
+    border-bottom: var(--#{$prefix}nav-underline-border-border-width) solid transparent;
+
+    &:hover,
+    &:focus {
+      border-bottom-color: currentcolor;
+    }
+  }
+
+  .nav-link.active,
+  .show > .nav-link {
+    font-weight: $font-weight-bold;
+    color: var(--#{$prefix}nav-underline-border-link-active-color);
+    border-bottom-color: currentcolor;
+  }
+}
+
+
 //
 // Justified variants
 //

scss/_variables.scss

@@ -1245,6 +1245,15 @@ $nav-pills-link-active-bg:          $component-active-bg !default;
 $nav-underline-gap:                 1rem !default;
 $nav-underline-border-width:        .125rem !default;
 $nav-underline-link-active-color:   var(--#{$prefix}emphasis-color) !default;
+
+$nav-underline-border-gap:                  .5rem !default;
+$nav-underline-border-border-color:         var(--#{$prefix}border-color) !default;
+$nav-underline-border-border-width:         .125rem !default;
+$nav-underline-border-link-padding-y:       .5rem !default;
+$nav-underline-border-link-padding-x:       .5rem !default;
+$nav-underline-border-link-color:           var(--#{$prefix}secondary-color) !default;
+$nav-underline-border-link-active-color:    var(--#{$prefix}primary) !default;
+$nav-underline-border-link-disabled-color:  var(--#{$prefix}tertiary-color) !default;
 // scss-docs-end nav-variables