mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-04 16:24:22 +01:00
539 lines
21 KiB
Markdown
539 lines
21 KiB
Markdown
---
|
|
layout: docs
|
|
title: Navbar
|
|
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
|
|
toc: true
|
|
---
|
|
|
|
## How it works
|
|
|
|
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.
|
|
- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
|
|
- 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.
|
|
- 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.
|
|
|
|
Read on for an example and list of supported sub-components.
|
|
|
|
## Supported content
|
|
|
|
Navbars come with built-in support for a handful of sub-components. Choose 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](#responsive-behaviors) behaviors.
|
|
- `.form-inline` for any form controls and actions.
|
|
- `.navbar-text` for adding vertically centered strings of text.
|
|
- `.collapse.navbar-collapse` for grouping and hiding navbar contents by a parent breakpoint.
|
|
|
|
Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.
|
|
|
|
{% example html %}
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
|
<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">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<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>
|
|
<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>
|
|
</nav>
|
|
{% endexample %}
|
|
|
|
### Brand
|
|
|
|
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-light">
|
|
<a class="navbar-brand" href="#">Navbar</a>
|
|
</nav>
|
|
|
|
<!-- As a heading -->
|
|
<nav class="navbar navbar-light bg-light">
|
|
<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="#">
|
|
<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="#">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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 %}
|
|
|
|
### Forms
|
|
|
|
Place various form controls and components within a navbar with `.form-inline`.
|
|
|
|
{% example html %}
|
|
<nav class="navbar navbar-light bg-light">
|
|
<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>
|
|
</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">
|
|
<a class="navbar-brand">Navbar</a>
|
|
<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>
|
|
</form>
|
|
</nav>
|
|
{% endexample %}
|
|
|
|
Input groups work, too:
|
|
|
|
{% example html %}
|
|
<nav class="navbar navbar-light bg-light">
|
|
<form class="form-inline">
|
|
<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">
|
|
</div>
|
|
</form>
|
|
</nav>
|
|
{% endexample %}
|
|
|
|
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.
|
|
|
|
{% example html %}
|
|
<nav class="navbar navbar-light bg-light">
|
|
<form class="form-inline">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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
|
|
|
|
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>
|
|
<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>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarColor01">
|
|
<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>
|
|
<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>
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
|
<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">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarColor02">
|
|
<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>
|
|
<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>
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
|
|
<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">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarColor03">
|
|
<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>
|
|
<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>
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
{% highlight html %}
|
|
<nav class="navbar navbar-dark bg-dark">
|
|
<!-- Navbar content -->
|
|
</nav>
|
|
|
|
<nav class="navbar navbar-dark bg-primary">
|
|
<!-- Navbar content -->
|
|
</nav>
|
|
|
|
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
|
|
<!-- Navbar content -->
|
|
</nav>
|
|
{% endhighlight %}
|
|
|
|
## 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 a [fixed or static top navbar](#placement).
|
|
|
|
{% example html %}
|
|
<div class="container">
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
|
<a class="navbar-brand" href="#">Navbar</a>
|
|
</nav>
|
|
</div>
|
|
{% 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.
|
|
|
|
{% example html %}
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#">Navbar</a>
|
|
</div>
|
|
</nav>
|
|
{% endexample %}
|
|
|
|
## Placement
|
|
|
|
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 %}
|
|
|
|
{% example html %}
|
|
<nav class="navbar fixed-top navbar-light bg-light">
|
|
<a class="navbar-brand" href="#">Fixed top</a>
|
|
</nav>
|
|
{% endexample %}
|
|
|
|
{% example html %}
|
|
<nav class="navbar fixed-bottom navbar-light bg-light">
|
|
<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 %}
|
|
|
|
## 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.
|
|
|
|
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.
|
|
|
|
### Toggler
|
|
|
|
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.
|
|
|
|
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">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<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">
|
|
<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>
|
|
</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">
|
|
<a class="navbar-brand" href="#">Navbar</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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>
|
|
</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">
|
|
<h4 class="text-white">Collapsed content</h4>
|
|
<span class="text-muted">Toggleable via the navbar brand.</span>
|
|
</div>
|
|
</div>
|
|
<nav class="navbar navbar-dark bg-dark">
|
|
<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>
|
|
</nav>
|
|
</div>
|
|
{% endexample %}
|