---
modificationDate: April 14, 2026
title: ExposedDropdownMenuBox
description: A Jetpack Compose ExposedDropdownMenuBox component for displaying a dropdown menu with a customizable anchor.
sourceCodeUrl: 'https://github.com/expo/expo/tree/main/packages/expo-ui'
packageName: '@expo/ui'
platforms: ['android']
---

<AgentInstructions>

## Submitting Feedback

If this page contains errors, outdated information, or gaps that blocked you from completing a task, report it so the docs can be improved:

curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/versions/v55.0.0/sdk/ui/jetpack-compose/exposeddropdownmenubox/","feedback":"🤖 Agent feedback: <specific, actionable description>"}'

Only submit when you have something specific and actionable to report.

</AgentInstructions>

# ExposedDropdownMenuBox

A Jetpack Compose ExposedDropdownMenuBox component for displaying a dropdown menu with a customizable anchor.
Android

> For the complete documentation index, see [llms.txt](/llms.txt). Use this file to discover all available pages.

Expo UI `ExposedDropdownMenuBox` matches the official Jetpack Compose [`ExposedDropdownMenuBox`](https://kotlinlang.org/api/compose-multiplatform/material3/androidx.compose.material3/-exposed-dropdown-menu-box.html). Use the `menuAnchor()` modifier on the anchor content (typically a read-only `TextField`) and `ExposedDropdownMenu` to wrap `DropdownMenuItem` children.

## Installation

```sh
npx expo install @expo/ui
```

If you are installing this in an [existing React Native app](/bare/overview), make sure to [install `expo`](/bare/installing-expo-modules) in your project.

## Usage

### Basic

> When using an uncontrolled `TextField` as the anchor, pass `key={selected}` to force a remount when the selected value changes — `defaultValue` is only read on mount.

```tsx
import {
  DropdownMenuItem,
  ExposedDropdownMenuBox,
  ExposedDropdownMenu,
  Host,
  Text,
  TextField,
} from '@expo/ui/jetpack-compose';
import { menuAnchor } from '@expo/ui/jetpack-compose/modifiers';
import { useState } from 'react';

const LANGUAGES = [
  { label: 'Java', value: 'java' },
  { label: 'JavaScript', value: 'js' },
  { label: 'TypeScript', value: 'ts' },
];

export default function BasicExposedDropdownMenuBoxExample() {
  const [selected, setSelected] = useState('java');
  const [expanded, setExpanded] = useState(false);

  const selectedLabel = LANGUAGES.find(l => l.value === selected)?.label ?? '';

  return (
    <Host matchContents>
      <ExposedDropdownMenuBox expanded={expanded} onExpandedChange={setExpanded}>
        <TextField
          defaultValue={selectedLabel}
          key={selected}
          readOnly
          modifiers={[menuAnchor()]}
        />
        <ExposedDropdownMenu expanded={expanded} onDismissRequest={() => setExpanded(false)}>
          {LANGUAGES.map(lang => (
            <DropdownMenuItem
              key={lang.value}
              onClick={() => {
                setSelected(lang.value);
                setExpanded(false);
              }}>
              <DropdownMenuItem.Text>
                <Text>{lang.label}</Text>
              </DropdownMenuItem.Text>
            </DropdownMenuItem>
          ))}
        </ExposedDropdownMenu>
      </ExposedDropdownMenuBox>
    </Host>
  );
}
```

## API

```tsx
import { ExposedDropdownMenuBox } from '@expo/ui/jetpack-compose';
```

## Components

### `ExposedDropdownMenu`

Supported platforms: Android.

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[ExposedDropdownMenuProps](#exposeddropdownmenuprops)\>

A Material 3 `ExposedDropdownMenu` that displays menu items in a dropdown.

Must be used inside an `ExposedDropdownMenuBox`.

Props for the `ExposedDropdownMenu` component.

ExposedDropdownMenuProps

### `children`

Supported platforms: Android.

Optional • Type: [ReactNode](https://reactnative.dev/docs/react-node)

Children should be `DropdownMenuItem` components.

### `containerColor`

Supported platforms: Android.

Optional • Type: [ColorValue](https://reactnative.dev/docs/colors)

Background color of the dropdown menu container.

### `expanded`

Supported platforms: Android.

Type: `boolean`

Whether the dropdown menu is expanded (visible).

### `modifiers`

Supported platforms: Android.

Optional • Type: `ModifierConfig[]`

Modifiers for the component.

### `onDismissRequest`

Supported platforms: Android.

Optional • Type: `() => void`

Callback fired when the menu requests to be dismissed (e.g. tapping outside, back button).

### `ExposedDropdownMenuBox`

Supported platforms: Android.

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[ExposedDropdownMenuBoxProps](#exposeddropdownmenuboxprops)\>

A Material 3 `ExposedDropdownMenuBox`.

Use the `menuAnchor()` modifier on the anchor content (e.g. a `TextInput` or `Text`). Use `ExposedDropdownMenu` to wrap `DropdownMenuItem` children.

When using an uncontrolled `TextInput` as the anchor with `defaultValue`, pass `key={value}` to force a remount when the selected value changes — this is a limitation of uncontrolled inputs where `defaultValue` is only read on mount.

Example

```tsx
<ExposedDropdownMenuBox expanded={expanded} onExpandedChange={setExpanded}>
  <TextInput key={value} modifiers={[menuAnchor()]} defaultValue={value} readOnly />
  <ExposedDropdownMenu expanded={expanded} onDismissRequest={() => setExpanded(false)}>
    <DropdownMenuItem onClick={() => { setSelected('a'); setExpanded(false); }}>
      <DropdownMenuItem.Text><Text>Option A</Text></DropdownMenuItem.Text>
    </DropdownMenuItem>
  </ExposedDropdownMenu>
</ExposedDropdownMenuBox>
```

ExposedDropdownMenuBoxProps

### `children`

Supported platforms: Android.

Optional • Type: [ReactNode](https://reactnative.dev/docs/react-node)

Children — should contain an anchor element with the `menuAnchor()` modifier and an `ExposedDropdownMenu` with `DropdownMenuItem` children.

### `expanded`

Supported platforms: Android.

Type: `boolean`

Whether the dropdown menu is expanded (visible).

### `modifiers`

Supported platforms: Android.

Optional • Type: `ModifierConfig[]`

Modifiers for the component.

### `onExpandedChange`

Supported platforms: Android.

Optional • Type: `(expanded: boolean) => void`

Callback when the expanded state changes (for example, tapping the field or dismissing the menu).