StellarUI

<stellar-dropdown>

Properties

Component

Example

Preview

Open menu Docs

Markup

Copy

<stellar-dropdown>
  <span slot="trigger">Open menu</span>
  <button type="button">Profile</button>
  <button type="button">Billing</button>
  <a href="#dropdown-docs">Docs</a>
</stellar-dropdown>

API

Complete props, events, slots, and implementation notes for the shipped dropdown.

Props

Prop	Type	Default	Notes
`align`	`start \| center \| end`	`start`	Ports the shipped horizontal alignment modifiers for top and bottom dropdowns, and the vertical anchor for left and right dropdowns.
`position`	`top \| bottom \| left \| right`	`bottom`	Chooses which side of the trigger the menu opens from.
`state`	`'' \| hover \| open \| close`	`''`	Ports the shipped `dropdown-hover`, `dropdown-open`, and `dropdown-close` modifiers into one explicit prop.
`label`	`string`	`Open menu`	Fallback trigger text when the `trigger` slot is not present.

Events

Event	Source	Notes
`toggle`	native `<details>`	Re-dispatched from the host so listeners can observe the internal native open state.
`click` / `keydown`	slotted content	Menu items keep their normal native interaction behavior, and the dropdown adds arrow key, Home/End, Escape, Tab, and typeahead handling while open.
custom events	none	`stellar-dropdown` does not emit custom events.

Slots

Slot	Notes
`trigger`	Content inside the native `<summary>`. It overrides the `label` prop when present.
default	Top-level slotted dropdown items or content. Direct `<a>`, `<button>`, and `<hr>` children receive the shipped menu styling.

Notes

The public tag is `stellar-dropdown`, backed by a real native `<details>` and `<summary>` pair inside the component.
The shipped API stays small: `align`, `position`, `state`, and `label`, plus a `trigger` slot and default slotted content.
The earlier design exposes three dropdown methods, but this port intentionally picks the native `details` path because it matches the repo’s native-first guidance.
The `state` prop collapses the hover, forced-open, and forced-close modifiers into one explicit enum instead of parallel booleans.
Direct top-level `<a>` and `<button>` children get the shipped menu-item styling, so simple authored dropdown content stays light DOM.
The component now adds the smaller keyboard layer: Arrow Up/Down, Home/End, Escape, Tab close, Enter/Space activation, and one-second typeahead across direct menu items.
`stellar-dropdown` uses `mode: 'open'` and reads the exported `stellar.css` tokens directly without another wrapper token layer.
The visual baseline follows the shipped summary trigger, dropdown surface, animation, and placement semantics with direct Stellar token mapping.