Dropdowns
Single Button Dropdown
Use btn class at to create a dropdown toggle
with <button> element.
Dropdown Color Variant
Use btn- class with below mentioned variation
to color dropdown toggle.
Split Button Dropdown
Use divider attribute to DropdownItem to
create split button dropdowns as a single button dropdown.
Dropdown Sizing
Use btn-lg class to create a large size
dropdown button and
btn-sm to create a small size dropdown button.
Dark Dropdowns
Use dropdown-menu-dark class onto an existing
dropdown-menu to create dropdown items dark.
Alignment options
Dropdown demo with various dropdown alignment options.
Dropdown Options
Use data-bs-offset or
data-bs-reference to change the position
of the dropdown.
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.
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
Menu Content
Example of dropdown menu containing Headers, Text and Forms content.
Notifications
Dropdown with notification containing multiple tabs.
Notifications
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
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
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