Adrian Herman
System Admin
CTRL + /
Welcome to SmartHR
Adrian Herman
System Admin
Welcome to SmartHR
Adrian Herman
System Admin
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