0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-04 16:24:22 +01:00
Bootstrap/docs/4.0/components/navbar.md

539 lines
21 KiB
Markdown
Raw Normal View History

2014-07-14 08:33:54 +02:00
---
layout: docs
2014-10-27 12:52:48 +01:00
title: Navbar
2017-05-28 08:01:14 +02:00
description: Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
group: components
2017-05-28 08:01:14 +02:00
toc: true
2014-07-14 08:33:54 +02:00
---
2016-12-21 22:12:55 +01:00
## How it works
2014-10-27 12:49:24 +01:00
Here's what you need to know before getting started with the navbar:
- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl}` for responsive collapsing and [color scheme](#color-schemes) classes.
2014-10-27 12:49:24 +01:00
- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
2016-12-21 22:12:55 +01:00
- Navbars and their contents are built with flexbox, providing easy alignment options via utility classes.
- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
Merge branch 'master' into v4 Conflicts: Gruntfile.js _config.yml dist/css/bootstrap-theme.css dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/fonts/glyphicons-halflings-regular.eot dist/fonts/glyphicons-halflings-regular.svg dist/fonts/glyphicons-halflings-regular.ttf dist/fonts/glyphicons-halflings-regular.woff docs/_data/glyphicons.yml docs/_includes/components/alerts.html docs/_includes/components/badges.html docs/_includes/components/button-dropdowns.html docs/_includes/components/button-groups.html docs/_includes/components/dropdowns.html docs/_includes/components/glyphicons.html docs/_includes/components/input-groups.html docs/_includes/components/labels.html docs/_includes/components/media.html docs/_includes/components/navbar.html docs/_includes/components/navs.html docs/_includes/components/pagination.html docs/_includes/components/panels.html docs/_includes/components/progress-bars.html docs/_includes/css/buttons.html docs/_includes/css/forms.html docs/_includes/css/grid.html docs/_includes/css/helpers.html docs/_includes/css/images.html docs/_includes/css/less.html docs/_includes/css/responsive-utilities.html docs/_includes/css/sass.html docs/_includes/css/tables.html docs/_includes/css/type.html docs/_includes/getting-started/accessibility.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/community.html docs/_includes/getting-started/download.html docs/_includes/getting-started/examples.html docs/_includes/getting-started/whats-included.html docs/_includes/js/affix.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/dropdowns.html docs/_includes/js/modal.html docs/_includes/js/overview.html docs/_includes/js/tabs.html docs/_includes/nav/components.html docs/_includes/nav/css.html docs/_includes/nav/javascript.html docs/_includes/nav/main.html docs/about.html docs/assets/css/docs.min.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/dist/css/bootstrap-theme.css docs/dist/css/bootstrap-theme.min.css docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/fonts/glyphicons-halflings-regular.eot docs/dist/fonts/glyphicons-halflings-regular.svg docs/dist/fonts/glyphicons-halflings-regular.ttf docs/dist/fonts/glyphicons-halflings-regular.woff docs/examples/carousel/index.html docs/examples/navbar-fixed-top/index.html docs/examples/navbar-static-top/index.html docs/examples/navbar/index.html docs/examples/non-responsive/index.html docs/examples/non-responsive/non-responsive.css docs/examples/sticky-footer-navbar/index.html docs/examples/theme/index.html fonts/glyphicons-halflings-regular.eot fonts/glyphicons-halflings-regular.svg fonts/glyphicons-halflings-regular.ttf fonts/glyphicons-halflings-regular.woff less/_carousel.less less/_forms.less less/glyphicons.less
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
2016-12-21 22:12:55 +01:00
Read on for an example and list of supported sub-components.
2015-08-18 08:43:59 +02:00
## Supported content
2014-10-27 12:49:24 +01:00
2016-12-21 22:08:34 +01:00
Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:
2014-10-27 12:49:24 +01:00
- `.navbar-brand` for your company, product, or project name.
- `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns).
2017-01-05 01:11:50 +01:00
- `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#responsive-behaviors) behaviors.
2016-12-29 01:37:13 +01:00
- `.form-inline` for any form controls and actions.
2016-10-19 09:18:47 +02:00
- `.navbar-text` for adding vertically centered strings of text.
2016-12-22 02:52:28 +01:00
- `.collapse.navbar-collapse` for grouping and hiding navbar contents by a parent breakpoint.
2014-10-27 12:49:24 +01:00
Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.
2014-07-14 08:33:54 +02:00
2014-10-27 12:49:24 +01:00
{% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
2017-03-21 07:13:34 +01:00
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
2016-12-22 07:11:04 +01:00
<span class="navbar-toggler-icon"></span>
</button>
2016-12-22 02:52:28 +01:00
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
2016-12-23 08:05:31 +01:00
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
Merge branch 'master' into v4 Conflicts: Gruntfile.js _config.yml dist/css/bootstrap-theme.css dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/fonts/glyphicons-halflings-regular.eot dist/fonts/glyphicons-halflings-regular.svg dist/fonts/glyphicons-halflings-regular.ttf dist/fonts/glyphicons-halflings-regular.woff docs/_data/glyphicons.yml docs/_includes/components/alerts.html docs/_includes/components/badges.html docs/_includes/components/button-dropdowns.html docs/_includes/components/button-groups.html docs/_includes/components/dropdowns.html docs/_includes/components/glyphicons.html docs/_includes/components/input-groups.html docs/_includes/components/labels.html docs/_includes/components/media.html docs/_includes/components/navbar.html docs/_includes/components/navs.html docs/_includes/components/pagination.html docs/_includes/components/panels.html docs/_includes/components/progress-bars.html docs/_includes/css/buttons.html docs/_includes/css/forms.html docs/_includes/css/grid.html docs/_includes/css/helpers.html docs/_includes/css/images.html docs/_includes/css/less.html docs/_includes/css/responsive-utilities.html docs/_includes/css/sass.html docs/_includes/css/tables.html docs/_includes/css/type.html docs/_includes/getting-started/accessibility.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/community.html docs/_includes/getting-started/download.html docs/_includes/getting-started/examples.html docs/_includes/getting-started/whats-included.html docs/_includes/js/affix.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/dropdowns.html docs/_includes/js/modal.html docs/_includes/js/overview.html docs/_includes/js/tabs.html docs/_includes/nav/components.html docs/_includes/nav/css.html docs/_includes/nav/javascript.html docs/_includes/nav/main.html docs/about.html docs/assets/css/docs.min.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/dist/css/bootstrap-theme.css docs/dist/css/bootstrap-theme.min.css docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/fonts/glyphicons-halflings-regular.eot docs/dist/fonts/glyphicons-halflings-regular.svg docs/dist/fonts/glyphicons-halflings-regular.ttf docs/dist/fonts/glyphicons-halflings-regular.woff docs/examples/carousel/index.html docs/examples/navbar-fixed-top/index.html docs/examples/navbar-static-top/index.html docs/examples/navbar/index.html docs/examples/non-responsive/index.html docs/examples/non-responsive/non-responsive.css docs/examples/sticky-footer-navbar/index.html docs/examples/theme/index.html fonts/glyphicons-halflings-regular.eot fonts/glyphicons-halflings-regular.svg fonts/glyphicons-halflings-regular.ttf fonts/glyphicons-halflings-regular.woff less/_carousel.less less/_forms.less less/glyphicons.less
2014-12-01 05:17:45 +01:00
</nav>
2014-10-27 12:49:24 +01:00
{% endexample %}
### Brand
2016-02-09 07:13:30 +01:00
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 %}
2016-05-13 04:47:49 +02:00
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
2016-05-13 04:47:49 +02:00
<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
2017-05-28 08:01:14 +02:00
<span class="h1" class="navbar-brand mb-0">Navbar</span>
</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-light">
<a class="navbar-brand" href="#">
2016-10-19 09:30:59 +02:00
<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-light">
<a class="navbar-brand" href="#">
2016-10-19 09:30:59 +02:00
<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 links build on our `.nav` options with their own modifier class and require the use of [toggler classes](#toggler) for proper responsive styling. **Navigation in navbars will also grow to occupy as much horizontal space as possible** to keep your navbar contents securely aligned.
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-expand-lg navbar-light bg-light">
2017-03-21 07:13:34 +01:00
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
2016-12-22 07:11:04 +01:00
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="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 disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
{% endexample %}
And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
{% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
2017-03-21 07:13:34 +01:00
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
2016-12-22 07:11:04 +01:00
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</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-expand-lg navbar-light bg-light">
2017-03-21 07:13:34 +01:00
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
2016-12-22 07:11:04 +01:00
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="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>
</div>
</nav>
{% endexample %}
2016-10-19 09:18:47 +02:00
### Forms
2016-12-21 22:08:34 +01:00
Place various form controls and components within a navbar with `.form-inline`.
2016-10-19 09:18:47 +02:00
{% example html %}
<nav class="navbar navbar-light bg-light">
2016-12-21 22:08:34 +01:00
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
2016-12-21 22:08:34 +01:00
</form>
</nav>
{% endexample %}
Align the contents of your inline forms with utilities as needed.
{% example html %}
<nav class="navbar navbar-light bg-light justify-content-between">
2016-12-28 07:15:02 +01:00
<a class="navbar-brand">Navbar</a>
2016-12-21 22:08:34 +01:00
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
2016-10-19 09:18:47 +02:00
</form>
</nav>
{% endexample %}
Input groups work, too:
{% example html %}
<nav class="navbar navbar-light bg-light">
2016-12-21 22:08:34 +01:00
<form class="form-inline">
2016-10-19 09:18:47 +02:00
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
2016-10-19 09:18:47 +02:00
</div>
</form>
</nav>
{% endexample %}
2016-12-21 22:08:34 +01:00
Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
2016-10-19 09:18:47 +02:00
{% example html %}
<nav class="navbar navbar-light bg-light">
2016-12-21 22:08:34 +01:00
<form class="form-inline">
2016-10-19 09:18:47 +02:00
<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-light">
2016-05-15 21:37:47 +02:00
<span class="navbar-text">
Navbar text with an inline element
</span>
</nav>
{% endexample %}
Mix and match with other components and utilities as needed.
{% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
2017-03-21 07:13:34 +01:00
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
2016-12-22 07:11:04 +01:00
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<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>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
{% endexample %}
## Color schemes
2014-10-27 12:49:24 +01:00
Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Choose from `.navbar-light` for use with light background colors, or `.navbar-dark` for dark background colors. Then, customize with `.bg-*` utilities.
<div class="bd-example">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
2017-03-21 07:13:34 +01:00
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
2016-12-22 03:29:51 +01:00
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
2016-12-22 03:29:51 +01:00
<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">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
2016-12-22 03:29:51 +01:00
</form>
</div>
</nav>
2016-12-22 03:29:51 +01:00
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
2017-03-21 07:13:34 +01:00
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
2016-12-22 07:11:04 +01:00
<span class="navbar-toggler-icon"></span>
</button>
2016-12-22 03:29:51 +01:00
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav mr-auto">
2016-12-22 03:29:51 +01:00
<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">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">Search</button>
2016-12-22 03:29:51 +01:00
</form>
</div>
</nav>
2016-12-22 03:29:51 +01:00
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
2017-03-21 07:13:34 +01:00
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
2016-12-22 07:11:04 +01:00
<span class="navbar-toggler-icon"></span>
</button>
2016-12-22 03:29:51 +01:00
<div class="collapse navbar-collapse" id="navbarColor03">
<ul class="navbar-nav mr-auto">
2016-12-22 03:29:51 +01:00
<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">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
2016-12-22 03:29:51 +01:00
</form>
</div>
</nav>
</div>
{% highlight html %}
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
Merge branch 'master' into v4 Conflicts: Gruntfile.js _config.yml dist/css/bootstrap-theme.css dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/fonts/glyphicons-halflings-regular.eot dist/fonts/glyphicons-halflings-regular.svg dist/fonts/glyphicons-halflings-regular.ttf dist/fonts/glyphicons-halflings-regular.woff docs/_data/glyphicons.yml docs/_includes/components/alerts.html docs/_includes/components/badges.html docs/_includes/components/button-dropdowns.html docs/_includes/components/button-groups.html docs/_includes/components/dropdowns.html docs/_includes/components/glyphicons.html docs/_includes/components/input-groups.html docs/_includes/components/labels.html docs/_includes/components/media.html docs/_includes/components/navbar.html docs/_includes/components/navs.html docs/_includes/components/pagination.html docs/_includes/components/panels.html docs/_includes/components/progress-bars.html docs/_includes/css/buttons.html docs/_includes/css/forms.html docs/_includes/css/grid.html docs/_includes/css/helpers.html docs/_includes/css/images.html docs/_includes/css/less.html docs/_includes/css/responsive-utilities.html docs/_includes/css/sass.html docs/_includes/css/tables.html docs/_includes/css/type.html docs/_includes/getting-started/accessibility.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/community.html docs/_includes/getting-started/download.html docs/_includes/getting-started/examples.html docs/_includes/getting-started/whats-included.html docs/_includes/js/affix.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/dropdowns.html docs/_includes/js/modal.html docs/_includes/js/overview.html docs/_includes/js/tabs.html docs/_includes/nav/components.html docs/_includes/nav/css.html docs/_includes/nav/javascript.html docs/_includes/nav/main.html docs/about.html docs/assets/css/docs.min.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/dist/css/bootstrap-theme.css docs/dist/css/bootstrap-theme.min.css docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/fonts/glyphicons-halflings-regular.eot docs/dist/fonts/glyphicons-halflings-regular.svg docs/dist/fonts/glyphicons-halflings-regular.ttf docs/dist/fonts/glyphicons-halflings-regular.woff docs/examples/carousel/index.html docs/examples/navbar-fixed-top/index.html docs/examples/navbar-static-top/index.html docs/examples/navbar/index.html docs/examples/non-responsive/index.html docs/examples/non-responsive/non-responsive.css docs/examples/sticky-footer-navbar/index.html docs/examples/theme/index.html fonts/glyphicons-halflings-regular.eot fonts/glyphicons-halflings-regular.svg fonts/glyphicons-halflings-regular.ttf fonts/glyphicons-halflings-regular.woff less/_carousel.less less/_forms.less less/glyphicons.less
2014-12-01 05:17:45 +01:00
</nav>
<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-12-07 07:47:23 +01: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 a [fixed or static top navbar](#placement).
2015-08-18 08:43:59 +02:00
{% example html %}
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
2015-08-18 08:43:59 +02:00
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</div>
2015-08-18 08:43:59 +02:00
{% endexample %}
When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified `.navbar-expand{-sm|-md|-lg|-xl}` class. This ensures we're not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.
2015-08-18 08:43:59 +02:00
{% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
2015-08-18 08:43:59 +02:00
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
2015-08-18 08:43:59 +02:00
{% endexample %}
2015-08-18 10:18:21 +02:00
## Placement
2017-03-19 23:24:20 +01:00
Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top. **Note that `position: sticky`, used for `.sticky-top`, [isn't fully supported in every browser](http://caniuse.com/#feat=css-sticky).**
{% example html %}
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Full width</a>
</nav>
{% endexample %}
2015-08-18 10:18:21 +02:00
{% example html %}
<nav class="navbar fixed-top navbar-light bg-light">
2015-08-18 10:18:21 +02:00
<a class="navbar-brand" href="#">Fixed top</a>
</nav>
{% endexample %}
{% example html %}
<nav class="navbar fixed-bottom navbar-light bg-light">
2015-08-18 10:18:21 +02:00
<a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
{% endexample %}
{% example html %}
<nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">Sticky top</a>
</nav>
{% endexample %}
2016-12-22 02:52:39 +01:00
## Responsive behaviors
Navbars can utilize `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl}` classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
2016-12-22 02:52:39 +01:00
For navbars that never collapse, add the `.navbar-expand` class on the navbar. For navbars that always collapse, don't add any `.navbar-expand` class.
2016-12-22 02:52:39 +01:00
### Toggler
2017-03-21 07:10:15 +01:00
Navbar togglers are left-aligned by default, but should they follow a sibling element like a `.navbar-brand`, they'll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.
2016-12-22 02:52:39 +01:00
With no `.navbar-brand` shown in lowest breakpoint:
{% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
2016-12-22 07:11:04 +01:00
<span class="navbar-toggler-icon"></span>
</button>
2016-12-22 02:52:39 +01:00
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
2016-12-22 02:52:39 +01:00
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
2016-12-23 08:05:31 +01:00
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
2016-12-22 02:52:39 +01:00
</form>
</div>
</nav>
{% endexample %}
With a brand name shown on the left and toggler on the right:
{% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
2017-03-21 07:10:15 +01:00
<a class="navbar-brand" href="#">Navbar</a>
2017-03-21 07:13:34 +01:00
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
2016-12-22 07:11:04 +01:00
<span class="navbar-toggler-icon"></span>
</button>
2016-12-22 02:52:39 +01:00
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
2016-12-22 02:52:39 +01:00
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
2016-12-23 08:05:31 +01:00
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
2017-03-21 07:10:15 +01:00
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
{% endexample %}
With a toggler on the left and brand name on the right:
{% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
2017-03-21 07:13:34 +01:00
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
2017-03-21 07:10:15 +01:00
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
2016-12-22 02:52:39 +01:00
</form>
</div>
</nav>
{% endexample %}
### External content
Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the `id` and `data-target` matching, that's easily done!
{% example html %}
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
2016-12-22 03:18:59 +01:00
<h4 class="text-white">Collapsed content</h4>
2016-12-22 02:52:39 +01:00
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
2016-12-22 07:11:04 +01:00
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
2016-12-22 02:52:39 +01:00
</nav>
</div>
{% endexample %}