Permalink
Browse files

Merge pull request #19890 from twbs/v4-navbars

v4: Navbar improvements
  • Loading branch information...
mdo committed Oct 19, 2016
2 parents 16947ff + f8e4a53 commit 028dd6bd488c43a8a92e0f79c439e3426e173727
Showing with 229 additions and 33 deletions.
  1. +153 −16 docs/components/navbar.md
  2. +60 −12 scss/_navbar.scss
  3. +16 −5 scss/_variables.scss
View
@@ -5,7 +5,7 @@ description: Documentation and examples for Bootstrap's powerful, responsive nav
group: components
---
The navbar is a simple wrapper for positioning branding, navigation, and other elements into a concise navigation header. It's easily extensible and, with the help of our collapse plugin, it can easily integrate offscreen content.
The navbar is a wrapper that positions branding, navigation, and other elements into a concise header. It's easily extensible and thanks to our Collapse plugin, it can easily integrate responsive behaviors.
## Contents
@@ -18,18 +18,20 @@ Here's what you need to know before getting started with the navbar:
- Navbars require a wrapping `.navbar` and a [color scheme](#color-schemes).
- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
- Use `.pull-*-left` and `.pull-*-right` to quickly align sub-components.
- Use `.float-*-left` and `.float-*-right` to quickly align sub-components.
- Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
## Supported content
Navbars come with built-in support for a handful of sub-components. Mix and match from the following as you need:
Navbars come with built-in support for a handful of sub-components. Mix and match from the following as needed:
- `.navbar-brand` for your company, product, or project name
- `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns)
- `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#collapsible-content) behaviors.
- Inline forms with `.float-` utilities for form controls and components.
- `.navbar-text` for adding vertically centered strings of text.
Here's an example of all the sub-components included in a default, light navbar:
Here's an example of all the sub-components included in a default, non-responsive light themed navbar. [See the responsive examples](#collapsible-content) for collapsing nav support.
{% example html %}
<nav class="navbar navbar-light bg-faded">
@@ -39,13 +41,18 @@ Here's an example of all the sub-components included in a default, light navbar:
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="supportedContentDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="supportedContentDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline float-xs-right">
@@ -60,20 +67,44 @@ Here's an example of all the sub-components included in a default, light navbar:
The `.navbar-brand` can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.
{% example html %}
<!-- As a link -->
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<!-- As a heading -->
<nav class="navbar navbar-light bg-faded">
<h1 class="navbar-brand mb-0">Navbar</h1>
</nav>
{% endexample %}
Adding images to the `.navbar-brand` will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.
{% example html %}
<!-- Just an image -->
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">
<img src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
</a>
</nav>
{% endexample %}
{% example html %}
<!-- Image and text -->
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">
<img src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>
{% endexample %}
### Nav
Navbar navigation is similar to our regular nav options—use the `.nav` base class with a modifier to achieve a particular look. In this case you'll want `.nav.navbar-nav`.
Active states—with `.active`—to indicate the current page can be applied directly to `.nav-link`s or their immediate parent `.nav-item`s.
{% example html %}
<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
@@ -106,6 +137,103 @@ And because we use classes for our navs, you can avoid the list-based approach e
</nav>
{% endexample %}
You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
{% example html %}
<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
{% endexample %}
### Forms
Place various form controls and components within a navbar with `.form-inline`. Align them with `.float-` utilities as needed.
{% example html %}
<nav class="navbar navbar-light bg-faded">
<form class="form-inline float-xs-left">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</nav>
{% endexample %}
Input groups work, too:
{% example html %}
<nav class="navbar navbar-light bg-faded">
<form class="form-inline float-xs-left">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
</form>
</nav>
{% endexample %}
Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilites can be used to align different sized elements.
{% example html %}
<nav class="navbar navbar-light bg-faded">
<form class="form-inline float-xs-left">
<button class="btn btn-outline-success" type="button">Main button</button>
<button class="btn btn-sm align-middle btn-outline-secondary" type="button">Smaller button</button>
</form>
</nav>
{% endexample %}
### Text
Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text.
{% example html %}
<nav class="navbar navbar-light bg-faded">
<span class="navbar-text">
Navbar text with an inline element
</span>
</nav>
{% endexample %}
Using our utility classes, you can change the alignment and appearance of your navbar text.
{% example html %}
<nav class="navbar navbar-light bg-faded">
<span class="navbar-text float-xs-right text-muted">
Muted navbar text that's floated right
</span>
</nav>
{% endexample %}
Similarly, you can use utility classes to align navbar text to other navbar elements like the brand and navigation (which are automatically floated already).
{% example html %}
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
<span class="navbar-text float-xs-left">
Navbar text that's floated left
</span>
</nav>
{% endexample %}
## Color schemes
@@ -244,7 +372,7 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse" id="exCollapsingNavbar">
<div class="bg-inverse p-1">
<div class="bg-inverse text-muted p-1">
<h4>Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
@@ -256,23 +384,32 @@ For more complex navbar patterns, like those used in Bootstrap v3, use the `.nav
{% example html %}
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<a class="navbar-brand" href="#">Responsive navbar</a>
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-md" id="navbarResponsive">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline float-lg-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
{% endexample %}
View
@@ -69,26 +69,23 @@
.navbar-brand {
float: left;
padding-top: $navbar-brand-padding-y;
padding-top: $navbar-brand-padding-y;
padding-bottom: $navbar-brand-padding-y;
margin-right: 1rem;
font-size: $font-size-lg;
line-height: inherit;
@include hover-focus {
text-decoration: none;
}
> img {
display: block;
}
}
.navbar-divider {
float: left;
width: $border-width;
padding-top: .425rem;
padding-bottom: .425rem;
padding-top: $navbar-divider-padding-y;
padding-bottom: $navbar-divider-padding-y;
margin-right: $navbar-padding-x;
margin-left: $navbar-padding-x;
overflow: hidden;
@@ -99,6 +96,17 @@
}
// Navbar text
//
//
.navbar-text {
display: inline-block;
padding-top: .425rem;
padding-bottom: .425rem;
}
// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
@@ -107,19 +115,55 @@
.navbar-toggler {
width: 2.5em;
height: 2em;
padding: .5rem .75rem;
font-size: $font-size-lg;
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
font-size: $navbar-toggler-font-size;
line-height: 1;
background: transparent no-repeat center center;
background-size: 24px 24px;
border: $border-width solid transparent;
@include border-radius($btn-border-radius);
@include border-radius($navbar-toggler-border-radius);
@include hover-focus {
text-decoration: none;
}
}
// scss-lint:disable ImportantRule
.navbar-toggleable {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
&-#{$breakpoint} {
@include clearfix;
@include media-breakpoint-down($breakpoint) {
.navbar-brand {
display: block;
float: none;
margin-top: .5rem;
margin-right: 0;
}
.navbar-nav {
margin-top: .5rem;
margin-bottom: .5rem;
.dropdown-menu {
position: static;
float: none;
}
}
}
@include media-breakpoint-up($next) {
display: block;
}
}
}
}
// scss-lint:enable ImportantRule
// Navigation
//
// Custom navbar navigation built on the base `.nav` styles.
@@ -146,7 +190,8 @@
// Dark links against a light background
.navbar-light {
.navbar-brand {
.navbar-brand,
.navbar-toggler {
color: $navbar-light-active-color;
@include hover-focus {
@@ -175,6 +220,7 @@
.navbar-toggler {
background-image: $navbar-light-toggler-bg;
border-color: $navbar-light-toggler-border;
}
.navbar-divider {
@@ -184,7 +230,8 @@
// White links against a dark background
.navbar-dark {
.navbar-brand {
.navbar-brand,
.navbar-toggler {
color: $navbar-dark-active-color;
@include hover-focus {
@@ -213,6 +260,7 @@
.navbar-toggler {
background-image: $navbar-dark-toggler-bg;
border-color: $navbar-dark-toggler-border;
}
.navbar-divider {
Oops, something went wrong.

0 comments on commit 028dd6b

Please sign in to comment.