modern-now

Back

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.

With arrows. Thanks to this wonderful technique we even support borders!

Closing modes : choose between manual (you have to press esc or click the button again), inside (clicking inside closes the menu) or outside (clicking outside closes the menu)

Nested dropdowns