2014-07-14 08:33:54 +02:00
---
2015-08-15 07:45:55 +02:00
layout: docs
2014-10-27 12:52:48 +01:00
title: Navbar
2015-08-06 02:47:45 +02:00
group: components
2014-07-14 08:33:54 +02:00
---
2015-08-18 09:46:29 +02:00
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.
2014-07-14 08:33:54 +02:00
2015-05-29 10:58:52 +02:00
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
2015-08-18 08:43:59 +02:00
## Basics
2014-10-27 12:49:24 +01:00
Here's what you need to know before getting started with the navbar:
2015-08-18 08:43:59 +02:00
- Navbars require a wrapping `.navbar` and a color scheme class (either `.navbar-default` or `.navbar-inverse` ).
2014-10-27 12:49:24 +01:00
- When using multiple components in a navbar, some [alignment classes ](#alignment ) are required.
- Navbars and their contents are fluid by default. Use [optional containers ](#containers ) to limit their horizontal width.
2015-08-18 08:43:59 +02:00
- Use `.pull-left` and `.pull-right` to quickly align sub-components.
2014-12-01 05:17:45 +01:00
- 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.
2014-10-27 12:49:24 +01:00
2015-08-18 08:43:59 +02:00
## Supported content
2014-10-27 12:49:24 +01:00
2015-08-18 08:43:59 +02:00
Navbars come with built-in support for a handful of sub-components. Mix and match from the following as you need:
2014-10-27 12:49:24 +01:00
2015-08-18 08:43:59 +02:00
- `.navbar-brand` for your company, product, or project name
- `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns)
- `.navbar-form` for vertically centering default-sized inputs and buttons.
2015-08-18 09:46:29 +02:00
- `.navbar-toggler` for use with our collapse plugin and other navigation toggling behaviors.
2014-10-27 12:49:24 +01:00
2015-08-18 08:43:59 +02:00
Here's an example of all the sub-components included in a default, light navbar:
2014-07-14 08:33:54 +02:00
2014-10-27 12:49:24 +01:00
{% example html %}
2015-08-18 09:46:29 +02:00
< nav class = "navbar navbar-light bg-faded" >
2015-08-18 08:43:59 +02:00
< a class = "navbar-brand" href = "#" > Navbar< / a >
< ul class = "nav navbar-nav" >
2014-07-14 08:33:54 +02:00
< li class = "nav-item active" >
2014-12-01 05:17:45 +01:00
< a class = "nav-link" href = "#" > Home < span class = "sr-only" > (current)< / span > < / a >
2014-07-14 08:33:54 +02:00
< / 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" >
< a class = "nav-link" href = "#" > About< / a >
< / li >
< / ul >
2015-08-18 08:43:59 +02:00
< form class = "form-inline navbar-form pull-right" >
2014-10-27 12:49:24 +01:00
< input class = "form-control" type = "text" placeholder = "Search" >
2015-08-18 08:43:59 +02:00
< button class = "btn btn-success-outline" type = "submit" > Search< / button >
2014-10-27 12:49:24 +01:00
< / form >
2014-12-01 05:17:45 +01:00
< / nav >
2014-10-27 12:49:24 +01:00
{% endexample %}
2015-08-18 09:46:29 +02:00
## Color schemes
2014-10-27 12:49:24 +01:00
2015-08-18 09:46:29 +02:00
Theming the navbar has never been easier thanks to the combination of a simple link color modifier class and `background-color` utilities. Put another way, you specify light or dark and apply a background color.
2014-07-14 08:33:54 +02:00
2015-08-18 09:46:29 +02:00
Here are some examples to show what we mean.
< div class = "bd-example" >
< nav class = "navbar navbar-dark bg-inverse" >
< 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 >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Pricing< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > About< / a >
< / li >
< / ul >
< form class = "form-inline navbar-form pull-right" >
< input class = "form-control" type = "text" placeholder = "Search" >
< button class = "btn btn-info-outline" type = "submit" > Search< / button >
< / form >
< / nav >
< nav class = "navbar navbar-dark bg-primary" >
< 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 >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Pricing< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > About< / a >
< / li >
< / ul >
< form class = "form-inline navbar-form pull-right" >
< input class = "form-control" type = "text" placeholder = "Search" >
< button class = "btn btn-secondary-outline" type = "submit" > Search< / button >
< / form >
< / nav >
< nav class = "navbar navbar-light" style = "background-color: #e3f2fd ;" >
< 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 >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Pricing< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > About< / a >
< / li >
< / ul >
< form class = "form-inline navbar-form pull-right" >
< input class = "form-control" type = "text" placeholder = "Search" >
< button class = "btn btn-primary-outline" type = "submit" > Search< / button >
< / form >
< / nav >
< / div >
{% highlight html %}
< nav class = "navbar navbar-dark bg-inverse" >
<!-- Navbar content -->
2014-12-01 05:17:45 +01:00
< / nav >
2015-08-18 09:46:29 +02:00
< nav class = "navbar navbar-dark bg-primary" >
<!-- Navbar content -->
< / nav >
< nav class = "navbar navbar-light" style = "background-color: #e3f2fd ;" >
<!-- Navbar content -->
< / nav >
{% endhighlight %}
2014-07-14 08:33:54 +02:00
2015-08-18 08:43:59 +02:00
## Containers
2015-06-23 01:30:52 +02:00
2015-08-18 08:43:59 +02:00
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.
2015-04-19 03:12:10 +02:00
2015-08-18 08:43:59 +02:00
{% example html %}
< div class = "container" >
2015-08-18 09:46:29 +02:00
< nav class = "navbar navbar-light bg-faded" >
2015-08-18 08:43:59 +02:00
< a class = "navbar-brand" href = "#" > Navbar< / a >
2015-06-23 08:24:55 +02:00
< / nav >
< / div >
2015-08-18 08:43:59 +02:00
{% endexample %}
2015-06-23 08:24:55 +02:00
2015-08-18 08:43:59 +02:00
{% example html %}
2015-08-18 09:46:29 +02:00
< nav class = "navbar navbar-light bg-faded" >
2015-08-18 08:43:59 +02:00
< div class = "container" >
< a class = "navbar-brand" href = "#" > Navbar< / a >
< / div >
2015-04-19 03:12:10 +02:00
< / nav >
2015-08-18 08:43:59 +02:00
{% endexample %}
2015-04-19 03:12:10 +02:00
2015-08-18 08:43:59 +02:00
## Collapsible content
2014-07-14 08:33:54 +02:00
2014-12-01 05:17:45 +01:00
Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content.
2014-10-27 12:49:24 +01:00
{% example html %}
2015-04-17 03:50:32 +02:00
< div class = "collapse" id = "exCollapsingNavbar" >
2015-08-18 09:46:29 +02:00
< div class = "bg-inverse p-a" >
2015-04-17 03:50:32 +02:00
< h4 > Collapsed content< / h4 >
2015-08-18 08:43:59 +02:00
< span class = "text-muted" > Toggleable via the navbar brand.< / span >
2014-07-14 08:33:54 +02:00
< / div >
2014-07-14 17:48:33 +02:00
< / div >
2015-08-18 09:46:29 +02:00
< nav class = "navbar navbar-light bg-faded" >
2015-04-17 03:50:32 +02:00
< button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#exCollapsingNavbar" >
2014-07-14 08:33:54 +02:00
☰
< / button >
2014-12-01 05:17:45 +01:00
< / nav >
2014-10-27 12:49:24 +01:00
{% endexample %}
2015-04-17 03:50:32 +02:00
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 %}
2015-08-18 09:46:29 +02:00
< nav class = "navbar navbar-light bg-faded" >
2015-04-17 03:50:32 +02:00
< button class = "navbar-toggler hidden-sm-up" type = "button" data-toggle = "collapse" data-target = "#exCollapsingNavbar2" >
☰
< / button >
< div class = "collapse navbar-toggleable-xs" id = "exCollapsingNavbar2" >
2015-08-18 08:43:59 +02:00
< a class = "navbar-brand" href = "#" > Responsive 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 >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Pricing< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > About< / a >
< / li >
< / ul >
2015-04-17 03:50:32 +02:00
< / div >
< / nav >
{% endexample %}