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