Navbar

Product navbars contain buttons that launch panels. Panels slide out from the left and right of the browser window's edge.
The menu toggle button morphs between two icons to reflect the state of the main menu. Scroll up and try it out on the menu at the top of this page.

By Default, navbars scroll with the content of the page. To make them stick to the top of the browser window use .navbar-fixed-top.

accessibility View Accessibility Notes

*** Revised navbar markup TBD to reflect new gradual collasible navigation for mobile. ***

Navs

Use tablist functionality provided by Bootstrap to create navs. A collection of .tab-pane divs are shown/hidden by navigational links with corresponding href targets and data-toggle attributes. All .tab-pane elements must be inside a .tab-content container.

If you need to utilize the .active class, please note Bootstrap applies it to the .nav-link element.

To make tabs fade show on show/hide, add .fade to each .tab-pane. The first tab pane must also have .show to make the initial content visible.

accessibility View Accessibility Notes

Bare-Bones Nav

• Item One
• Item Two
• Item Three
• Item Four

<!-- Nav -->
<ul class="nav nav-inline" role="tablist">
<li class="nav-item" role="presentation">
	<a class="nav-link active" href="#REPLACE ME" id="REPLACE ME" role="tab" data-toggle="tab" aria-controls="REPLACE ME" tabindex="0" aria-selected="true">
		Item One
	</a>
</li>
<li class="nav-item" role="presentation">
	<a class="nav-link" href="#REPLACE ME" id="REPLACE ME" role="tab" data-toggle="tab" aria-controls="REPLACE ME" tabindex="-1" aria-selected="false">
		Item Two
	</a>
</li>
<li class="nav-item" role="presentation">
	<a class="nav-link" href="#REPLACE ME" id="REPLACE ME" role="tab" data-toggle="tab" aria-controls="REPLACE ME" tabindex="-1" aria-selected="false">
		Item Three
	</a>
</li>
<li class="nav-item" role="presentation">
	<a class="nav-link" href="#REPLACE ME" id="REPLACE ME" role="tab" data-toggle="tab" aria-controls="REPLACE ME" tabindex="-1" aria-selected="false">
		Item Four
	</a>
</li>
</ul>

<!-- Panels -->
<div class="tab-content" tabindex="0">
<div role="tabpanel" class="tab-pane fade show active" id="REPLACE ME" aria-labelledby="REPLACE ME"><h1 class="text-xs-center" aria-hidden="true"><i class="material-icons">stay_current_portrait</i></h1><h4 class="text-xs-center"><br>Hello, I'm the content for Item One</h4><p class="text-xs-center">Content goes here, and more content can go in the following panes.</p></div>
<div role="tabpanel" class="tab-pane fade" id="REPLACE ME" aria-labelledby="REPLACE ME"><h1 class="text-xs-center" aria-hidden="true"><i class="material-icons">phonelink_ring</i></h1><h4 class="text-xs-center"><br>Fading Tab Pane Two...</h4><p class="text-xs-center">Content for the second Tab Panel goes here, and more content can go in the following panes.</p></div>
<div role="tabpanel" class="tab-pane fade" id="REPLACE ME" aria-labelledby="REPLACE ME"><h1 class="text-xs-center" aria-hidden="true"><i class="material-icons">phonelink_setup</i></h1><h4 class="text-xs-center"><br>Fading Tab Pane Three...</h4><p class="text-xs-center">Content a Third Panel goes here, and more content can go in the following panes.</p></div>
<div role="tabpanel" class="tab-pane fade" id="REPLACE ME" aria-labelledby="REPLACE ME"><h1 class="text-xs-center" aria-hidden="true"><i class="material-icons">location_on</i></h1><h4 class="text-xs-center"><br>Fading Tab Pane Four...</h4><p class="text-xs-center">Content for the Last Panel goes here, and more content can go in the following panes.</p></div>
</div>

Nav Tabs

Nav Tabs look similar to Nav Bars. Add the .nav-justified to stretch the tab options across.

<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="nav-item" role="presentation">
	<a class="nav-link active" href="#REPLACE ME" id="REPLACE ME" role="tab" data-toggle="tab" aria-controls="REPLACE ME" tabindex="0" aria-selected="true">
		Item One
	</a>
</li>
<li class="nav-item" role="presentation">
	<a class="nav-link" href="#REPLACE ME" id="REPLACE ME" role="tab" data-toggle="tab" aria-controls="REPLACE ME" tabindex="-1" aria-selected="false">
		Item Two
	</a>
</li>
<li class="nav-item" role="presentation">
	<a class="nav-link" href="#REPLACE ME" id="REPLACE ME" role="tab" data-toggle="tab" aria-controls="REPLACE ME" tabindex="-1" aria-selected="false">
		Item Three
	</a>
