Dropmenu Component

Pure CSS dropdown menu built with ul + li + hover structure. Supports multi-level nesting, click toggle (checkbox), inline/list modes, multiple positions, submenu directions, ghost variant, and RTL.

Notes

Basic usage

Hover (default)

With arrow (data-role="host")

Inline mode (.dropmenu-inline)

List mode (.dropmenu-list)

Click toggle (checkbox)

Ghost variant

Hover ghost

Ghost inline

Ghost click toggle

Combined menus

Multiple dropdowns

Radio group toggle

Bottom

Center
Start

Top

Center
Start

End (right)

Center
Bottom

Start (left)

Center
Bottom

Default (right-down)

Left-down (.dropmenu-downward-start)

Vertical (.dropmenu-upright)

States

Expanded (data-expanded="true")

Selected (data-selected="true")

Disabled (data-disabled="true")