Navbar with icons
Bootstrap 5 Navbar with icons component
Responsive Navbar with icons built with Bootstrap 5. Various examples of navbar with icons, dropdown icons, icons with text and icons with notifications.
Basic examples
Choose from hundreds of our icons and simply add them to the navbar.
Note: We add .d-flex .flex-row classes to keep the icons inline when the navbar is collapsed. Without this, they will stack one under another.
<nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary">
<div class="container-fluid">
<ul class="navbar-nav d-flex flex-row">
<!-- Icons -->
<li class="nav-item me-3 me-lg-0">
<a class="nav-link" href="#">
<i class="fas fa-shopping-cart"></i>
</a>
</li>
<li class="nav-item me-3 me-lg-0">
<a class="nav-link" href="#">
<i class="fab fa-twitter"></i>
</a>
</li>
<!-- Icon dropdown -->
<li class="nav-item me-3 me-lg-0 dropdown">
<a data-mdb-dropdown-init class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li><hr class="dropdown-divider" /></li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-success navbar-dark">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Navbar brand -->
<a class="navbar-brand" href="#">Brand</a>
<!-- Toggle button -->
<button data-mdb-button-init class="navbar-toggler" type="button" data-mdb-collapse-init aria-label="Toggle navigation"
aria-controls="navbarSupportedContent" aria-expanded="false" data-mdb-target="#navbarSupportedContent">
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!-- Link -->
<li class="nav-item">
<a class="nav-link text-white" href="#">Link</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a data-mdb-dropdown-init class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<!-- Dropdown menu -->
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<hr class="dropdown-divider" />
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
</ul>
<!-- Icons -->
<ul class="navbar-nav d-flex flex-row me-1">
<li class="nav-item me-3 me-lg-0">
<a class="nav-link text-white" href="#"><i class="fas fa-shopping-cart"></i></a>
</li>
<li class="nav-item me-3 me-lg-0">
<a class="nav-link text-white" href="#"><i class="fab fa-twitter"></i></a>
</li>
</ul>
</div>
</div>
<!-- Container wrapper -->
</nav>
<!-- Navbar -->
<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-info navbar-dark">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Navbar brand -->
<a class="navbar-brand" href="#">Brand</a>
<!-- Icons -->
<ul class="navbar-nav d-flex flex-row me-1">
<li class="nav-item me-3 me-lg-0">
<a class="nav-link text-white" href="#"><i class="fas fa-envelope mx-1"></i> Contact</a>
</li>
<li class="nav-item me-3 me-lg-0">
<a class="nav-link text-white" href="#"><i class="fas fa-cog mx-1"></i> Settings</a>
</li>
<li class="nav-item dropdown">
<a data-mdb-dropdown-init class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button"
data-mdb-toggle="dropdown" aria-expanded="false"> <i class="fas fa-user mx-1"></i> Profile </a>
<!-- Dropdown menu -->
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li>
<a class="dropdown-item" href="#">My account</a>
</li>
<li>
<a class="dropdown-item" href="#">Log out</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- Container wrapper -->
</nav>
<!-- Navbar -->
<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Navbar brand -->
<a class="navbar-brand" href="#">Brand</a>
<!-- Toggle button -->
<button data-mdb-button-init class="navbar-toggler" type="button" data-mdb-collapse-init data-mdb-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!-- Link -->
<li class="nav-item">
<a class="nav-link text-white" href="#">Link</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a data-mdb-dropdown-init class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<!-- Dropdown menu -->
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<hr class="dropdown-divider" />
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
</ul>
<!-- Icons -->
<!-- Notifications -->
<ul class="navbar-nav d-flex flex-row me-1">
<li class="nav-item me-3 me-lg-0">
<div class="dropdown">
<a data-mdb-dropdown-init class="link-white me-3 dropdown-toggle hidden-arrow" href="#" id="navbarDropdownMenuLink" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
<i class="fas fa-bell text-white"></i>
<span class="badge rounded-pill badge-notification bg-danger">1</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
<li>
<a class="dropdown-item" href="#">Some news</a>
</li>
<li>
<a class="dropdown-item" href="#">Another news</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<!-- Container wrapper -->
</nav>
<!-- Navbar -->
<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-danger navbar-dark">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button data-mdb-button-init class="navbar-toggler" type="button" data-mdb-collapse-init aria-label="Toggle navigation"
aria-controls="navbarSupportedContent" aria-expanded="false" data-mdb-target="#navbarSupportedContent" >
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
<!-- Icons -->
<ul class="navbar-nav d-flex flex-row me-1">
<li class="nav-item me-3 me-lg-0">
<a class="nav-link mx-1 text-white" href="#"><i class="fas fa-print"></i></a>
</li>
<li class="nav-item me-3 me-lg-0">
<a class="nav-link mx-1 text-white" href="#"><i class="far fa-clock"></i></a>
</li>
<li class="nav-item me-3 me-lg-0">
<a class="nav-link mx-1 text-white" href="#"><i class="fas fa-image"></i></a>
</li>
<li class="nav-item me-3 me-lg-0">
<a class="nav-link mx-1 text-white" href="#"><i class="fab fa-google-plus-g"></i></a>
</li>
<li class="nav-item me-3 me-lg-0">
<a class="nav-link mx-1 text-white" href="#"><i class="far fa-calendar-alt"></i></a>
</li>
<li class="nav-item me-3 me-lg-0">
<a class="nav-link mx-1 text-white" href="#"><i class="fas fa-align-justify"></i></a>
</li>
<li class="nav-item me-3 me-lg-0">
<a class="nav-link mx-1 text-white" href="#"><i class="fas fa-download"></i></a>
</li>
<li class="nav-item me-3 me-lg-0">
<a class="nav-link mx-1 text-white" href="#"><i class="fas fa-edit"></i></a>
</li>
</ul>
</div>
</div>
<!-- Container wrapper -->
</nav>
<!-- Navbar -->