</li>
<li class="nav-item" role="presentation">
	<a class="nav-link" href="#REPLACE ME" id="REPLACE ME" role="tab" data-toggle="tab" aria-controls="REPLACE ME" tabindex="-1" aria-selected="false">
		Item Four
	</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" tabindex="0">
<div role="tabpanel" class="tab-pane fade show active" id="REPLACE ME" aria-labelledby="REPLACE ME"><h4><br>Hello, I'm the content for Item One</h4><p>Content goes here, and more content can go in the following panes.</p></div>
<div role="tabpanel" class="tab-pane fade" id="REPLACE ME" aria-labelledby="REPLACE ME"><h4><br>Two...</h4><p>Content goes here, and more content can go in the following panes.</p></div>
<div role="tabpanel" class="tab-pane fade" id="REPLACE ME" aria-labelledby="REPLACE ME"><h4><br>Three...</h4><p>Content goes here, and more content can go in the following panes.</p></div>
<div role="tabpanel" class="tab-pane fade" id="REPLACE ME" aria-labelledby="REPLACE ME"><h4><br>Four...</h4><p>Content goes here, and more content can go in the following panes.</p></div>
</div>

Nav Pills

Nav Pills can be either subtle or attention grabbing, depending how you use them.

<ul class="nav nav-pills" role="tablist">
<li class="nav-item" role="presentation">
	<a class="nav-link active" href="#REPLACE ME" role="tab" data-toggle="tab" id="REPLACE ME" aria-controls="REPLACE ME" tabindex="0" aria-selected="true">
		Item One
	</a>
</li>
<li class="nav-item" role="presentation">
	<a class="nav-link" href="#REPLACE ME" role="tab" data-toggle="tab" id="REPLACE ME" aria-controls="REPLACE ME" tabindex="-1" aria-selected="false">
		Item Two
	</a>
</li>
<li class="nav-item" role="presentation">
	<a class="nav-link" href="#REPLACE ME" role="tab" data-toggle="tab" id="REPLACE ME" aria-controls="REPLACE ME" tabindex="-1" aria-selected="false">
		Item Three
	</a>
</li>
<li class="nav-item" role="presentation">
	<a class="nav-link" href="#REPLACE ME" role="tab" data-toggle="tab" id="REPLACE ME" aria-controls="REPLACE ME" tabindex="-1" aria-selected="false">
		Item Four
	</a>
</li>
</ul>
<!-- Pill panes -->
<div class="tab-content" tabindex="0">
<div role="tabpanel" class="tab-pane active" id="REPLACE ME" aria-labelledby="REPLACE ME"><h4><br>Hello, I'm the content for Item One</h4><p>Content goes here, and more content can go in the following panes.</p></div>
<div role="tabpanel" class="tab-pane" id="REPLACE ME" aria-labelledby="REPLACE ME"><h4><br>Two...</h4><p>Content goes here, and more content can go in the following panes.</p></div>
<div role="tabpanel" class="tab-pane" id="REPLACE ME" aria-labelledby="REPLACE ME"><h4><br>Three...</h4><p>Content goes here, and more content can go in the following panes.</p></div>
<div role="tabpanel" class="tab-pane" id="REPLACE ME" aria-labelledby="REPLACE ME"><h4><br>Four...</h4><p>Content goes here, and more content can go in the following panes.</p></div>
</div>

Rounded Nav

An alternative version of the nav using rounded edges. Harness the same tablist functionality used in the previous navs by applying it to any list of navigation and a collection of tab-pane elements.

The Rounded Nav takes any of the valid button styles defined in the Button Elements section.

<ul class="nav nav-rounded" role="tablist">
<li class="nav-item" role="presentation">
	<a class="nav-link btn btn-primary-outline active" href="#REPLACE ME" id="REPLACE ME" role="tab" data-toggle="tab" aria-controls="REPLACE ME" tabindex="0" aria-selected="true">
		Item One
	</a>
</li>
<li class="nav-item" role="presentation">
	<a class="nav-link btn btn-primary-outline" href="#REPLACE ME" id="REPLACE ME" role="tab" data-toggle="tab" aria-controls="REPLACE ME" tabindex="-1" aria-selected="false">
		Item Two
	</a>
</li>
</ul>

<!-- Panels -->
<div class="tab-content" tabindex="0">
<div role="tabpanel" class="tab-pane fade show active" id="REPLACE ME" aria-labelledby="REPLACE ME"><h1 class="text-xs-center" aria-hidden="true"><i class="material-icons">stay_current_portrait</i></h1><h4 class="text-xs-center"><br>Hello, I'm the content for Item One</h4><p class="text-xs-center">Content goes here, and more content can go in the following panes.</p></div>
<div role="tabpanel" class="tab-pane fade" id="REPLACE ME" aria-labelledby="REPLACE ME"><h1 class="text-xs-center" aria-hidden="true"><i class="material-icons">phonelink_ring</i></h1><h4 class="text-xs-center"><br>Fading Tab Pane Two...</h4><p class="text-xs-center">Content for the second Tab Panel goes here, and more content can go in the following panes.</p></div>
</div>

