Nav

Documentation and examples for how to use Bootstrap’s included navigation components. document

Base Nav

Use base .nav class for building all types of navigation components. For light & Dark backgrounds use .nav-light, .nav-dark modifier classes. For alignments and vertical navigation please check official documentation.

														
<ul class="nav">
	<li class="nav-item">
		<a href="#" class="nav-link active">Active</a>
	</li>
	<li class="nav-item dropdown">
		<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
		<div class="dropdown-menu">
			<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 class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link">Link</a>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link disabled">Disabled</a>
	</li>
</ul>
													
Nav light

Use the .nav-light class with nav.

														
<ul class="nav nav-light">
	<li class="nav-item">
		<a href="#" class="nav-link active">Active</a>
	</li>
	<li class="nav-item dropdown">
		<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
		<div class="dropdown-menu">
			<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 class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link">Link</a>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link disabled">Disabled</a>
	</li>
</ul>
													
Nav dark

Use the .nav-dark class with nav.

														
<ul class="nav nav-dark bg-dark p-2">
	<li class="nav-item">
		<a href="#" class="nav-link active">Active</a>
	</li>
	<li class="nav-item dropdown">
		<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
		<div class="dropdown-menu">
			<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 class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link">Link</a>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link disabled">Disabled</a>
	</li>
</ul>
													
Horizontal alignment

Change the horizontal alignment of your nav with flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned. Centered with .justify-content-center,.justify-content-end

														
<ul class="nav nav-light justify-content-center">
	<li class="nav-item">
		<a href="#" class="nav-link active">Active</a>
	</li>
	<li class="nav-item dropdown">
		<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
		<div class="dropdown-menu">
			<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 class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link">Link</a>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link disabled">Disabled</a>
	</li>
</ul>
<div class="separator separator-light"></div>
<ul class="nav nav-light justify-content-end">
	<li class="nav-item">
		<a href="#" class="nav-link active">Active</a>
	</li>
	<li class="nav-item dropdown">
		<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
		<div class="dropdown-menu">
			<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 class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link">Link</a>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link disabled">Disabled</a>
	</li>
</ul>
													
Nav with icon

Use .nav-icon class with nav.

														
<ul class="nav nav-icon nav-light">
	<li class="nav-item">
		<a href="#" class="nav-link active">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="check-circle"></i></span></span>
			<span class="nav-link-text">Active</span>
		</a>
	</li>
	<li class="nav-item dropdown">
		<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="file-text"></i></span></span>
			<span class="nav-link-text">Dropdown</span>
		</a>
		<div class="dropdown-menu">
			<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 class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="map"></i></span></span>
			<span class="nav-link-text">Link</span>
		</a>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link disabled">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="package"></i></span></span>
			<span class="nav-link-text">Disabled</span>
		</a>
	</li>
</ul>
													
Nav with icon top

Use .nav-icon .nav-icon-top class with nav.

														
<ul class="nav nav-icon nav-icon-top nav-light">
	<li class="nav-item">
		<a href="#" class="nav-link active">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="check-circle"></i></span></span>
			<span class="nav-link-text">Active</span>
		</a>
	</li>
	<li class="nav-item dropdown">
		<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="file-text"></i></span></span>
			<span class="nav-link-text">Dropdown</span>
		</a>
		<div class="dropdown-menu">
			<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 class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="map"></i></span></span>
			<span class="nav-link-text">Link</span>
		</a>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link disabled">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="package"></i></span></span>
			<span class="nav-link-text">Disabled</span>
		</a>
	</li>
</ul>
													
Nav pills

Use .nav-pills class with nav and .nav-pills-rounded,.nav-pills-square for shape of pills.

														
<ul class="nav nav-pills nav-light  mb-5">
	<li class="nav-item">
		<a href="#" class="nav-link active">Active</a>
	</li>
	<li class="nav-item dropdown">
		<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
		<div class="dropdown-menu">
			<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 class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link">Link</a>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link disabled">Disabled</a>
	</li>
</ul>
<div class="title"><span>Pills rounded</span></div>
<ul class="nav nav-pills nav-pills-rounded nav-light  mb-5">
	<li class="nav-item">
		<a href="#" class="nav-link active">Active</a>
	</li>
	<li class="nav-item dropdown">
		<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
		<div class="dropdown-menu">
			<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 class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link">Link</a>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link disabled">Disabled</a>
	</li>
</ul>
<div class="title"><span>Pills square</span></div>
<ul class="nav nav-pills nav-pills-square nav-light">
	<li class="nav-item">
		<a href="#" class="nav-link active">Active</a>
	</li>
	<li class="nav-item dropdown">
		<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
		<div class="dropdown-menu">
			<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 class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link">Link</a>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link disabled">Disabled</a>
	</li>
