Revamp navs docs
- Reorganize things, leading with the base nav first instead of an accessibility note, and then moving the rest to a new available styles section. - Add horizontal alignment options thanks to new flex utils (these new utils will be documented later in another commit). - Dropped `.nav-stacked` for a flex util and added additional alignment options, so document those, too.
This commit is contained in:
Mark Otto
Mark Otto
parent
d9baeeb0af
commit
9979827cd3
|
|
@ -12,15 +12,9 @@ Navigation available in Bootstrap share general markup and styles, from the base
|
|||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Regarding accessibility
|
||||
## Base nav
|
||||
|
||||
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.
|
||||
|
||||
## 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**.
|
||||
The base `.nav` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling. No active states are included in the base nav.
|
||||
|
||||
{% example html %}
|
||||
<ul class="nav">
|
||||
|
|
@ -39,7 +33,7 @@ Roll your own navigation style by extending the base `.nav` component. All Boots
|
|||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
Classes are used throughout, so your markup can be super flexible. Use `<ul>`s like above, or roll your own with say a `<nav>` element. The change in nav item display below **is intentional** as `<li>`s have a different default `display` than regular `<a>` elements.
|
||||
Classes are used throughout, so your markup can be super flexible. Use `<ul>`s like above, or roll your own with say a `<nav>` element. Because the `.nav` uses `display: flex`, the nav links behave the same as nav items would, but without the extra markup.
|
||||
|
||||
{% example html %}
|
||||
<nav class="nav">
|
||||
|
|
@ -50,23 +44,18 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
|
|||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
### Inline
|
||||
## Available styles
|
||||
|
||||
Space out nav links in a horizontal band with `.nav-inline`. Longer series of links will wrap to a new line.
|
||||
Change the style of `.nav`s component with modifiers and utilities. Mix and match as needed, or build your own.
|
||||
|
||||
### Horizontal alignment
|
||||
|
||||
Change the horizontal alignment of your nav with [flexbox utilities]({{ site.baseurl }}/layout/grid/#horizontal-alignment). By default, navs are left-aligned, but you can easily change them to center or right aligned.
|
||||
|
||||
Centered with `.justify-content-center`:
|
||||
|
||||
{% example html %}
|
||||
<nav class="nav nav-inline">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
The same works for a navigation built with lists.
|
||||
|
||||
{% example html %}
|
||||
<ul class="nav nav-inline">
|
||||
<ul class="nav justify-content-center">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
|
|
@ -82,6 +71,57 @@ The same works for a navigation built with lists.
|
|||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
Right-aligned with `.justify-content-end`:
|
||||
|
||||
{% example html %}
|
||||
<ul class="nav justify-content-end">
|
||||
<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 %}
|
||||
|
||||
### Vertical
|
||||
|
||||
Stack your navigation by changing the flex item direction with the `.flex-column` utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., `.flex-sm-column`).
|
||||
|
||||
{% example html %}
|
||||
<ul class="nav flex-column">
|
||||
<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 %}
|
||||
|
||||
As always, vertical navigation is possible without `<ul>`s, too.
|
||||
|
||||
{% example html %}
|
||||
<nav class="nav flex-column">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
### 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).
|
||||
|
|
@ -124,17 +164,17 @@ Take that same HTML, but use `.nav-pills` instead:
|
|||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
### Stacked pills
|
||||
### Fill and justify
|
||||
|
||||
Add `.nav-stacked` to the `.nav.nav-pills` to stack them vertically. Each `.nav-link` becomes block-level, allowing for larger hit areas via mouse or tap.
|
||||
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.
|
||||
|
||||
{% example html %}
|
||||
<ul class="nav nav-pills nav-stacked">
|
||||
<ul class="nav nav-pills nav-fill">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Longer nav link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -145,17 +185,42 @@ Add `.nav-stacked` to the `.nav.nav-pills` to stack them vertically. Each `.nav-
|
|||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
As always, stacked pills are possible without `<ul>`s.
|
||||
For equal-width elements, use `.nav-justified`. All horizontal space will be occupied by nav links, but unlike the `.nav-fill` above, every nav item will be the same width.
|
||||
|
||||
{% example html %}
|
||||
<nav class="nav nav-pills nav-stacked">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
<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="#">Longer nav 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 %}
|
||||
|
||||
## Working with flex utilities
|
||||
|
||||
If you need responsive nav variations, consider using a series of [flex utilities](). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
|
||||
|
||||
{% example html %}
|
||||
<nav class="nav nav-pills flex-column flex-sm-row">
|
||||
<a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
|
||||
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
|
||||
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
|
||||
<a class="flex-sm-fill text-sm-center nav-link disabled" href="#">Disabled</a>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
## Regarding accessibility
|
||||
|
||||
If you're 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.
|
||||
|
||||
## Using dropdowns
|
||||
|
||||
Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]({{ site.baseurl }}/components/dropdowns/#usage).
|
||||
|
|
@ -212,88 +277,6 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
|
|||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
## 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/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-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.
|
||||
|
|
|
|||
Loading…
Reference in New Issue