Dropdown Menu

Open

My Account

Profile ⇧⌘P Billing ⌘B Settings ⌘S

---

Team

Invite users

Email Message

---

More…

New Team ⌘T

---

GitHub Support API

---

Log out ⇧⌘Q

Show code

The trigger is native

popovertarget opens and light-dismisses the menu with no JavaScript at all. partialkit positions the panel and adds the WAI-ARIA menu button pattern: roles, aria-expanded, arrow keys, Home, End, type-ahead and focus return.

Parts

Class	Part
.dropdown-menu	The popover panel
.dropdown-menu-item	An action
.dropdown-menu-label	Group heading — names the menu
.dropdown-menu-separator	Divider
.dropdown-menu-shortcut	Right-aligned key hint
.dropdown-menu-group	Groups related items under one role
.dropdown-menu-checkbox-item	Item that toggles
.dropdown-menu-radio-group	Container for mutually exclusive items
.dropdown-menu-radio-item	One choice within a radio group
.dropdown-menu-item-indicator	Slot for the check or dot
.dropdown-menu-sub-trigger	Item that opens a nested menu

Attributes

Attribute	On	Meaning
data-pk-placement	the panel	bottom-start (default), bottom-end, top-start, top-end
data-pk-offset	the panel	Gap from the trigger in pixels. Defaults to 4
data-pk-anchor	the panel	Selector to position against, when the trigger is not the popovertarget button
data-pk-keep-open	an item	Activating it does not close the menu
data-variant="destructive"	an item	Danger styling
data-inset	an item or label	Aligns with items that have icons
data-disabled	an item	Mirrored to aria-disabled, skipped by arrow keys
data-state="open" | "closed"	panel and trigger	Set by the runtime

The panel flips above the trigger when there is not enough room below, and is clamped to stay inside the viewport.

Basic

Open menu

Profile Settings

---

Sign out

Show code

Shortcuts

.dropdown-menu-shortcut pushes a key hint to the trailing edge. Put the keys inside it as Kbd elements — one per key — and add kbd-group so they sit together. It is a hint, not a binding: register the actual shortcut yourself.

<span class="dropdown-menu-shortcut kbd-group">
  <kbd class="kbd">⌘</kbd><kbd class="kbd">S</kbd>
</span>

Edit

Undo ⌘Z Redo ⇧⌘Z

---

Find ⌘F

Show code

Alignment

bottom-start

Left edges align

bottom-end

Right edges align

Show code

With icons

Give every item an icon, or use data-inset on the ones without so the labels still line up.

Actions

Edit Duplicate

---

Delete

Show code

Checkbox items

Each item keeps its own state in aria-checked, and pk:menu:change fires with { checked, value } where value comes from data-value. Pair them with data-pk-keep-open so several can be toggled in one visit.

View

Appearance

---

Status bar Activity bar

Show code

Radio items

Selecting one clears its siblings in the same .dropdown-menu-radio-group, and leaves checkbox items elsewhere in the menu alone.

Density

Row height

---

Compact Comfortable

Show code

Submenus

A .dropdown-menu-sub-trigger points popovertarget at a nested .dropdown-menu. Put the submenu inside its parent in the DOM — that containment is what makes the browser treat them as parent and child, so opening the submenu does not dismiss the menu it came from.

File

New window Share

Email link Copy link

---

Close window

Show code

→ opens a submenu and focuses its first item; ← closes it and returns to the trigger. Moving the pointer to a different item closes it too.

Checkboxes Icons

An item can carry both: the indicator on the trailing edge and its own icon inline.

Filters

Show

---

Open issues Closed issues

Show code

Radio Icons

Theme

Light Dark

Show code

Destructive

data-variant="destructive" recolours the item and its icon, and gives it a destructive surface when focused.

Manage

Rename Duplicate

---

Delete project

Show code

Complex

Labels, groups, shortcuts, a submenu, a disabled item and a destructive action in one menu.

Account

patrick@example.com

---

Profile ⇧⌘P Settings ⌘,

---

Invite people

Email Copy invite link

---

API access Sign out ⇧⌘Q

Show code

RTL

Set dir="rtl" on the page or on any subtree — padding, corners and positions follow the reading direction on their own. See the button page for a live example.

Hover and focus

An item paints on :focus, not :hover — and the pointer moves focus rather than lighting a separate state. That is what Radix does inside shadcn/ui, and it means keyboard and pointer share one highlight instead of two that can disagree.

The highlight is --accent, which is deliberately quiet: 3% grey on white, and one step up from the panel in dark. It has to differ from --popover or a menu has no visible hover at all — the palette test checks exactly that pair.

Keyboard

Key	Action
↓ / ↑	Move between enabled items, wrapping at the ends
Home / End	First / last enabled item
a–z, 0–9	Type-ahead to the first item starting with what you type
→	Open the submenu under the cursor
←	Close a submenu and return to its trigger
Esc / Tab	Close and return focus to the trigger

Items are real <button> elements, so Enter and Space activate them without extra code. Disabled items keep aria-disabled="true" rather than disabled, staying announced but skipped.