<ul class="nav nav-rounded nav-justified" role="tablist">
<li class="nav-item" role="presentation">
	<a class="nav-link btn btn-secondary btn-raised active" href="#REPLACE ME" id="REPLACE ME" role="tab" data-toggle="tab" aria-controls="REPLACE ME" tabindex="0" aria-selected="true">
		Item One
	</a>
</li>
<li class="nav-item" role="presentation">
	<a class="nav-link btn btn-secondary btn-raised" href="#REPLACE ME" id="REPLACE ME" role="tab" data-toggle="tab" aria-controls="REPLACE ME" tabindex="-1" aria-selected="false">
		Item Two
	</a>
</li>
<li class="nav-item" role="presentation">
	<a class="nav-link btn btn-secondary btn-raised" href="#REPLACE ME" id="REPLACE ME" role="tab" data-toggle="tab" aria-controls="REPLACE ME" tabindex="-1" aria-selected="false">
		Item Three
	</a>
</li>
<li class="nav-item" role="presentation">
	<a class="nav-link btn btn-secondary btn-raised" href="#REPLACE ME" id="REPLACE ME" role="tab" data-toggle="tab" aria-controls="REPLACE ME" tabindex="-1" aria-selected="false">
		Item Four
	</a>
</li>
</ul>

<!-- Panels -->
<div class="tab-content" tabindex="0">
<div role="tabpanel" class="tab-pane fade show active" id="REPLACE ME" aria-labelledby="REPLACE ME"><h1 class="text-xs-center" aria-hidden="true"><i class="material-icons">stay_current_portrait</i></h1><h4 class="text-xs-center"><br>Hello, I'm the content for Item One</h4><p class="text-xs-center">Content goes here, and more content can go in the following panes.</p></div>
<div role="tabpanel" class="tab-pane fade" id="REPLACE ME" aria-labelledby="REPLACE ME"><h1 class="text-xs-center" aria-hidden="true"><i class="material-icons">phonelink_ring</i></h1><h4 class="text-xs-center"><br>Fading Tab Pane Two...</h4><p class="text-xs-center">Content for the second Tab Panel goes here, and more content can go in the following panes.</p></div>
<div role="tabpanel" class="tab-pane fade" id="REPLACE ME" aria-labelledby="REPLACE ME"><h1 class="text-xs-center" aria-hidden="true"><i class="material-icons">phonelink_setup</i></h1><h4 class="text-xs-center"><br>Fading Tab Pane Three...</h4><p class="text-xs-center">Content a Third Panel goes here, and more content can go in the following panes.</p></div>
<div role="tabpanel" class="tab-pane fade" id="REPLACE ME" aria-labelledby="REPLACE ME"><h1 class="text-xs-center" aria-hidden="true"><i class="material-icons">location_on</i></h1><h4 class="text-xs-center"><br>Fading Tab Pane Four...</h4><p class="text-xs-center">Content for the Last Panel goes here, and more content can go in the following panes.</p></div>
</div>

Pagination

For more information on adding disabled states or sizing, please read the Bootstrap Documentation.

accessibility View Accessibility Notes

• <
• 1
• 2
• 3
• 4
• 5
• >

<ul class="pagination" role="menu" aria-label="Pagination">
<li class="page-item"><a class="page-link" href="#" aria-label="REPLACE ME"><</a></li>
<li class="page-item active"><a class="page-link" href="#" aria-label="REPLACE ME">1</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="REPLACE ME">2</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="REPLACE ME">3</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="REPLACE ME">4</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="REPLACE ME">5</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="REPLACE ME">></a></li>
</ul>

Breadcrumbs, Container

Pages that are a level or more deep from a list page (typically a table of items)

					<div class="container back-link-container">
						  <div class="row">
							    <a href="?page=deals" class="back-link"><i class="material-icons" aria-hidden="true">arrow_back</i> Previous Page Name</a>
						  </div>
					</div>
				

Breadcrumbs, Container Fluid

Same thing but for pages that have the container-fluid

					<div class="container back-link-container pt-4">
						  <div class="row">
							    <a href="?page=deals" class="back-link"><i class="material-icons" aria-hidden="true">arrow_back</i> Previous Page Name</a>
							    <span>/</span>
							    <a href="?page=reconcile-list" class="back-link">Previous Page Name</a>
						  </div>
					</div>