Dropdown

An action menu, not a form select. The menu reuses the Select listbox wash: white surface, 1px border, --gk-radius-sm (6px), and a 22% brand wash on hover. Danger rows use danger text and a soft danger wash. z-index is 4000.

Demos

Text and chevron

The built-in trigger is label plus a chevron. variant="primary" is the brand fill from the approved mock; the default variant is the outlined size scale below. Choosing an item emits select with { key, item } and closes the menu.

EditCopy linkArchive (unavailable)Delete

Last key: (none)

<gk-dropdown label="More actions" variant="primary" @select="onSelect">
  <gk-dropdown-item key="edit" shortcut="⌘E">Edit</gk-dropdown-item>
  <gk-dropdown-item key="copy" shortcut="⌘C">Copy link</gk-dropdown-item>
  <gk-dropdown-item key="archive" disabled>Archive (unavailable)</gk-dropdown-item>
  <gk-dropdown-item type="divider"></gk-dropdown-item>
  <gk-dropdown-item key="delete" shortcut="⌫" danger>Delete</gk-dropdown-item>
</gk-dropdown>

Danger and divider

type="divider" is a separator. danger paints the row in the danger color.

EditCopy linkDelete

<gk-dropdown label="More">
  <gk-dropdown-item key="edit">Edit</gk-dropdown-item>
  <gk-dropdown-item type="divider"></gk-dropdown-item>
  <gk-dropdown-item key="delete" danger>Delete</gk-dropdown-item>
</gk-dropdown>

Shortcuts

shortcut is a muted hint on the right. It does not register a real keyboard shortcut.

EditCopy linkDelete

<gk-dropdown-item key="edit" shortcut="⌘E">Edit</gk-dropdown-item>

Disabled item

A disabled item is muted and cannot be selected. Arrow keys skip it.

EditArchive (unavailable)Download

<gk-dropdown-item key="archive" disabled>Archive</gk-dropdown-item>

Placement

Default placement is bottom-start. The menu flips when it would leave the viewport, same helper as Tooltip.

ViewRename

<gk-dropdown label="Placement" placement="bottom-end"></gk-dropdown>

Trigger sizes

Without a trigger slot, the outlined button shows label plus a chevron. Heights follow size: 28 / 34 / 40. Default size is md.

ViewRenameViewView

<gk-dropdown label="More actions">...</gk-dropdown>

Icon / quaternary trigger

Slot any trigger, including gk-button quaternary. The menu chrome stays the same. quaternary was added to Button for this quiet icon trigger; Button previously had text, dashed, and secondary only.

⋯EditCopy linkDelete

<gk-dropdown>
  <gk-button slot="trigger" quaternary aria-label="More actions">⋯</gk-button>
  <gk-dropdown-item key="edit">Edit</gk-dropdown-item>
</gk-dropdown>

Alpine

<div x-data="{ key: '' }">
  <gk-dropdown label="More" x-on:select="key = $event.detail.key">
    <gk-dropdown-item key="edit">Edit</gk-dropdown-item>
    <gk-dropdown-item key="copy">Copy</gk-dropdown-item>
  </gk-dropdown>
  <span x-text="key"></span>
</div>

API

Dropdown props

Prop	Type	Default
label	string	''
placement	placement string	'bottom-start'
trigger	'click' | 'hover' | 'manual'	'click'
disabled	boolean	false
size	'sm' | 'md' | 'lg'	'md'
variant	'default' | 'primary'	'default'
open	boolean	false

Dropdown item props

Prop	Type	Default
key	string	''
label	string	''
shortcut	string	''
type	'item' | 'divider'	'item'
disabled	boolean	false
danger	boolean	false

Slots

Name	Description
trigger	Custom trigger. Falls back to a text + chevron button
default	gk-dropdown-item children

Events

Name	Detail
select	{ key, item }
update:open	Next boolean
open / close	Fired when the menu opens or closes

Keyboard

Arrow Up/Down move the active item, Home/End jump, Enter selects, Escape closes. Outside clicks close. The trigger exposes aria-haspopup="menu" and aria-expanded. Items are menuitem; dividers are separator.

CSS parts

gk-dropdown: trigger, menu. gk-dropdown-item: item, label, shortcut, divider.

Menu radius uses --gk-radius-sm (0.375rem, 6px), the same token as the Select listbox. The spec also wrote --gk-radius-md next to “6px”; that token is 0.5rem, so the approved 6px mock and the Select wash win.