Dropdown

Floating list anchored to a trigger element. Renders any React content (form, panel, etc.) or, via the options shortcut, a List with clickable items.

When to use

✅ Use when…	🚫 Avoid when…
For an action menu attached to a button (e.g. "Edit", "Delete"). For compact filters and selectors where a native `select` is not enough. When the floating content depends on the open state (e.g. focusing a search field on open).	As a short informative tooltip. Use `Tooltip`. As contextual description with title + text. Use `Popover`. As a centered blocking dialog. Use `Modal`.

Using `content`

Accepts any React component (here, a List with multiple selection).

<Dropdown
  full
  content={
    <List
      multiple
      color="primary"
      content={[
        { title: 'Item 1', icon: <Icon icon={clock} /> },
        { title: 'Item 2', icon: <Icon icon={emojiStar} /> },
        { title: 'Item 3', icon: <Icon icon={pen} /> },
      ]}
    />
  }
>
  <Button color="primary" text="Dropdown with List" />
</Dropdown>

Using `options`

Shortcut to render a List automatically.

<Dropdown
  full
  options={[
    { title: 'Item 1', icon: <Icon icon={clock} /> },
    { title: 'Item 2', icon: <Icon icon={emojiStar} /> },
    { title: 'Item 3', icon: <Icon icon={pen} /> },
  ]}
>
  <Button color="primary" text="Dropdown" />
</Dropdown>

The options list is exclusive — one item stays selected and clicking it again keeps it (an idempotent pick). Build a List yourself in content if you need toggle semantics.

Open animation

The menu animates open by default with the scale motion preset (a subtle fade + scale-in, ADR-027) — it runs on open via @starting-style and is zeroed automatically under prefers-reduced-motion. Pass any other motion preset to change it, or motion="none" to disable it entirely:

<Dropdown options={items} motion="slide-down">…</Dropdown>  {/* different preset */}
<Dropdown options={items} motion="none">…</Dropdown>        {/* no animation */}

Open on `hover`

With hoverable, the dropdown appears when the mouse hovers over the children.

<Dropdown
  full
  hoverable
  content={
    <List
      showCheckIcon
      content={[
        { title: 'Item 1', icon: <Icon icon={clock} /> },
        { title: 'Item 2', icon: <Icon icon={emojiStar} /> },
        { title: 'Item 3', icon: <Icon icon={pen} /> },
      ]}
    />
  }
>
  <Button color="primary" text="Hover me :)" />
</Dropdown>

Trigger as render-prop

The children can be a function that receives { isOpen, open, toggle } for advanced controls (e.g. toggling an icon based on the state).

<Dropdown
  full
  options={[
    { title: 'Item 1', icon: <Icon icon={clock} /> },
    { title: 'Item 2', icon: <Icon icon={emojiStar} /> },
  ]}
>
  {({ isOpen, toggle }) => (
    <Button
      onClick={toggle}
      color="primary"
      size="small"
      text="Dropdown"
      iconPosition="right"
      icon={isOpen ? <Icon icon={chevronDown} /> : <Icon icon={chevronRight} />}
    />
  )}
</Dropdown>

Properties


Prop	Type	Default	Description
`children *`	`ReactNode \| RenderProps`	—	Trigger element. Can be a React node (it receives an automatic `onClick` that toggles) or a render prop that receives `{ isOpen, open, toggle }`.
`content`	`ReactNode \| ((args: ContentRenderProps) => ReactNode)`	—	Dropdown content. Can be a React node or a function that receives `{ close }` to close programmatically — useful for embedded forms.
`distance`	`number`	—	Distance in pixels between the trigger and the dropdown. Reserved.
`full`	`boolean`	—	Makes the dropdown match the trigger's width. Ignored when `width` is provided.
`hideArrow`	`boolean`	—	Hides the indicator arrow. Reserved for future use.
`hoverable`	`boolean`	`false`	Opens the dropdown on trigger hover instead of on click.
`motion`	`"fade" \| "scale" \| "slide-up" \| "slide-down" \| "slide-left" \| "slide-right" \| "collapse" \| "sheet" \| "sheet-top" \| "drawer-left" \| "drawer-right" \| "none"`	`scale`	Open animation of the menu panel. Runs on open via `@starting-style`; `prefers-reduced-motion` zeroes it centrally. Set `motion="none"` to disable the animation.
`options`	`ListContentType[]`	—	Shortcut for rendering a `List` as the content.

Besides the props above, every component accepts the layout props (spacing, color, flex/grid, sizing, border) — not repeated here.

Dropdown

When to use

Using content

Using options