4.6 KiB
| layout | title |
|---|---|
| page | Navbar |
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.
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 or add one within for basic horizontal control.
{% 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 %}Collapsible content
Our collapse plugin allows you to use a <button> or <a> to toggle hidden content.
{% example html %}
☰ {% endexample %}