diff options
| -rw-r--r-- | docs/components/navs.md | 96 | ||||
| -rw-r--r-- | scss/_nav.scss | 22 |
2 files changed, 114 insertions, 4 deletions
diff --git a/docs/components/navs.md b/docs/components/navs.md index 2b76f36e3..86fd0463f 100644 --- 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 640956ca2..0f635e794 100644 --- 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; + } + } +} |