feat(CNav): add underline-border variant

Author: mrholek

packages/coreui-react/src/components/nav/CNav.tsx

@@ -19,7 +19,7 @@ export interface CNavProps
   /**
    * Set the nav variant to tabs or pills.
    */
-  variant?: 'pills' | 'tabs' | 'underline'
+  variant?: 'pills' | 'tabs' | 'underline' | 'underline-border'
 }
 
 export const CNav = forwardRef<HTMLDivElement | HTMLUListElement | HTMLOListElement, CNavProps>(

packages/docs/content/components/navs-tabs.mdx

@@ -220,6 +220,31 @@ Take that same code, but use `variant="underline"` instead:
 </CNav>
 ```
 
+### Underline border
+
+Take that same code, but use `variant="underline-border"` instead:
+
+```jsx preview
+<CNav variant="underline-border">
+  <CNavItem>
+    <CNavLink href="#" active>
+      Active
+    </CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#">Link</CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#">Link</CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#" disabled>
+      Disabled
+    </CNavLink>
+  </CNavItem>
+</CNav>
+```
+
 ### Fill and justify
 
 Force your `<CNav>`'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 `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width.