Dropdown Menu

Dropdown menus reveal secondary actions, settings, and grouped choices without permanently occupying layout space.

Basic Usage

Use a simple trigger and a short action list for the most common menu pattern.

Grouped Options

Labels, separators, check items, radio items, and shortcuts help organize denser menu content without losing scanability.

Different Triggers

Menus often sit behind different trigger styles depending on whether the action is primary, contextual, or account-related.

Submenus

Submenus are useful for deeper action trees, but they should stay narrow and clearly grouped.

Selection Items

Use checkbox and radio items for menu options that change persistent view or sorting state.

Item Icons

Leading icons go in the item’s prefix slot (or start).

Sizes

size on pk-dropdown-menu scales items, labels, and icons together.

Slotted labels and host metrics

Item labels live in light DOM (default slot). They inherit type metrics from the pk-dropdown-item :host — not from the shadow .item row, and not from the menu host or page. Size tokens set --pk-dropdown-item-font-size / --pk-dropdown-item-line-height on the item host so Craft CP (tight body line-height) and Tailwind-scoped hosts get the same row rhythm without consumer CSS.

Do not put font-size / line-height on pk-dropdown-menu (or a wrapper) expecting item labels to pick them up for layout — ancestor noise can crush rows until the kit :host pin is present. After that pin, consumers should remove temporary menu-host type overrides.

Stress this in the workshop playground at /tools/slotted-host: Craft vs Tailwind hosts, ellipsis + icon menus, a text-trigger type picker, an ancestor line-height: normal case, selects, overlay mode, and Measure popups.