Each item's label targets the same checkbox as the toggle, so selecting an item closes the menu — same pattern the accordion uses to reset state without JS. Trade-off: it won't close on an outside click, matching the accordion's existing behavior.
Three alignment variants of the same .dropdown-menu component, built from composable utility classes only — no new CSS per variant.
left: 0. The menu's left edge lines up with the trigger's left edge. Best when the trigger sits near the left side of the viewport — flush right of the trigger otherwise risks overflow if the trigger is near the right edge.
.left-50 moves the menu's left edge to the trigger's horizontal center; .translate-x--50 then shifts it back by half of its own width. Together the menu stays perfectly centered under the trigger regardless of label text length or menu width — no fixed offset to maintain.
.right-0 alone isn't enough — left: 0 still wins because min-width: 12rem forces the browser to discard right. .left-auto removes left from the equation so right: 0 actually applies, anchoring the menu's right edge to the trigger's right edge. Use this for triggers near the right edge of the viewport — nav-bar account menus, right-aligned toolbar actions, etc.
| Variant | Classes added to .dropdown-menu | Anchors to |
|---|---|---|
| Default | (none) | Trigger's left edge |
| Centered | .left-50 .translate-x--50 | Trigger's horizontal center |
| Right-anchored | .right-0 .left-auto | Trigger's right edge |
Built with love by Kim Majali, EITO team, and contributors.