v4: Flexbox nav options (#21201)

* Add some flexbox nav components
  - Includes .nav-justified for inline, tab, and pill nav components
  - Includes example of using the flex utils (.d- and .flex-items-) for centered nav
* redo heading hierarchy a bit

diff --git a/docs/components/navs.md b/docs/components/navs.md
index 2b76f36e3c3d09cae8c52c4f009ff35d314f95d8..86fd0463fc6b3472cca1927a8b5c181a7d464871 100644 (file)
--- a/docs/components/navs.md
+++ b/docs/components/navs.md
@@ -16,7 +16,9 @@ Navigation available in Bootstrap share general markup and styles, from the base
 
 If you are using navs to provide a navigation bar, be sure to add a `role="navigation"` to the most logical parent container of the `<ul>`, or wrap a `<nav>` element around the whole navigation. Do not add the role to the `<ul>` itself, as this would prevent it from being announced as an actual list by assistive technologies.
 
-## Base nav
+## Examples
+
+### Base nav
 
 Roll your own navigation style by extending the base `.nav` component. All Bootstrap's nav components are built on top of this by specifying additional styles. Includes styles for the disabled state, but **not the active state**.
 
@@ -48,7 +50,7 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
 </nav>
 {% endexample %}
 
-## Inline
+### Inline
 
 Space out nav links in a horizontal band with `.nav-inline`. Longer series of links will wrap to a new line.
 
@@ -80,7 +82,7 @@ The same works for a navigation built with lists.
 </ul>
 {% endexample %}
 
-## Tabs
+### Tabs
 
 Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tabbable regions with our [tab JavaScript plugin](#javascript-behavior).
 
@@ -101,7 +103,7 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
 </ul>
 {% endexample %}
 
-## Pills
+### Pills
 
 Take that same HTML, but use `.nav-pills` instead:
 
@@ -210,6 +212,92 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
 </ul>
 {% endexample %}
 
+## Flexbox variations
+
+When in [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/), tabbed and pilled navigation components gain access to additional nav styles. **These aren't available in default Bootstrap** due to a bug in table styles and responsive behavior.
+
+### Justified nav
+
+Create equal-width links in a navigation component by adding `.nav-justified` to a `.nav` component. This works with the inline, tab, and pill variants.
+
+Using the inline nav:
+
+{% example html %}
+<ul class="nav nav-inline nav-justified">
+  <li class="nav-item">
+    <a class="nav-link active" 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="#">Disabled</a>
+  </li>
+</ul>
+{% endexample %}
+
+You can also use it on tabs:
+
+{% example html %}
+<ul class="nav nav-tabs nav-justified">
+  <li class="nav-item">
+    <a class="nav-link active" 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="#">Disabled</a>
+  </li>
+</ul>
+{% endexample %}
+
+And pills, too:
+
+{% example html %}
+<ul class="nav nav-pills nav-justified">
+  <li class="nav-item">
+    <a class="nav-link active" 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="#">Disabled</a>
+  </li>
+</ul>
+{% endexample %}
+
+### Centered nav
+
+Using our [flexbox utilities]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), you can also customize your navigation components to change the alignment of nav items. For example, here are center aligned links on the inline nav component.
+
+{% example html %}
+<ul class="nav nav-inline d-flex flex-items-xs-center">
+  <li class="nav-item">
+    <a class="nav-link active" 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="#">Disabled</a>
+  </li>
+</ul>
+{% endexample %}
+
 ## JavaScript behavior
 
 Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.

diff --git a/scss/_nav.scss b/scss/_nav.scss
index 640956ca2f16f6aa23311110d8d53f3cb19e6960..0f635e794e0184908bc8e5233e85caa0c26fb522 100644 (file)
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -155,3 +155,25 @@
     display: block;
   }
 }
+
+
+// Justified navigation (flexbox only)
+//
+// Justified nav components are only built for flexbox mode in Bootstrap 4. In
+// previous versions, this component variation was limited to anchor-based nav
+// implementations--meaning it couldn't be used on button elements. This is due
+// to a longstanding Safari bug in responsive table styles.
+//
+// Using flexbox, we avoid that problem altogether at the cost of no default
+// justified navigation for default Bootstrap. Sorry, y'all <3.
+
+@if $enable-flex {
+  .nav-justified {
+    display: flex;
+
+    .nav-item {
+      flex: 1;
+      text-align: center;
+    }
+  }
+}