Dropdowns
Single Button Dropdown
Use btn class at to create a dropdown
toggle with <button> element.
<!-- Single Button Dropdown --> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <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> </div><div class="dropdown"> <a href="#" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown link </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> </div>
Dropdown Color Variant
Use btn- class with below mentioned variation to color dropdown toggle.
<!-- Dropdown Variant --> <div class="btn-group material-shadow"> <button type="button" class="btn btn-primary dropdown-toggle material-shadow-none" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button> <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> </div><!-- /btn-group --><div class="btn-group material-shadow"> <button type="button" class="btn btn-success dropdown-toggle material-shadow-none" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button> <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> </div><!-- /btn-group --><div class="btn-group material-shadow"> <button type="button" class="btn btn-light dropdown-toggle material-shadow-none" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Light</button> <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> </div><!-- /btn-group --><div class="btn-group material-shadow"> <button type="button" class="btn btn-info dropdown-toggle material-shadow-none" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button> <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> </div><!-- /btn-group --><div class="btn-group material-shadow"> <button type="button" class="btn btn-secondary dropdown-toggle material-shadow-none" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button> <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> </div><!-- /btn-group --><div class="btn-group material-shadow"> <button type="button" class="btn btn-warning dropdown-toggle material-shadow-none" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button> <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> </div><!-- /btn-group --><div class="btn-group material-shadow"> <button type="button" class="btn btn-danger dropdown-toggle material-shadow-none" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button> <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> </div><!-- /btn-group --><div class="btn-group material-shadow"> <button type="button" class="btn btn-dark dropdown-toggle material-shadow-none" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dark</button> <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> </div><!-- /btn-group -->
Split Button Dropdown
Use dropdown-toggle-split to create split button dropdowns as a single button dropdown.
<!-- Split Button Dropdown --> <div class="btn-group material-shadow"> <button type="button" class="btn btn-primary material-shadow-none">Primary</button> <button type="button" class="btn btn-primary material-shadow-none dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <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> </div><!-- /btn-group --><div class="btn-group material-shadow"> <button type="button" class="btn btn-success material-shadow-none">Success</button> <button type="button" class="btn btn-success material-shadow-none dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <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> </div><!-- /btn-group --><div class="btn-group material-shadow"> <button type="button" class="btn btn-light material-shadow-none">Light</button> <button type="button" class="btn btn-light material-shadow-none dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <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> </div><!-- /btn-group --><div class="btn-group material-shadow"> <button type="button" class="btn btn-info material-shadow-none">Info</button> <button type="button" class="btn btn-info material-shadow-none dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <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> </div><!-- /btn-group --><div class="btn-group material-shadow"> <button type="button" class="btn btn-secondary material-shadow-none">Secondary</button> <button type="button" class="btn btn-secondary material-shadow-none dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <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> </div><!-- /btn-group --><div class="btn-group material-shadow"> <button type="button" class="btn btn-warning material-shadow-none">Warning</button> <button type="button" class="btn btn-warning material-shadow-none dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <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> </div><!-- /btn-group --><div class="btn-group material-shadow"> <button type="button" class="btn btn-danger material-shadow-none">Danger</button> <button type="button" class="btn btn-danger material-shadow-none dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <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> </div><!-- /btn-group --><div class="btn-group material-shadow"> <button type="button" class="btn btn-dark material-shadow-none">Dark</button> <button type="button" class="btn btn-dark material-shadow-none dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <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> </div><!-- /btn-group -->
Dropdown Sizing
Use btn-lg class to create a large size dropdown
button and btn-sm to create a small size dropdown button.
<!-- Dropdown Sizing --> <div class="btn-group material-shadow"> <button class="btn btn-primary btn-lg dropdown-toggle material-shadow-none" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Large button </button> <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> </div><div class="btn-group material-shadow"> <button class="btn btn-light btn-lg material-shadow-none" type="button"> Large split button </button> <button type="button" class="btn btn-lg btn-light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> </button> <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> </div><div class="btn-group material-shadow"> <button class="btn btn-primary btn-sm dropdown-toggle material-shadow-none" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Small button </button> <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> </div><div class="btn-group material-shadow"> <button class="btn btn-light btn-sm material-shadow-none" type="button"> Small split button </button> <button type="button" class="btn btn-sm btn-light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> </button> <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> </div>
Dark Dropdowns
Use dropdown-menu-dark class onto an existing dropdown-menu to create dropdown items dark.
<!-- Dark Dropdowns -->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown"
aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
Alignment options
Dropdown demo with various dropdown alignment options.
<!-- Alignment options --> <div class="btn-group"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> </ul> </div><div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Right-aligned menu </button> <ul class="dropdown-menu dropdown-menu-end"> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> </ul> </div><div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Left-aligned, right-aligned lg </button> <ul class="dropdown-menu dropdown-menu-lg-end"> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> </ul> </div><div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Right-aligned, left-aligned lg </button> <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start"> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> </ul> </div><div class="btn-group dropstart"> <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropstart </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> </ul> </div><div class="btn-group dropend"> <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropend </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> </ul> </div><div class="btn-group dropup"> <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropup </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> </ul> </div>
Dropdown Options
Use data-bs-offset or
data-bs-reference to change the position of the dropdown.
<!-- Dropdown Options --> <div class="dropdown"> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20"> Offset </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div><div class="btn-group"> <button type="button" class="btn btn-secondary">Reference</button> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#">Separated link</a></li> </ul> </div>
Auto Close Behavior
By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the autoClose option to change this behavior of the dropdown.
<!-- Default dropdown --> <div class="btn-group"> <button class="btn btn-light dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false"> Default dropdown </button> <ul class="dropdown-menu" aria-labelledby="defaultDropdown"> <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li> <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li> <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li> </ul> </div><!-- Clickable outside dropdown --> <div class="btn-group"> <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false"> Clickable outside </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside"> <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li> <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li> <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li> </ul> </div><!-- Clickable inside dropdown --> <div class="btn-group"> <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"> Clickable inside </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside"> <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li> <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li> <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li> </ul> </div><!-- Clickable inside dropdown --> <div class="btn-group"> <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false"> Manual close </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable"> <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li> <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li> <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li> </ul> </div>
Dropdown Menu Item Color
Example of dropdown menu and dropdown item color.
Dropdown Menu Success link example
Dropdown Menu link Color example
Dropdown menu Primary link
Dropdown menu Secondary link
Dropdown menu Success link
Dropdown menu Warning link
Dropdown menu Info link
Dropdown menu Danger link
<!-- Dropdown Menu Item Color --> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Primary</button> <div class="dropdown-menu dropdownmenu-primary"> <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> </div><!-- btn-group --><div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Secondary</button> <div class="dropdown-menu dropdownmenu-secondary"> <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> </div><!-- btn-group --><div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Success</button> <div class="dropdown-menu dropdownmenu-success"> <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> </div><!-- btn-group --><div class="btn-group"> <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Warning</button> <div class="dropdown-menu dropdownmenu-warning"> <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> </div><!-- btn-group --><div class="btn-group"> <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Info</button> <div class="dropdown-menu dropdownmenu-info"> <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> </div><!-- btn-group --><div class="btn-group"> <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Danger</button> <div class="dropdown-menu dropdownmenu-danger"> <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> </div><!-- btn-group -->
Menu Content
Example of dropdown menu containing
Headers, Text and Forms content.
<!-- Menu Content --> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Header </button> <div class="dropdown-menu"> <div class="dropdown-header noti-title"> <h5 class="font-size-13 text-muted text-truncate mn-0">Welcome Jessie!</h5> </div> <!-- item--> <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> </div><!-- text Content --> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Text </button> <div class="dropdown-menu dropdown-menu-md p-3"> <p> Some example text that's free-flowing within the dropdown menu. </p> <p class="mb-0"> And this is more example text. </p> </div> </div><!-- Forms Content --> <div class="btn-group"> <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Forms </button> <div class="dropdown-menu dropdown-menu-md p-4"> <form> <div class="mb-2"> <label class="form-label" for="exampleDropdownFormEmail">Email address</label> <input type="email" class="form-control" id="exampleDropdownFormEmail" placeholder="email@example.com"> </div> <div class="mb-2"> <label class="form-label" for="exampleDropdownFormPassword">Password</label> <input type="password" class="form-control" id="exampleDropdownFormPassword" placeholder="Password"> </div> <div class="mb-2"> <div class="form-check custom-checkbox"> <input type="checkbox" class="form-check-input" id="rememberdropdownCheck"> <label class="form-check-label" for="rememberdropdownCheck">Remember me</label> </div> </div> <button type="submit" class="btn btn-primary">Sign in</button> </form> </div> </div>
Notifications
Dropdown with notification containing multiple tabs.
Notifications
4 New
Your Elite author Graphic Optimization reward is ready!
Just 30 sec ago
You have received 20 new messages in the conversation
2 hrs ago
Hey! You have no any notifications
Notifications
4 New
Your Elite author Graphic Optimization reward is ready!
Just 30 sec ago
You have received 20 new messages in the conversation
2 hrs ago
Hey! You have no any notifications
Notifications
4 New
Your Elite author Graphic Optimization reward is ready!
Just 30 sec ago
You have received 20 new messages in the conversation
2 hrs ago
Hey! You have no any notifications
<!-- Notifications -->
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0 d-inline-block position-relative" aria-labelledby="page-header-notifications-dropdown" style="z-index: 1;">
<div class="dropdown-head bg-primary bg-pattern rounded-top">
<div class="p-3">
<div class="row align-items-center">
<div class="col">
<h6 class="m-0 fs-16 fw-semibold text-white"> Notifications </h6>
</div>
<div class="col-auto dropdown-tabs">
<span class="badge bg-light-subtle text-body fs-13" data-key="t-view-all"> 4 New</span>
</div>
</div>
</div>
<div class="px-2 pt-2">
<ul class="nav nav-tabs dropdown-tabs nav-tabs-custom" data-dropdown-tabs="true" id="notificationItemsTab" role="tablist">
<li class="nav-item waves-effect waves-light">
<a class="nav-link active" data-bs-toggle="tab" href="#all-noti-tab1" role="tab" aria-selected="true">
All (4)
</a>
</li>
<li class="nav-item waves-effect waves-light">
<a class="nav-link" data-bs-toggle="tab" href="#messages-tab1" role="tab" aria-selected="false">
Messages
</a>
</li>
<li class="nav-item waves-effect waves-light">
<a class="nav-link" data-bs-toggle="tab" href="#alerts-tab1" role="tab" aria-selected="false">
Alerts
</a>
</li>
</ul>
</div>
</div>
<div class="tab-content" id="notificationItemsTabContent">
<div class="tab-pane fade show active py-2 ps-2" id="all-noti-tab1" role="tabpanel" aria-labelledby="updates-tab">
<div data-simplebar style="max-height: 300px;" class="pe-2">
<a href="#!" class="text-reset notification-item d-block dropdown-item">
<div class="d-flex">
<div class="avatar-xs me-3">
<span class="avatar-title bg-info-subtle text-info rounded-circle fs-16">
<i class="bx bx-badge-check"></i>
</span>
</div>
<div class="flex-grow-1">
<h6 class="mt-0 mb-2 lh-base">Your <b>Elite</b> author Graphic Optimization <span class="text-secondary">reward</span> is ready!</h6>
<p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
<span><i class="mdi mdi-clock-outline"></i> Just 30 sec ago</span>
</p>
</div>
<div class="px-2 fs-16">
<input class="form-check-input" type="checkbox">
</div>
</div>
</a>
<a href="#!" class="text-reset notification-item d-block dropdown-item">
<div class="d-flex">
<img src="assets/images/users/avatar-2.jpg"
class="me-3 rounded-circle avatar-xs" alt="user-pic">
<div class="flex-grow-1">
<h6 class="mt-0 mb-1 fs-13 fw-semibold">Angela Bernier</h6>
<div class="fs-13 text-muted">
<p class="mb-1">Answered to your comment on the cash flow forecast's graph 🔔.</p>
</div>
<p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
<span><i class="mdi mdi-clock-outline"></i> 48 min ago</span>
</p>
</div>
<div class="px-2 fs-16">
<input class="form-check-input" type="checkbox">
</div>
</div>
</a>
<a href="#!" class="text-reset notification-item d-block dropdown-item">
<div class="d-flex">
<div class="avatar-xs me-3">
<span class="avatar-title bg-danger-subtle text-danger rounded-circle fs-16">
<i class='bx bx-message-square-dots' ></i>
</span>
</div>
<div class="flex-grow-1">
<h6 class="mt-0 mb-2 fs-13 lh-base">You have received <b class="text-success">20</b> new messages in the conversation</h6>
<p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
<span><i class="mdi mdi-clock-outline"></i> 2 hrs ago</span>
</p>
</div>
<div class="px-2 fs-16">
<input class="form-check-input" type="checkbox">
</div>
</div>
</a>
<a href="#!" class="text-reset notification-item d-block dropdown-item">
<div class="d-flex">
<img src="assets/images/users/avatar-8.jpg"
class="me-3 rounded-circle avatar-xs" alt="user-pic">
<div class="flex-grow-1">
<h6 class="mt-0 mb-1 fs-13 fw-semibold">Maureen Gibson</h6>
<div class="fs-13 text-muted">
<p class="mb-1">We talked about a project on linkedin.</p>
</div>
<p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
<span><i class="mdi mdi-clock-outline"></i> 4 hrs ago</span>
</p>
</div>
<div class="px-2 fs-16">
<input class="form-check-input" type="checkbox">
</div>
</div>
</a>
<div class="my-3 text-center">
<button type="button" class="btn btn-soft-success waves-effect waves-light">View All Notifications <i class="ri-arrow-right-line align-middle"></i></button>
</div>
</div>
</div>
<div class="tab-pane fade py-2 ps-2" id="messages-tab1" role="tabpanel" aria-labelledby="messages-tab">
<div data-simplebar style="max-height: 300px;" class="pe-2">
<a href="#!" class="text-reset notification-item d-block dropdown-item">
<div class="d-flex">
<img src="assets/images/users/avatar-3.jpg"
class="me-3 rounded-circle avatar-xs" alt="user-pic">
<div class="flex-grow-1">
<h6 class="mt-0 mb-1 fs-13 fw-semibold">James Lemire</h6>
<div class="fs-13 text-muted">
<p class="mb-1">We talked about a project on linkedin.</p>
</div>
<p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
<span><i class="mdi mdi-clock-outline"></i> 30 min ago</span>
</p>
</div>
<div class="px-2 fs-16">
<input class="form-check-input" type="checkbox">
</div>
</div>
</a>
<a href="#!" class="text-reset notification-item d-block dropdown-item">
<div class="d-flex">
<img src="assets/images/users/avatar-2.jpg"
class="me-3 rounded-circle avatar-xs" alt="user-pic">
<div class="flex-grow-1">
<h6 class="mt-0 mb-1 fs-13 fw-semibold">Angela Bernier</h6>
<div class="fs-13 text-muted">
<p class="mb-1">Answered to your comment on the cash flow forecast's graph 🔔.</p>
</div>
<p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
<span><i class="mdi mdi-clock-outline"></i> 2 hrs ago</span>
</p>
</div>
<div class="px-2 fs-16">
<input class="form-check-input" type="checkbox">
</div>
</div>
</a>
<a href="#!" class="text-reset notification-item d-block dropdown-item">
<div class="d-flex">
<img src="assets/images/users/avatar-6.jpg"
class="me-3 rounded-circle avatar-xs" alt="user-pic">
<div class="flex-grow-1">
<h6 class="mt-0 mb-1 fs-13 fw-semibold">Kenneth Brown</h6>
<div class="fs-13 text-muted">
<p class="mb-1">Mentionned you in his comment on 📃 invoice #12501.</p>
</div>
<p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
<span><i class="mdi mdi-clock-outline"></i> 10 hrs ago</span>
</p>
</div>
<div class="px-2 fs-16">
<input class="form-check-input" type="checkbox">
</div>
</div>
</a>
<a href="#!" class="text-reset notification-item d-block dropdown-item">
<div class="d-flex">
<img src="assets/images/users/avatar-8.jpg"
class="me-3 rounded-circle avatar-xs" alt="user-pic">
<div class="flex-grow-1">
<h6 class="mt-0 mb-1 fs-13 fw-semibold">Maureen Gibson</h6>
<div class="fs-13 text-muted">
<p class="mb-1">We talked about a project on linkedin.</p>
</div>
<p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
<span><i class="mdi mdi-clock-outline"></i> 3 days ago</span>
</p>
</div>
<div class="px-2 fs-16">
<input class="form-check-input" type="checkbox">
</div>
</div>
</a>
<div class="my-3 text-center">
<button type="button" class="btn btn-soft-success waves-effect waves-light">View All Messages <i class="ri-arrow-right-line align-middle"></i></button>
</div>
</div>
</div>
<div class="tab-pane fade p-4" id="alerts-tab1" role="tabpanel" aria-labelledby="alerts-tab">
<div class="w-25 pt-3 mx-auto">
<img src="assets/images/svg/bell.svg" class="img-fluid" alt="user-pic">
</div>
<div class="text-center pb-5 mt-2">
<h6 class="fs-18 fw-semibold lh-base">Hey! You have no any notifications </h6>
</div>
</div>
</div>
</div>