dropdown

Menu of actions. Uses Popover API via popovertarget attribute.

status: stable js: trigger support: popover-api

Preview

This overlay stays hidden until triggered — open it in the live demo →

Markup

<div class="dropdown"><button class="btn" popovertarget="X" aria-haspopup="menu">Open</button><div class="dropdown-menu" popover id="X" role="menu" data-side="bottom-start"><button class="dropdown-item" role="menuitem">…</button></div></div>

Install

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/dropdown.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add dropdown

Accessibility

Opens via popovertarget (no JS). For full keyboard menu (arrow-key roving focus, type-ahead, Escape, role=menu/menuitem) add @russfranky/shadcss-js/menu and data-sc-menu

Classes

.dropdown-menu .dropdown-item .dropdown-label .dropdown-separator .dropdown-destructive .dropdown-shortcut .dropdown-checkbox-item .dropdown-radio-item .dropdown-sub-trigger .dropdown-sub-content

Dependencies

base/tokens