Dropdown
A menu of actions in a native popover, opened by its button with no script.
A menu of actions
The children of . are
<button> and <a>. Give each
button popover +
popover so a
click closes the menu; listen for the button's own
click to act. <hr> separates
groups.
<button type="button" class="btn" popovertarget="dd-actions">Actions <i class="icon icon-chevron-down" aria-hidden="true"></i></button>
<div class="dropdown" id="dd-actions" popover>
<button type="button" popovertarget="dd-actions" popovertargetaction="hide"><i class="icon icon-pencil" aria-hidden="true"></i>Edit</button>
<button type="button" popovertarget="dd-actions" popovertargetaction="hide"><i class="icon icon-copy" aria-hidden="true"></i>Duplicate</button>
<a href="#"><i class="icon icon-external-link" aria-hidden="true"></i>View in store</a>
<hr>
<button type="button" data-variant="danger" popovertarget="dd-actions" popovertargetaction="hide"><i class="icon icon-trash-2" aria-hidden="true"></i>Delete</button>
</div>Alignment: start, center and end of the button
data- on the menu, default
start. The same attribute as the popover.
<div class="stack" data-direction="row" data-gap="sm">
<button type="button" class="btn" popovertarget="dd-align-start">Start</button>
<div class="dropdown" id="dd-align-start" popover>
<button type="button" popovertarget="dd-align-start" popovertargetaction="hide">Edit</button>
<button type="button" popovertarget="dd-align-start" popovertargetaction="hide">Duplicate</button>
<button type="button" popovertarget="dd-align-start" popovertargetaction="hide">Archive</button>
</div>
<button type="button" class="btn" popovertarget="dd-align-center">Center</button>
<div class="dropdown" id="dd-align-center" popover data-align="center">
<button type="button" popovertarget="dd-align-center" popovertargetaction="hide">Edit</button>
<button type="button" popovertarget="dd-align-center" popovertargetaction="hide">Duplicate</button>
<button type="button" popovertarget="dd-align-center" popovertargetaction="hide">Archive</button>
</div>
<button type="button" class="btn" popovertarget="dd-align-end">End</button>
<div class="dropdown" id="dd-align-end" popover data-align="end">
<button type="button" popovertarget="dd-align-end" popovertargetaction="hide">Edit</button>
<button type="button" popovertarget="dd-align-end" popovertargetaction="hide">Duplicate</button>
<button type="button" popovertarget="dd-align-end" popovertargetaction="hide">Archive</button>
</div>
</div>Side: below, above, left and right of the button
data-, default bottom. A menu
that does not fit flips to the other side.
<div class="stack" data-direction="row" data-gap="sm">
<button type="button" class="btn" popovertarget="dd-side-bottom">Bottom</button>
<div class="dropdown" id="dd-side-bottom" popover>
<button type="button" popovertarget="dd-side-bottom" popovertargetaction="hide">Edit</button>
<button type="button" popovertarget="dd-side-bottom" popovertargetaction="hide">Duplicate</button>
<button type="button" popovertarget="dd-side-bottom" popovertargetaction="hide">Archive</button>
</div>
<button type="button" class="btn" popovertarget="dd-side-top">Top</button>
<div class="dropdown" id="dd-side-top" popover data-side="top">
<button type="button" popovertarget="dd-side-top" popovertargetaction="hide">Edit</button>
<button type="button" popovertarget="dd-side-top" popovertargetaction="hide">Duplicate</button>
<button type="button" popovertarget="dd-side-top" popovertargetaction="hide">Archive</button>
</div>
<button type="button" class="btn" popovertarget="dd-side-left">Left</button>
<div class="dropdown" id="dd-side-left" popover data-side="left">
<button type="button" popovertarget="dd-side-left" popovertargetaction="hide">Edit</button>
<button type="button" popovertarget="dd-side-left" popovertargetaction="hide">Duplicate</button>
<button type="button" popovertarget="dd-side-left" popovertargetaction="hide">Archive</button>
</div>
<button type="button" class="btn" popovertarget="dd-side-right">Right</button>
<div class="dropdown" id="dd-side-right" popover data-side="right">
<button type="button" popovertarget="dd-side-right" popovertargetaction="hide">Edit</button>
<button type="button" popovertarget="dd-side-right" popovertargetaction="hide">Duplicate</button>
<button type="button" popovertarget="dd-side-right" popovertargetaction="hide">Archive</button>
</div>
</div>From an icon button at the end of a row, aligned to its end
data- keeps a menu from an
end-of-row button inside the page. An icon button needs an
aria-.
Order #1042
$84.50 · Paid
<div class="item" data-variant="outline">
<section><h3>Order #1042</h3><p>$84.50 · Paid</p></section>
<aside>
<button type="button" class="btn" data-variant="ghost" data-size="icon" popovertarget="dd-row" aria-label="Order actions"><i class="icon icon-ellipsis" aria-hidden="true"></i></button>
<div class="dropdown" id="dd-row" popover data-align="end">
<button type="button" popovertarget="dd-row" popovertargetaction="hide"><i class="icon icon-pencil" aria-hidden="true"></i>Edit</button>
<button type="button" popovertarget="dd-row" popovertargetaction="hide"><i class="icon icon-copy" aria-hidden="true"></i>Duplicate</button>
<button type="button" popovertarget="dd-row" popovertargetaction="hide"><i class="icon icon-printer" aria-hidden="true"></i>Print packing slip</button>
<hr>
<button type="button" data-variant="danger" popovertarget="dd-row" popovertargetaction="hide"><i class="icon icon-trash-2" aria-hidden="true"></i>Delete</button>
</div>
</aside>
</div>Headings, shortcuts and a disabled item
<h3> is a gray heading,
<kbd> sits at the end, and
disabled makes an item unclickable and skipped by
Tab. A link cannot be disabled: use
aria- and remove its
href. The shortcut is only a label: wire the key
yourself.
jane@example.com
<button type="button" class="btn" popovertarget="dd-account"><i class="icon icon-user" aria-hidden="true"></i>Account</button>
<div class="dropdown" id="dd-account" popover>
<h3>jane@example.com</h3>
<button type="button" popovertarget="dd-account" popovertargetaction="hide">Profile<kbd>⇧⌘P</kbd></button>
<button type="button" popovertarget="dd-account" popovertargetaction="hide">Billing<kbd>⌘B</kbd></button>
<button type="button" disabled>API keys</button>
<hr>
<button type="button" data-variant="danger" popovertarget="dd-account" popovertargetaction="hide">Sign out<kbd>⇧⌘Q</kbd></button>
</div>Checkbox items: choose which columns to show
Use <input type= inside a
<label>. Native checkboxes: Space ticks the
focused one, the menu stays open, and the page listens for
change and reads checked.
Show columns
<button type="button" class="btn" popovertarget="dd-columns">Columns</button>
<div class="dropdown" id="dd-columns" popover>
<h3>Show columns</h3>
<label><input type="checkbox" name="columns" value="variants" checked> Variants</label>
<label><input type="checkbox" name="columns" value="visibility" checked> Visibility</label>
<label><input type="checkbox" name="columns" value="ranking"> Ranking</label>
</div>Radio items: choose one
Use <input type= with the same
name. The arrow keys move the choice within the
group, as in any radio group.
Sort by
<button type="button" class="btn" popovertarget="dd-sort">Sort by</button>
<div class="dropdown" id="dd-sort" popover>
<h3>Sort by</h3>
<label><input type="radio" name="dd-sort" value="newest" checked> Newest</label>
<label><input type="radio" name="dd-sort" value="oldest"> Oldest</label>
<label><input type="radio" name="dd-sort" value="total"> Order total</label>
</div>API
Methods (native)
| Member | Type | Description |
|---|---|---|
showPopover(
|
method | Opens the menu. |
hidePopover(
|
method | Closes the menu. |
togglePopover(
|
method | Opens it when closed, closes it when open. |
Events (native)
| Event | Detail | Description |
|---|---|---|
toggle |
newState: "open" /
"closed"
|
On the menu, after it opens or closes. |
click |
none | On an item: do its action. |
change |
none |
On a checkbox or radio item: read checked.
|
Keyboard
| Key | Description |
|---|---|
| Enter / Space | On the button: opens or closes the menu. On an item: chooses it. |
| Tab / Shift Tab | Moves through the items; the menu comes right after its button in the focus order. |
| ↑ ↓ | In a radio group: moves the choice. |
| Esc | Closes the menu and returns focus to the button. |
No script and no
role="menu": items are plain buttons and links, so
Tab moves between them instead of the arrow keys.
Attributes
| Attribute / element | Values | Description |
|---|---|---|
class=
|
on the menu | The component: a bordered list at least 10rem wide. |
popover + id |
auto (default) |
Closes on an outside click, Escape, or another menu. |
popover
|
the menu's id | On the button; the menu is placed against it. |
popover
|
hide on an item,
toggle (default) on the button
|
On an item button: closes the menu on click. |
data-
|
none or bottom (default), top,
left, right
|
The side of the button the menu opens on. Flips when it does not fit. |
data-
|
none or start (default), center,
end
|
How the menu lines up with the button. |
> button, > a |
items | Menu items. An icon before the text is gray. |
> label > input |
type= or
type=
|
A checkbox or radio item; the menu stays open. |
> h2, > h3, > h4 |
text | A small gray group heading. |
> hr |
Separates groups. | |
kbd |
inside an item | A shortcut label at the end of the item. |
disabled, aria-
|
disabled on a button or input,
aria- on a link
|
Grayed out; a disabled button is skipped by Tab. |
data-
|
danger |
A destructive item, in red. |