Dropdowns
Even if select can be created with pure css, it's necessary to add some js for some features (placement, centering, nesting, auto close, keyboard support...). Dropdowns don't have any default styles. For this demo, we borrowed bootstrap styles and classes.
aria attributes are added automatically, and keyboard navigation is supported (try esc, up, down...).
Create dropdowns with data-dropdown.
Demos
Adjust placement with data-dropdown-placement and data-dropdown-distance.
With arrows. Thanks to this wonderful technique we even support borders!
Advanced dropdown content in RTL container ( dir="rtl" is required for mixed
dir attributes for older browsers on the button or the dropdown). A custom drawer is used on mobile with
data-dropdown-drawer="true". Credits to
DropDrawer.
Closing modes : choose between manual (you have to press esc or click the button again), inside (clicking inside closes the menu) , outside (clicking outside closes the menu), .selector
Nested dropdowns