Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v4: Flexbox nav options #21201

Merged
merged 2 commits into from
Nov 26, 2016
Merged

v4: Flexbox nav options #21201

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
be8fa5e
Add some flexbox nav components
mdo Nov 26, 2016
7cec558
redo heading hierarchy a bit
mdo Nov 26, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 92 additions & 4 deletions docs/components/navs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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**.

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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).

Expand All @@ -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:

Expand Down Expand Up @@ -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.
Expand Down
22 changes: 22 additions & 0 deletions scss/_nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}