Grocery Apex
Grocery Bevy
Grocery Eden
English
Arabic
Dropdowns
Dropdowns
Single dropdown buttons
Rounded Button Dropdowns
Outline Button Dropdowns
Rounded Outline Dropdowns
Split buttons
Dropdown Sizing
Dropup
Dropup right
Dropup left
Active
Disabled
Dropdowns with Forms
Auto close behavior
Dropdown menu centered
Use .dropdown-center on the parent element.
Dropup centered
Use .dropup-center
on the parent element.
Menu items
You can use <a> or <button> as
dropdown items.
Dropdowns options
Use data-bs-offset or data-bs-reference to change
the location of the dropdown.
Alignment options
Dark Dropdowns
Menu alignment
Responsive alignment end
Responsive alignment left
Custom Dropdown Menu's
Ghost Button Dropdowns
non-interactive dropdown items
Use .dropdown-item-text. to create non-interactive dropdown items.
Dropdown Headers
Add a .dropdown-header to label sections of actions in any dropdown menu.
Dropdown Dividers
Dropdown Menu Text