7.6 KiB
| layout | title | group |
|---|---|---|
| page | Navbar | components |
The navbar is a simple wrapper for positioning branding, navigation, and other elements. It's easily extensible and with the help of our collapse plugin it can easily integrate offscreen content.
Contents
- Will be replaced with the ToC, excluding the "Contents" header {:toc}
Basics
Here's what you need to know before getting started with the navbar:
- Navbars require a wrapping
.navbarand either a color scheme class or custom styles. - When using multiple components in a navbar, some alignment classes are required.
- Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
- Ensure accessibility by using a
<nav>element or, if using a more generic element such as a<div>, add arole="navigation"to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
Branding
Name your company, product, or project with .navbar-brand.
{% example html %}
Navbar
{% endexample %}Navigation
Use .nav-pills within a navbar for basic navigation.
{% example html %}
{% endexample %}Inline forms
Add an .inline-form within the navbar with nearly any combination of form controls and buttons.
{% example html %}
Search {% endexample %}Containers
Although it's not required, you can wrap a navbar in a .container to center it on a page, or add one within to only center the contents of the navbar.
{% example html %}
{% endexample %}{% example html %}
{% endexample %}Alignment
Use .pull-left or .pull-right to align multiple elements within the navbar.
{% example html %}
Navbar
{% endexample %}Inverse color scheme
Replace .navbar-default with .navbar-inverse for a darker background color and white text.
{% example html %}
Navbar
Search {% endexample %}Small navbar
Small navbars provide a similar aesthetic to Bootstrap 3's navbar. It cuts the padding down, enables full-height navigation, and tweaks vertical alignment for search forms, buttons, and more. It's also available in both default and inverse schemes.
When moving from a regular navbar to a small one, be sure to update your inputs and buttons to use their small variations as well.
{% highlight html %}
{% endhighlight %}Collapsible content
Our collapse plugin allows you to use a <button> or <a> to toggle hidden content.
{% example html %}
☰ {% endexample %}For more complex navbar patterns, like those used in Bootstrap v3, use the .navbar-toggleable-* classes in conjunction with the .navbar-toggler. These classes override our responsive utilities to show navigation only when content is meant to be shown.
{% example html %}
☰ {% endexample %}