Navbars

A powerful navigation header with support for branding, navigation and more.

Here’s what you need to know before getting started with the navbar:

Navbars require a wrapping .navbar with .navbar-expand-{breakpont} for responsive collapsing and color scheme classes, where breakpoint is any breakpoint from sm, md, lg or xl.
Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
Use spacing and flex utility classes for controlling spacing and alignment within navbars.
Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on Bootstrap’s Collapse JavaScript plugin.
Navbars are hidden by default when printing. Force them to be printed by adding .d-print to the .navbar See the display utility class.
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.

Sub-components

A variety of sub-components can be placed inside a navbar.

.navbar-brand for branding.
.navbar-nav for navigation items (including support for dropdowns).
.navbar-toggler for use with Bootstrap’s collapse plugin and other navigation toggling 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.


<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
	<div class="container">
		<span class="navbar-brand">Brand</span>
		<button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#navbar-1-collapse" aria-controls="navbar-1-collapse" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbar-1-collapse">
			<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 dropdown">
					<a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						Dropdown
					</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>
				<li class="nav-item">
					<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
				</li>
			</ul>
			<form class="form-inline my-2 my-lg-0">
				<input class="form-control mr-sm-2" type="text" placeholder="Search">
			</form>
			<ul class="navbar-nav">
				<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" href="" id="navbarDropdown3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						<i class="fas fa-user"></i>
					</a>
					<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown3">
						<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>
	</div>
</nav>

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. Adding images to the .navbar-brand will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.


<!-- As a link -->
<nav class="navbar navbar-dark bg-primary">
	<a href="#" class="navbar-brand" href="#">Brand</a>
</nav>

<br><!-- As a heading -->
<nav class="navbar navbar-dark bg-primary">
	<span class="navbar-brand mb-0 h1">Brand</span>
</nav>

<br><!-- With an image -->
<nav class="navbar navbar-dark bg-primary">
	<a class="navbar-brand" href="#">
		<img src="/solid/img/demo-logo.png" height="30" width="30" class="d-inline-block align-top">
		Brand
	</a>
</nav>

Nav

Navigational elements can be added to a navbar using .navbar-nav. It requires additional toggler classes for proper responsive styling, as shown below. Active states can be indicated using .active on .nav-links or .nav-items.


<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
	<a class="navbar-brand" href="#">Brand</a>
	<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar-2-collapse" aria-controls="navbar-2-collapse" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbar-2-collapse">
		<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="#" tabindex="-1" aria-disabled="true">Disabled</a>
			</li>
		</ul>
	</div>
</nav>

Alternatively, a list-based approach can be avoided entirely.


<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
	<a class="navbar-brand" href="#">Brand</a>
	<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar-3-collapse" aria-controls="navbar-3-collapse" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbar-3-collapse">
		<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="#" tabindex="-1" aria-disabled="true">Disabled</a>
		</div>
	</div>
</nav>

Dropdowns may be added, but require wrapping in .dropdown for positioning as shown below.


<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
	<a class="navbar-brand" href="#">Navbar</a>
	<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar-4-collapse" aria-controls="navbar-4-collapse" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbar-4-collapse">
		<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 dropdown">
				<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" 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>

Forms

Place various form controls and components within a navbar with .form-inline.

Note: immediate children elements in .navbar use flex layout and will default to justify-content: between. Use additional flex utilities as needed to adjust this behavior.


<nav class="navbar navbar-dark bg-primary">
	<a href="#" class="navbar-brand">Brand</a>
	<form class="form-inline">
		<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
		<button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
	</form>
</nav>

Input groups and buttons work, too:


<nav class="navbar navbar-dark bg-primary">
	<a href="#" class="navbar-brand">Brand</a>
	<form class="form-inline">
		<div class="input-group">
			<div class="input-group-prepend">
				<span class="input-group-text" id="basic-addon1">@</span>
			</div>
			<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
		</div>
	</form>
	<form class="form-inline">
		<button class="btn btn-success" type="button">Main button</button>
		<button class="btn btn-sm btn-secondary" type="button">Smaller button</button>
	</form>
