Components
Dropdown
A button-triggered menu on the Popover API with anchor positioning and native light-dismiss.
A dropdown is a .dropdown__popover (popover="auto") opened by a trigger with
popovertarget. Menu items are ghost buttons. Place the panel with data-side and
data-align; it light-dismisses natively.
Default
Loading components…
<div class="flex gap-sm"> <div class="dropdown"> <button class="button" type="button" popovertarget="dropdown-example-1">Bottom / start</button> <div id="dropdown-example-1" class="dropdown__popover" data-side="bottom" data-align="start" popover="auto" > <menu> <li class="font-strong text-eyebrow text-muted-foreground p-xs">Group 1</li> <li><a href="#" class="button justify-start" data-variant="ghost">Link 1</a></li> <li><a href="#" class="button justify-start" data-variant="ghost">Link 2</a></li> <li><a href="#" class="button justify-start" data-variant="ghost">Link 3</a></li> <hr class="my-xs" /> <li class="font-strong text-eyebrow text-muted-foreground p-xs">Group 2</li> <li><a href="#" class="button justify-start" data-variant="ghost">Link 4</a></li> <li><a href="#" class="button justify-start" data-variant="ghost">Link 5</a></li> <li><a href="#" class="button justify-start" data-variant="ghost">Link 6</a></li> </menu> </div> </div> <div class="dropdown"> <button class="button" type="button" popovertarget="dropdown-example-2">Bottom / center</button> <div id="dropdown-example-2" class="dropdown__popover" data-side="bottom" data-align="center" popover="auto" > <menu> <li class="font-strong text-eyebrow text-muted-foreground p-xs">Group 1</li> <li><a href="#" class="button justify-start" data-variant="ghost">Link 1</a></li> <li><a href="#" class="button justify-start" data-variant="ghost">Link 2</a></li> <li><a href="#" class="button justify-start" data-variant="ghost">Link 3</a></li> <hr class="my-xs" /> <li class="font-strong text-eyebrow text-muted-foreground p-xs">Group 2</li> <li><a href="#" class="button justify-start" data-variant="ghost">Link 4</a></li> <li><a href="#" class="button justify-start" data-variant="ghost">Link 5</a></li> <li><a href="#" class="button justify-start" data-variant="ghost">Link 6</a></li> </menu> </div> </div> <div class="dropdown"> <button class="button" type="button" popovertarget="dropdown-example-3">Bottom / end</button> <div id="dropdown-example-3" class="dropdown__popover" data-side="bottom" data-align="end" popover="auto" > <menu> <li class="font-strong text-eyebrow text-muted-foreground p-xs">Group 1</li> <li><a href="#" class="button justify-start" data-variant="ghost">Link 1</a></li> <li><a href="#" class="button justify-start" data-variant="ghost">Link 2</a></li> <li><a href="#" class="button justify-start" data-variant="ghost">Link 3</a></li> <hr class="my-xs" /> <li class="font-strong text-eyebrow text-muted-foreground p-xs">Group 2</li> <li><a href="#" class="button justify-start" data-variant="ghost">Link 4</a></li> <li><a href="#" class="button justify-start" data-variant="ghost">Link 5</a></li> <li><a href="#" class="button justify-start" data-variant="ghost">Link 6</a></li> </menu> </div> </div></div>/** * _dropdown.css — Dropdown (.dropdown, .dropdown__popover) * * @layer variables, components * @requires layers.css, _variables.css, _popover.css, _button.css * @uses popovertarget + [popover] — inherits Popover API from _popover.css * @uses anchor-name, anchor-scope, position-anchor — tether menu to trigger * @uses data-side / data-align — maps to --popover-position-* in _popover.css * @tokens --dropdown-* (@layer variables) */@layer variables { :root { --dropdown-button-radius: var(--radius-sm); --dropdown-min-inline-size: var(--step-52); --dropdown-shadow: var(--shadow-sm); }}@layer zazz.components { /* =========================================================================== DROPDOWN — trigger + anchored popover menu - Inherits --popover-* tokens and [popover] surface/positioning from _popover.css. - Only dropdown-specific wiring lives here: anchor scope/name and nested buttons. =========================================================================== */ .dropdown { anchor-scope: --dropdown-trigger; display: inline-block; } .dropdown > [popovertarget] { anchor-name: --dropdown-trigger; } .dropdown__popover { position-anchor: --dropdown-trigger; min-inline-size: var(--dropdown-min-inline-size); box-shadow: var(--dropdown-shadow); } .dropdown__popover .button { --button-radius: var(--dropdown-button-radius); }}API
| Attribute | Where | Values |
|---|---|---|
popovertarget | trigger | id of the .dropdown__popover |
data-side | .dropdown__popover | top, bottom, left, right |
data-align | .dropdown__popover | start, center, end |