</ul>
													
Nav pills icon

Use .nav-icon class with .nav-pills.

														
<ul class="nav nav-icon nav-pills  nav-light">
	<li class="nav-item">
		<a href="#" class="nav-link active">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="check-circle"></i></span></span>
			<span class="nav-link-text">Active</span>
		</a>
	</li>
	<li class="nav-item dropdown">
		<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="file-text"></i></span></span>
			<span class="nav-link-text">Dropdown</span>
		</a>
		<div class="dropdown-menu">
			<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 class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="map"></i></span></span>
			<span class="nav-link-text">Link</span>
		</a>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link disabled">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="package"></i></span></span>
			<span class="nav-link-text">Disabled</span>
		</a>
	</li>
</ul>
													
Nav pills icon top

Use .nav-icon .nav-icon-top class with nav.

														
<ul class="nav nav-icon nav-icon-top nav-pills nav-light">
	<li class="nav-item">
		<a href="#" class="nav-link active">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="check-circle"></i></span></span>
			<span class="nav-link-text">Active</span>
		</a>
	</li>
	<li class="nav-item dropdown">
		<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="file-text"></i></span></span>
			<span class="nav-link-text">Dropdown</span>
		</a>
		<div class="dropdown-menu">
			<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 class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="map"></i></span></span>
			<span class="nav-link-text">Link</span>
		</a>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link disabled">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="package"></i></span></span>
			<span class="nav-link-text">Disabled</span>
		</a>
	</li>
</ul>
													
Nav pills soft

Use .nav-pills-soft class with nav.

														
<ul class="nav nav-pills nav-icon nav-pills-soft nav-light">
	<li class="nav-item">
		<a href="#" class="nav-link active">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="check-circle"></i></span></span>
			<span class="nav-link-text">Active</span>
		</a>
	</li>
	<li class="nav-item dropdown">
		<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="file-text"></i></span></span>
			<span class="nav-link-text">Dropdown</span>
		</a>
		<div class="dropdown-menu">
			<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 class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="map"></i></span></span>
			<span class="nav-link-text">Link</span>
		</a>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link disabled">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="package"></i></span></span>
			<span class="nav-link-text">Disabled</span>
		</a>
	</li>
</ul>
													
Nav line

Use .nav-line class with nav.

														
<ul class="nav nav-line nav-light">
	<li class="nav-item">
		<a href="#" class="nav-link active">Active</a>
	</li>
	<li class="nav-item dropdown">
		<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
		<div class="dropdown-menu">
			<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 class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link">Link</a>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link disabled">Disabled</a>
	</li>
</ul>
													
Vertical

Stack your navigation by changing the flex item direction with the .flex-column utility or add .nav-vertical class. Need to stack them on some viewports but not others? Use the responsive versions (e.g., .flex-sm-column).

														
<ul class="nav nav-vertical nav-light">
	<li class="nav-item">
		<a href="#" class="nav-link active">Active</a>
	</li>
	<li class="nav-item dropdown">
		<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
		<div class="dropdown-menu">
			<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 class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link">Link</a>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link disabled">Disabled</a>
	</li>
</ul>
													
Vertical nav pills

Add .nav-vertical class with .nav-pills.

														
<ul class="nav nav-vertical nav-pills nav-lig">
	<li class="nav-item">
		<a href="#" class="nav-link active">Active</a>
	</li>
	<li class="nav-item dropdown">
		<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
		<div class="dropdown-menu">
			<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 class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link">Link</a>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link disabled">Disabled</a>
	</li>
</ul>
													
Vertical nav line

Add .nav-vertical class with .nav-line.

														
<ul class="nav nav nav-line nav-vertical nav-light">
	<li class="nav-item">
		<a href="#" class="nav-link active">Active</a>
	</li>
	<li class="nav-item dropdown">
		<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
		<div class="dropdown-menu">
			<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 class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link">Link</a>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link disabled">Disabled</a>
	</li>
</ul>
													
Vertical nav with icon

Add .nav-vertical class with .nav-pills.

														
<ul class="nav nav-icon nav-vertical nav-light">
	<li class="nav-item">
		<a href="#" class="nav-link active">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="check-circle"></i></span></span>
			<span class="nav-link-text">Active</span>
		</a>
	</li>
	<li class="nav-item dropdown">
		<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="file-text"></i></span></span>
			<span class="nav-link-text">Dropdown</span>
		</a>
		<div class="dropdown-menu">
			<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 class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="map"></i></span></span>
			<span class="nav-link-text">Link</span>
		</a>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link disabled">
			<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="package"></i></span></span>
			<span class="nav-link-text">Disabled</span>
		</a>
	</li>
</ul>