How to use it?
1. Download MDB 5 - free UI KIT
2. Create the Navbar you like
3. Copy the generated code and paste it into the MDB project
LEGACY
Generate 150+ examples of navbars for the latest Bootstrap 5 & download them for free.
<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-light navbar-light">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Navbar brand -->
<a class="navbar-brand" href="#">Brand</a>
<!-- Toggle button -->
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
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" href="#">Link</a></li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</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>
<!-- Icons -->
<ul class="navbar-nav d-flex flex-row me-1">
<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>
</ul>
<!-- Search -->
<form class="w-auto">
<input
type="search"
class="form-control"
placeholder="Type query"
aria-label="Search"
/>
</form>
</div>
</div>
<!-- Container wrapper -->
</nav>
<!-- Navbar -->
How to use it?
1. Download MDB 5 - free UI KIT
2. Create the Navbar you like
3. Copy the generated code and paste it into the MDB project
MDB5 is frequently updated, you will find the most recent documentation for the latest MDB5 release on our main website. On this domain, you will find legacy documentation for older versions of MDB5 - we do not provide support for these versions, unless you have an active subscription.
We recommend activating your MDB5 PRO subscription. What will you get?
Log in to your account or purchase an MDB5 PRO subscription if you don't have one.
Login Buy MDB Pro