Dropdown with notification
Bootstrap 5 Dropdown with notification component
Responsive Dropdown with notification built with Bootstrap 5. An example of bootstrap notification dropdown. Easy to implement and customize.
Basic example
Use dropdown,
if you want to change it into an icon, change the button element to a, remove the btn btn-primary class and add the hidden-arrow class.
Then replace text with icon and add notification.
<div class="dropdown">
<a data-mdb-dropdown-init class="me-3 dropdown-toggle hidden-arrow" href="#" id="navbarDropdownMenuLink"
role="button" data-mdb-toggle="dropdown" aria-expanded="false">
<i class="fas fa-bell"></i>
<span class="badge rounded-pill badge-notification bg-danger">1</span>
</a>
<ul class="dropdown-menu" 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>
<!-- 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>
<!-- 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="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>
<!-- Container wrapper -->
</nav>
<!-- Navbar -->