docs: refactor nav/tab docs (#6629)

www/docs/components/navs.mdx

@@ -13,6 +13,7 @@ import NavJustified from '!!raw-loader!../examples/Nav/Justified';
 import NavStacked from '!!raw-loader!../examples/Nav/Stacked';
 import Tabs from '!!raw-loader!../examples/Nav/Tabs';
 import Pills from '!!raw-loader!../examples/Nav/Pills';
+import Underline from '!!raw-loader!../examples/Nav/Underline';
 
 ## Base Nav
 
@@ -46,28 +47,27 @@ also set your items to `<li>` as well!
   {NavList}
 </CodeBlock>
 
-## Alignment and orientation
+## Available styles
 
 You can control the the direction and orientation of the
-`Nav` by making use of the [flexbox layout][0] utility classes.
-By default, navs are left-aligned, but that is easily changed to center or right-aligned.
+`Nav` by making use of the <DocLink path="/utilities/flex#justify-content">flexbox utility</DocLink>
+classes. By default, navs are left-aligned, but that is easily changed to center or right-aligned.
 
 <CodeBlock language="jsx" live>
   {NavAlignment}
 </CodeBlock>
 
 ### Vertical
 
-Create stacked navs by changing the flex item direction with the
-`.flex-column` class, or your own css. You can even use the
-responsive versions to stack in some viewports but not others (e.g.
-`.flex-sm-column`).
+Create stacked navs by changing the flex item direction with the `.flex-column` class, or
+your own css. You can even use the responsive versions to stack in some viewports but not
+others (e.g. `.flex-sm-column`).
 
 <CodeBlock language="jsx" live>
   {NavStacked}
 </CodeBlock>
 
-## Tabs
+### Tabs
 
 Visually represent nav items as "tabs". This style pairs nicely with
 tabbable regions created by our [Tab components](tabs).
@@ -79,14 +79,18 @@ default stylesheet.
   {Tabs}
 </CodeBlock>
 
-## Pills
-
-An alternative visual variant.
+### Pills
 
 <CodeBlock language="jsx" live>
   {Pills}
 </CodeBlock>
 
+### Underline
+
+<CodeBlock language="jsx" live>
+  {Underline}
+</CodeBlock>
+
 ## Fill and justify
 
 Force the contents of your nav to extend the full available width. To
@@ -138,5 +142,3 @@ straight-forward `<NavDropdown>` that works for most cases.
 ### NavDropdown
 
 <PropsTable name="NavDropdown" />
-
-[0]: https://getbootstrap.com/docs/4.0/layout/grid/#horizontal-alignment

www/docs/components/tabs.mdx

@@ -6,7 +6,6 @@ sidebar_label: Tabs
 
 import TabsControlled from '!!raw-loader!../examples/Tabs/Controlled';
 import LeftTabs from '!!raw-loader!../examples/Tabs/LeftTabs';
-import Underline from '!!raw-loader!../examples/Tabs/Underline';
 import TabsNoAnimation from '!!raw-loader!../examples/Tabs/NoAnimation';
 import TabsUncontrolled from '!!raw-loader!../examples/Tabs/Uncontrolled';
 import TabsFill from '!!raw-loader!../examples/Tabs/Fill';
@@ -90,12 +89,6 @@ grid system, pills and underline.
   {LeftTabs}
 </CodeBlock>
 
-## Underline
-
-<CodeBlock language="jsx" live previewClassName="bs-example-tabs">
-  {Underline}
-</CodeBlock>
-
 ## API
 
 ### Tabs

www/docs/examples/Nav/Underline.js

@@ -0,0 +1,21 @@
+import Nav from 'react-bootstrap/Nav';
+
+function UnderlineExample() {
+  return (
+    <Nav variant="underline" defaultActiveKey="/home">
+      <Nav.Item>
+        <Nav.Link href="/home">Active</Nav.Link>
+      </Nav.Item>
+      <Nav.Item>
+        <Nav.Link eventKey="link-1">Option 2</Nav.Link>
+      </Nav.Item>
+      <Nav.Item>
+        <Nav.Link eventKey="disabled" disabled>
+          Disabled
+        </Nav.Link>
+      </Nav.Item>
+    </Nav>
+  );
+}
+
+export default UnderlineExample;

www/src/css/examples.scss

@@ -16,7 +16,7 @@
     max-width: 400px;
   }
 
-  .breadcrumb-item {
+  .breadcrumb-item, .nav-item {
     margin-top: 0;
   }
 }