Documentation and examples for how to use Bootstrap’s included navigation components. document
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>