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>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 |