</nav>

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.


<nav class="navbar navbar-dark bg-primary">
	<a href="#" class="navbar-brand">Brand</a>
	<span class="navbar-text">
		Navbar text with an inline element
	</span>
</nav>

Customizing navbars

Colors

Change the background color of a navbar using standard .bg-{color} classes, such as .bg-primary. Specify the color text and other elements should have using .navbar-light (dark text) or .navbar-dark (light text).

Alternatively, go with an opaque background by specifying .bg-opaque in order to overlay your navbar on an image.


<nav class="navbar navbar-expand-lg navbar-light bg-light">
	...
</nav>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
	...
</nav>

Containers

You can add a .container within a navbar to center its contents and limit the width of the container.


<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<div class="container">
		<a class="navbar-brand" href="#">Navbar</a>
		...
	</div>
</nav>

Centered brand

Create navbars with a centered brand while maintaining responsiveness using various utility classes such as automatic margins (.mx-auto) and flexbox orders (.order-0).


<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
	<div class="mx-auto order-0 order-lg-1 ml-lg-2">
		<a href="" class="navbar-brand mr-auto">Brand</a>
	</div>
	<button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target=".navbar-centered-collapse" aria-controls="navbarCenterBrandCollapse" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse navbar-centered-collapse order-lg-0 order-1" id="navbarCenterBrandCollapse">
		<ul class="navbar-nav ml-auto">
			<li class="nav-item active">
				<a class="nav-link" href="#about">Home</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">About us</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Products</a>
			</li>
		</ul>
	</div>
	<div class="collapse navbar-collapse navbar-centered-collapse order-lg-2 order-2" id="navbarCenterBrandCollapse2">
		<ul class="navbar-nav mr-auto">
			<li class="nav-item">
				<a class="nav-link" href="#">Team</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Download</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Contact</a>
			</li>
		</ul>
		<ul class="navbar-nav">
			<li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle" href="" id="navbarDropdown4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					<i class="fas fa-user"></i>
				</a>
				<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown43">
					<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>

Placement

Use position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements.

Also note that .sticky-top uses position: sticky, which isn’t fully supported in every browser.

Apply style on scroll

If you want your navbar to be transparent at the top, but receive a background and shadow when scrolling, apply the .navbar-scrollstyle class, together with your style modifiers such as .bg-primary and .shadow-sm. This style has a slightly increased vertical padding as to aid in creating an animation for “sticking” the navbar to the top, with the background and shadow quickly fading in.

When collapsed, the navbar remains transparent. When extended, the navbar gains its “scrolled” style, even when fully at the top, to ensure the visibility of navbar items.

This behaviour is activated through our custom JavaScript plugin.

If you want your navbar to be transparent at the top, but receive a background and shadow when opening, apply the .navbar-transparent class, together with your style modifiers such as .bg-primary and .shadow-sm.

When collapsed, the navbar remains transparent. When extended, the navbar gains its “opened” style to ensure the visibility of navbar items.

Responsive behavior

Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand-{breakpoint} 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-{breakpoint} class on the navbar. For navbars that always collapse, don’t add any .navbar-expand-{breakpoint} 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:


<nav class="navbar navbar-expand-xs navbar-dark bg-primary">
	<button class="navbar-toggler collapsed" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
			</li>
		</ul>
	</div>
</nav>

With a brand name shown on the left and toggler on the right:


<nav class="navbar navbar-expand-xs navbar-dark bg-primary">
	<a class="navbar-brand" href="#">Navbar</a>
	<button class="navbar-toggler collapsed" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
			</li>
		</ul>
	</div>
</nav>

With a toggler on the left and brand name on the right:


<nav class="navbar navbar-expand-xs navbar-dark bg-primary">
	<button class="navbar-toggler collapsed" 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>
	<a class="navbar-brand" href="#">Navbar</a>
	<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="#" tabindex="-1" aria-disabled="true">Disabled</a>
			</li>
		</ul>
	</div>
</nav>

Modals Navs