# @askrjs/ui/dropdown

> Published API exports for @askrjs/ui/dropdown.

Source: [https://askrjs.com/docs/reference/api/ui/dropdown](https://askrjs.com/docs/reference/api/ui/dropdown)

Status: stable. Packages: @askrjs/ui/dropdown.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 31 exports from the declarations shipped by @askrjs/ui.

### `Dropdown`

```ts
Dropdown: (props: DropdownProps) => JSX.Element
```

Renders a part of `dropdown`.

### `DROPDOWN_A11Y_CONTRACT`

```ts
DROPDOWN_A11Y_CONTRACT: { readonly CONTENT_ROLE: "menu"; readonly ITEM_ROLE: "menuitem"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; readonly side: "data-side"; readonly align: "data-align"; }; readonly TRIGGER_ATTRIBUTES: { readonly expanded: "aria-expanded"; readonly controls: "aria-controls"; readonly hasPopup: "aria-haspopup"; }; }
```

Dropdown accessibility contract.

### `DropdownA11yContract`

```ts
DropdownA11yContract: typeof DROPDOWN_A11Y_CONTRACT
```

Type of the Dropdown A11y Contract object.

### `DropdownContent`

```ts
DropdownContent: { (props: DropdownContentProps): JSX.Element | null; (props: DropdownContentAsChildProps): JSX.Element | null; }
```

Renders a part of `dropdown`.

Supports polymorphic rendering via `asChild`.

### `DropdownContentAsChildProps`

```ts
DropdownContentAsChildProps: BoxAsChildProps & DropdownContentOwnProps
```

Props for the `asChild` (polymorphic) rendering of Dropdown Content.

- `align`: align?: OverlayAlign | undefined;

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<Element>;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `DropdownContentOwnProps`

```ts
DropdownContentOwnProps: {
  forceMount?: boolean;
  side?: OverlaySide;
  align?: OverlayAlign;
  sideOffset?: number;
}
```

Own props for Dropdown Content, before merging with native element attributes.

- `align`: align?: OverlayAlign | undefined;

- `forceMount`: forceMount?: boolean | undefined;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `DropdownContentProps`

```ts
DropdownContentProps: BoxProps<'div', HTMLDivElement> & DropdownContentOwnProps
```

Props for Dropdown Content.

- `align`: align?: OverlayAlign | undefined;

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `DropdownGroup`

```ts
DropdownGroup: (props: DropdownGroupProps | DropdownGroupAsChildProps) => JSX.Element
```

Renders the `dropdown-group` part of `dropdown` with `role="group"`.

Supports polymorphic rendering via `asChild`.

### `DropdownGroupAsChildProps`

```ts
DropdownGroupAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Dropdown Group.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `DropdownGroupProps`

```ts
DropdownGroupProps: BoxProps<'div', HTMLDivElement>
```

Props for Dropdown Group.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `DropdownItem`

```ts
DropdownItem: { (props: DropdownItemProps): JSX.Element | null; (props: DropdownItemAsChildProps): JSX.Element | null; }
```

Renders a part of `dropdown`.

Supports polymorphic rendering via `asChild`.

### `DropdownItemAsChildProps`

```ts
DropdownItemAsChildProps: Omit<ButtonLikeAsChildProps, 'onPress'> & DropdownItemOwnProps
```

Props for the `asChild` (polymorphic) rendering of Dropdown Item.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onSelect`: onSelect?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `textValue`: Text used for typeahead when rendered children are not plain text.

- `type`: type?: undefined;

- `value`: value?: string | undefined;

- `variant`: variant?: DropdownItemVariant | undefined;

### `DropdownItemOwnProps`

```ts
DropdownItemOwnProps: {
  children?: unknown;
  disabled?: boolean;
  value?: string;
  variant?: DropdownItemVariant;
  onSelect?: (event: PressEvent) => void;
  /** Text used for typeahead when rendered children are not plain text. */
  textValue?: string;
}
```

Own props for Dropdown Item, before merging with native element attributes.

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onSelect`: onSelect?: ((event: PressEvent) => void) | undefined;

- `textValue`: Text used for typeahead when rendered children are not plain text.

- `value`: value?: string | undefined;

- `variant`: variant?: DropdownItemVariant | undefined;

### `DropdownItemProps`

```ts
DropdownItemProps: Omit<ButtonLikeProps<'button', HTMLButtonElement>, 'onPress'> & DropdownItemOwnProps
```

Props for Dropdown Item.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onSelect`: onSelect?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `textValue`: Text used for typeahead when rendered children are not plain text.

- `type`: type?: "button" | "submit" | "reset" | undefined;

- `variant`: variant?: DropdownItemVariant | undefined;

### `DropdownItemVariant`

```ts
DropdownItemVariant: 'default' | 'destructive'
```

Dropdown Item Variant.

### `DropdownLabel`

```ts
DropdownLabel: (props: DropdownLabelProps | DropdownLabelAsChildProps) => JSX.Element
```

Renders the `dropdown-label` part of `dropdown`.

Supports polymorphic rendering via `asChild`.

### `DropdownLabelAsChildProps`

```ts
DropdownLabelAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Dropdown Label.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `DropdownLabelProps`

```ts
DropdownLabelProps: BoxProps<'div', HTMLDivElement>
```

Props for Dropdown Label.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `DropdownOwnProps`

```ts
DropdownOwnProps: {
  /** Supports literal, nested, array-mapped, and `For`-rendered descendants. */
  children?: unknown;
  id?: string;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
}
```

Own props for Dropdown, before merging with native element attributes.

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `id`: id?: string | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

### `DropdownPortal`

```ts
DropdownPortal: (props: DropdownPortalProps) => JSX.Element | null
```

Renders a part of `dropdown`.

### `DropdownPortalProps`

```ts
DropdownPortalProps: {
  children?: unknown;
}
```

Props for Dropdown Portal.

- `children`: children?: unknown;

### `DropdownProps`

```ts
DropdownProps: DropdownOwnProps
```

Props for `Dropdown`.

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `id`: id?: string | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

### `DropdownSeparator`

```ts
DropdownSeparator: (props: DropdownSeparatorProps | DropdownSeparatorAsChildProps) => JSX.Element
```

Renders the `dropdown-separator` part of `dropdown` with `role="separator"`.

Supports polymorphic rendering via `asChild`.

### `DropdownSeparatorAsChildProps`

```ts
DropdownSeparatorAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Dropdown Separator.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `DropdownSeparatorProps`

```ts
DropdownSeparatorProps: BoxProps<'div', HTMLDivElement>
```

Props for Dropdown Separator.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `DropdownTrigger`

```ts
DropdownTrigger: { (props: DropdownTriggerProps): JSX.Element | null; (props: DropdownTriggerAsChildProps): JSX.Element | null; }
```

Renders the `dropdown-trigger` part of `dropdown`.

Supports polymorphic rendering via `asChild`.

### `DropdownTriggerAsChildProps`

```ts
DropdownTriggerAsChildProps: ButtonLikeAsChildProps & DropdownTriggerOwnProps
```

Props for the `asChild` (polymorphic) rendering of Dropdown Trigger.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `size`: size?: DropdownTriggerSize | undefined;

- `type`: type?: undefined;

- `variant`: variant?: DropdownTriggerVariant | undefined;

### `DropdownTriggerOwnProps`

```ts
DropdownTriggerOwnProps: {
  variant?: DropdownTriggerVariant;
  size?: DropdownTriggerSize;
}
```

Own props for Dropdown Trigger, before merging with native element attributes.

- `size`: size?: DropdownTriggerSize | undefined;

- `variant`: variant?: DropdownTriggerVariant | undefined;

### `DropdownTriggerProps`

```ts
DropdownTriggerProps: ButtonLikeProps<'button', HTMLButtonElement> & DropdownTriggerOwnProps
```

Props for Dropdown Trigger.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `size`: size?: DropdownTriggerSize | undefined;

- `type`: type?: "button" | "submit" | "reset" | undefined;

- `variant`: variant?: DropdownTriggerVariant | undefined;

### `DropdownTriggerSize`

```ts
DropdownTriggerSize: 'md' | 'icon'
```

Dropdown Trigger Size.

### `DropdownTriggerVariant`

```ts
DropdownTriggerVariant: 'default' | 'ghost'
```

Dropdown Trigger Variant.

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/ui/dismissable-layer/index.md) | [Next](https://askrjs.com/docs/reference/api/ui/focus-scope/index.md)