Overlays

Dropdown

A trigger-driven menu surface for contextual actions.

DropdownView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

tsx

import { Cell } from "retend";

import { Button, Dropdown } from "innate-ui";
import { Icon } from "@/docs/icons/Icon";

export function DropdownDemo() {
  const selected = Cell.source("");

  return (
    <Dropdown value={selected} onChange={(value) => selected.set(value)}>
      <Dropdown.Trigger>
        <Button>
          <Button.Start>
            <Icon name="plus" />
          </Button.Start>
          Add
        </Button>
      </Dropdown.Trigger>
      <Dropdown.Content>
        <Dropdown.Item value="worker" label="Worker" />
        <Dropdown.Item value="pages" label="Pages" />
      </Dropdown.Content>
    </Dropdown>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

DropdownProps

Prop	Type	Default
`children`required Dropdown trigger, value, content, and item parts.	`JSX.Children`	`—`
`value` Currently selected item value.	`JSX.ValueOrCell<Value>`	`—`
`onChange` Called when an item is selected.	`(value: Value) => void`	`—`
`open` Whether the popover is open.	`JSX.ValueOrCell<boolean>`	`false`
`side` Preferred side of the anchor.	`JSX.ValueOrCell<PopoverSide>`	`"bottom"`
`align` Preferred alignment along the anchor edge.	`JSX.ValueOrCell<PopoverAlign>`	`"center"`
`onOpenChange` Called when the popover requests an open-state change.	`(open: boolean, reason?: PopoverCloseReason) => void`	`—`

Inspect the typed source →