Docs
BlogChangelogStar us on GitHub
HomeGuidesExpo ServicesReferenceLearn

Reference version

ArchiveExpo SnackDiscord and forumsNewsletter

This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

DropdownMenu

A Jetpack Compose DropdownMenu component for displaying dropdown menus.

Android
Included in Expo Go

GitHub

npm

Changelog

Recommended version:
~58.0.28

Expo UI DropdownMenu matches the official Jetpack Compose Menu API and displays a dropdown menu when a trigger element is pressed.

Three-dot more menu opened to show Edit, Share, and Delete options with leading iconsThree-dot more menu opened to show Edit, Share, and Delete options with leading icons

Installation

Terminal
- npx expo install @expo/ui
- yarn expo install @expo/ui
- pnpm expo install @expo/ui
- bun expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Basic dropdown menu

BasicDropdownMenuExample.tsx
import {
  Host,
  DropdownMenu,
  DropdownMenuItem,
  OutlinedButton,
  Text,
  Icon,
} from '@expo/ui/jetpack-compose';
import { useState } from 'react';

const homeIcon = require('./assets/home.xml');

export default function BasicDropdownMenuExample() {
  const [isExpanded, setIsExpanded] = useState(false);
  return (
    <Host matchContents>
      <DropdownMenu
        expanded={isExpanded}
        onDismissRequest={() => setIsExpanded(false)}>
        <DropdownMenu.Trigger>
          <OutlinedButton onClick={() => setIsExpanded(true)}>
            <Text>Show menu</Text>
          </OutlinedButton>
        </DropdownMenu.Trigger>
        <DropdownMenu.Items>
          <DropdownMenuItem
            onClick={() => {
              setIsExpanded(false);
              console.log('Home pressed');
            }}>
            <DropdownMenuItem.Text>
              <Text>Home</Text>
            </DropdownMenuItem.Text>
            <DropdownMenuItem.LeadingIcon>
              <Icon source={homeIcon} size={24} />
            </DropdownMenuItem.LeadingIcon>
          </DropdownMenuItem>
        </DropdownMenu.Items>
      </DropdownMenu>
    </Host>
  );
}

React Native components as trigger

You can use a React Native view (such as Pressable) as the dropdown's trigger by wrapping it in RNHostView.

RNTriggerDropdownMenuExample.tsx
import {
  Host,
  DropdownMenu,
  DropdownMenuItem,
  Text as ComposeText,
  RNHostView,
} from '@expo/ui/jetpack-compose';
import { useState } from 'react';
import { Pressable, Text } from 'react-native';

export default function RNTriggerDropdownMenuExample() {
  const [isExpanded, setIsExpanded] = useState(false);
  return (
    <Host matchContents>
      <DropdownMenu
        expanded={isExpanded}
        onDismissRequest={() => setIsExpanded(false)}>
        <DropdownMenu.Trigger>
          <RNHostView matchContents>
            <Pressable
              onPress={() => setIsExpanded(true)}
              style={{
                alignSelf: 'flex-start',
                paddingHorizontal: 16,
                paddingVertical: 10,
                borderRadius: 8,
                backgroundColor: '#9B59B6',
              }}>
              <Text style={{ color: 'white', fontWeight: '600' }}>
                RN Pressable Trigger
              </Text>
            </Pressable>
          </RNHostView>
        </DropdownMenu.Trigger>
        <DropdownMenu.Items>
          <DropdownMenuItem onClick={() => setIsExpanded(false)}>
            <DropdownMenuItem.Text>
              <ComposeText>Item 1</ComposeText>
            </DropdownMenuItem.Text>
          </DropdownMenuItem>
          <DropdownMenuItem onClick={() => setIsExpanded(false)}>
            <DropdownMenuItem.Text>
              <ComposeText>Item 2</ComposeText>
            </DropdownMenuItem.Text>
          </DropdownMenuItem>
        </DropdownMenu.Items>
      </DropdownMenu>
    </Host>
  );
}

Long-press trigger

Jetpack Compose has no dedicated long-press menu primitive — you compose one from a combinedClickable modifier on the trigger view plus the existing controlled DropdownMenu. The menu anchors to the trigger automatically.

LongPressDropdownMenuExample.tsx
import {
  Host,
  DropdownMenu,
  DropdownMenuItem,
  Text,
} from '@expo/ui/jetpack-compose';
import {
  background,
  combinedClickable,
} from '@expo/ui/jetpack-compose/modifiers';
import { useState } from 'react';

export default function LongPressDropdownMenuExample() {
  const [isExpanded, setIsExpanded] = useState(false);
  return (
    <Host matchContents>
      <DropdownMenu
        expanded={isExpanded}
        onDismissRequest={() => setIsExpanded(false)}>
        <DropdownMenu.Trigger>
          <Text
            modifiers={[
              background('#e0e0e0'),
              combinedClickable({
                onClick: () => console.log('Short tap'),
                onLongClick: () => setIsExpanded(true),
              }),
            ]}>
            Long-press me
          </Text>
        </DropdownMenu.Trigger>
        <DropdownMenu.Items>
          <DropdownMenuItem onClick={() => setIsExpanded(false)}>
            <DropdownMenuItem.Text>
              <Text>Copy</Text>
            </DropdownMenuItem.Text>
          </DropdownMenuItem>
          <DropdownMenuItem
            elementColors={{ textColor: '#B3261E' }}
            onClick={() => setIsExpanded(false)}>
            <DropdownMenuItem.Text>
              <Text>Delete</Text>
            </DropdownMenuItem.Text>
          </DropdownMenuItem>
        </DropdownMenu.Items>
      </DropdownMenu>
    </Host>
  );
}

Rounded corners

Use cornerRadius to override the default Material3 menu shape with a custom corner radius (in dp).

RoundedDropdownMenuExample.tsx
import {
  Host,
  DropdownMenu,
  DropdownMenuItem,
  OutlinedButton,
  Text,
} from '@expo/ui/jetpack-compose';
import { useState } from 'react';

export default function RoundedDropdownMenuExample() {
  const [isExpanded, setIsExpanded] = useState(false);
  return (
    <Host matchContents>
      <DropdownMenu
        expanded={isExpanded}
        onDismissRequest={() => setIsExpanded(false)}
        cornerRadius={16}>
        <DropdownMenu.Trigger>
          <OutlinedButton onClick={() => setIsExpanded(true)}>
            <Text>Show menu</Text>
          </OutlinedButton>
        </DropdownMenu.Trigger>
        <DropdownMenu.Items>
          <DropdownMenuItem onClick={() => setIsExpanded(false)}>
            <DropdownMenuItem.Text>
              <Text>Item 1</Text>
            </DropdownMenuItem.Text>
          </DropdownMenuItem>
        </DropdownMenu.Items>
      </DropdownMenu>
    </Host>
  );
}

Shadow elevation

Use shadowElevation to set the popup shadow elevation in dp. Set it to 0 to remove the shadow, or omit it to use Material 3's default. Modifiers on DropdownMenu apply to the trigger container, so shadow modifiers do not change the popup shadow.

ShadowDropdownMenuExample.tsx
import {
  Host,
  DropdownMenu,
  DropdownMenuItem,
  OutlinedButton,
  Text,
} from '@expo/ui/jetpack-compose';
import { useState } from 'react';

export default function ShadowDropdownMenuExample() {
  const [isExpanded, setIsExpanded] = useState(false);
  return (
    <Host matchContents>
      <DropdownMenu
        expanded={isExpanded}
        onDismissRequest={() => setIsExpanded(false)}
        shadowElevation={1}>
        <DropdownMenu.Trigger>
          <OutlinedButton onClick={() => setIsExpanded(true)}>
            <Text>Show menu</Text>
          </OutlinedButton>
        </DropdownMenu.Trigger>
        <DropdownMenu.Items>
          <DropdownMenuItem onClick={() => setIsExpanded(false)}>
            <DropdownMenuItem.Text>
              <Text>Item 1</Text>
            </DropdownMenuItem.Text>
          </DropdownMenuItem>
        </DropdownMenu.Items>
      </DropdownMenu>
    </Host>
  );
}

Grouped menu

Use DropdownMenuPopup to show a Material 3 Expressive menu. It matches Compose's DropdownMenuPopup, which has no container of its own. The menu anchors to its parent, so put it in a Box next to the component that opens it. Put the items in DropdownMenuGroup components, with a 2 dp Spacer between the groups. The 2 dp height matches MenuDefaults.GroupSpacing in Compose.

GroupedDropdownMenuExample.tsx
import {
  Host,
  Box,
  DropdownMenuPopup,
  DropdownMenuGroup,
  DropdownMenuItem,
  OutlinedButton,
  Spacer,
  Text,
} from '@expo/ui/jetpack-compose';
import { height } from '@expo/ui/jetpack-compose/modifiers';
import { useState } from 'react';

export default function GroupedDropdownMenuExample() {
  const [isExpanded, setIsExpanded] = useState(false);
  return (
    <Host matchContents>
      <Box>
        <OutlinedButton onClick={() => setIsExpanded(true)}>
          <Text>Show menu</Text>
        </OutlinedButton>
        <DropdownMenuPopup
          expanded={isExpanded}
          onDismissRequest={() => setIsExpanded(false)}>
          <DropdownMenuGroup>
            <DropdownMenuItem onClick={() => setIsExpanded(false)}>
              <DropdownMenuItem.Text>
                <Text>Edit</Text>
              </DropdownMenuItem.Text>
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => setIsExpanded(false)}>
              <DropdownMenuItem.Text>
                <Text>Share</Text>
              </DropdownMenuItem.Text>
            </DropdownMenuItem>
          </DropdownMenuGroup>
          <Spacer modifiers={[height(2)]} />
          <DropdownMenuGroup>
            <DropdownMenuItem onClick={() => setIsExpanded(false)}>
              <DropdownMenuItem.Text>
                <Text>Settings</Text>
              </DropdownMenuItem.Text>
            </DropdownMenuItem>
          </DropdownMenuGroup>
        </DropdownMenuPopup>
      </Box>
    </Host>
  );
}

Selectable menu items

Use SelectableDropdownMenuItem for a choice of one option, such as a sort order. It matches Compose's SelectableDropdownMenuItem. A selected item gets a highlighted container and shows its SelectedLeadingIcon in place of its LeadingIcon.

SelectableDropdownMenuExample.tsx
import {
  Host,
  Box,
  DropdownMenuPopup,
  DropdownMenuGroup,
  SelectableDropdownMenuItem,
  OutlinedButton,
  Icon,
  Text,
} from '@expo/ui/jetpack-compose';
import { useState } from 'react';

const checkIcon = require('./assets/check.xml');
const options = ['Newest', 'Oldest', 'Popular'];

export default function SelectableDropdownMenuExample() {
  const [isExpanded, setIsExpanded] = useState(false);
  const [sortOrder, setSortOrder] = useState('Newest');
  return (
    <Host matchContents>
      <Box>
        <OutlinedButton onClick={() => setIsExpanded(true)}>
          <Text>{`Sort: ${sortOrder}`}</Text>
        </OutlinedButton>
        <DropdownMenuPopup
          expanded={isExpanded}
          onDismissRequest={() => setIsExpanded(false)}>
          <DropdownMenuGroup>
            {options.map(option => (
              <SelectableDropdownMenuItem
                key={option}
                selected={sortOrder === option}
                onClick={() => {
                  setSortOrder(option);
                  setIsExpanded(false);
                }}>
                <SelectableDropdownMenuItem.Text>
                  <Text>{option}</Text>
                </SelectableDropdownMenuItem.Text>
                <SelectableDropdownMenuItem.SelectedLeadingIcon>
                  <Icon source={checkIcon} size={20} />
                </SelectableDropdownMenuItem.SelectedLeadingIcon>
              </SelectableDropdownMenuItem>
            ))}
          </DropdownMenuGroup>
        </DropdownMenuPopup>
      </Box>
    </Host>
  );
}

Group and item shapes

By default, each DropdownMenuGroup and SelectableDropdownMenuItem has the shape of a single element. To join them into one stack, set the position of each element as { index, count }:

  • shapes on DropdownMenuGroup: the position of the group in the menu.
  • shape on DropdownMenuItem, or shapes on SelectableDropdownMenuItem: the position of the item in its group.

The first element gets rounder top corners, and the last element gets rounder bottom corners. A DropdownMenuItem without shape is the original Material 3 menu item.

<DropdownMenuPopup
  expanded={isExpanded}
  onDismissRequest={() => setIsExpanded(false)}>
  {/* Group 1 of 2, with 2 items */}
  <DropdownMenuGroup shapes={{ index: 0, count: 2 }}>
    <DropdownMenuItem shape={{ index: 0, count: 2 }}>
      <DropdownMenuItem.Text>
        <Text>Edit</Text>
      </DropdownMenuItem.Text>
    </DropdownMenuItem>
    <DropdownMenuItem shape={{ index: 1, count: 2 }}>
      <DropdownMenuItem.Text>
        <Text>Share</Text>
      </DropdownMenuItem.Text>
    </DropdownMenuItem>
  </DropdownMenuGroup>
  <Spacer modifiers={[height(2)]} />
  {/* Group 2 of 2, with 1 item */}
  <DropdownMenuGroup shapes={{ index: 1, count: 2 }}>
    <DropdownMenuItem shape={{ index: 0, count: 1 }}>
      <DropdownMenuItem.Text>
        <Text>Settings</Text>
      </DropdownMenuItem.Text>
    </DropdownMenuItem>
  </DropdownMenuGroup>
</DropdownMenuPopup>

API

import { DropdownMenu } from '@expo/ui/jetpack-compose';

Components

DropdownMenu

Android

Type: React.Element<DropdownMenuProps>

Props of the DropdownMenu component.

DropdownMenuProps

children

Android
Type: ReactNode

The contents of the submenu are used as an anchor for the dropdown menu. The children will be wrapped in a pressable element, which triggers opening of the dropdown menu.

color

Android
Optional • Type: ColorValue

The color of the container holding the dropdown menu items.

cornerRadius

Android
Optional • Type: number

Corner radius in dp for the dropdown menu container. Defaults to the Material3 MenuDefaults.shape corner radius.

expanded

Android
Optional • Type: boolean

Whether the dropdown menu is expanded (visible).

modifiers

Android
Optional • Type: ModifierConfig[]

Modifiers for the component.

onDismissRequest

Android
Optional • Type: () => void

Callback fired when the menu requests to be dismissed (e.g. tapping outside). Must be provided when expanded is true to allow the menu to close.

properties

Android
Optional • Type: PopupProperties

Properties for the popup window of the dropdown menu.

shadowElevation

Android
Optional • Type: number

Shadow elevation of the dropdown menu popup in dp. Set to 0 to remove the shadow. Defaults to Material3's MenuDefaults.ShadowElevation.

style

Android
Optional • Type: StyleProp<ViewStyle>

Optional styles to apply to the DropdownMenu.

DropdownMenuGroup

Android

Type: React.Element<DropdownMenuGroupProps>

A group of menu items that wraps Compose's DropdownMenuGroup, for use in a DropdownMenuPopup.

Props of the DropdownMenuGroup component.

DropdownMenuGroupProps

children

Android
Type: ReactNode

The contents of the group, typically DropdownMenuItem or SelectableDropdownMenuItem components.

containerColor

Android
Optional • Type: ColorValue

The container color of the group. Defaults to MenuDefaults.groupStandardContainerColor.

modifiers

Android
Optional • Type: ModifierConfig[]

Modifiers for the component.

shadowElevation

Android
Optional • Type: number

Shadow elevation of the group in dp. Defaults to MenuDefaults.ShadowElevation.

shapes

Android
Optional • Type: MenuShapePosition

The position of the group in the menu, which sets its shape through Compose's MenuDefaults.groupShape(index, count). Defaults to MenuDefaults.groupShapes(), the shape of a single group.

tonalElevation

Android
Optional • Type: number

Tonal elevation of the group in dp. Defaults to MenuDefaults.TonalElevation.

DropdownMenuItem

Android

Type: React.Element<DropdownMenuItemProps>

A dropdown menu item component that wraps Compose's DropdownMenuItem. Should be used inside DropdownMenu.Items or ExposedDropdownMenu.

Props of the DropdownMenuItem component.

DropdownMenuItemProps

children

Android
Optional • Type: ReactNode

Slot children for text, leading/trailing icons.

elementColors

Android
Optional • Type: DropdownMenuItemElementColors

Color overrides for the menu item.

enabled

Android
Optional • Type: boolean • Default: true

Whether the menu item is enabled.

modifiers

Android
Optional • Type: ModifierConfig[]

Modifiers for the component.

onClick

Android
Optional • Type: () => void

Callback that is called when the menu item is clicked.

shape

Android
Optional • Type: MenuShapePosition

The position of the item in its DropdownMenuGroup, which sets its shape through Compose's MenuDefaults.itemShape(index, count).shape. When set, the item is a Material 3 Expressive menu item and can show SupportingText.

DropdownMenuPopup

Android

Type: React.Element<DropdownMenuPopupProps>

A Material 3 Expressive menu that wraps Compose's DropdownMenuPopup. The menu anchors to its parent, so it goes in a Box next to the component that opens it. Unlike DropdownMenu, it has no container. It holds DropdownMenuGroup components, with a Spacer between the groups.

Props of the DropdownMenuPopup component.

DropdownMenuPopupProps

anchorPosition

Android
Optional • Literal type: string • Default: 'below'

The side of the anchor where the menu opens, through Compose's MenuAnchorPosition. When there is not sufficient space on that side, Compose moves the menu to a different side. Use 'end' for a submenu that opens next to its item.

Acceptable values are: 'start' | 'end' | 'left' | 'right' | 'below' | 'above'

children

Android
Type: ReactNode

The contents of the menu, typically DropdownMenuGroup components.

expanded

Android
Optional • Type: boolean

Whether the menu is expanded (visible).

modifiers

Android
Optional • Type: ModifierConfig[]

Modifiers for the contents of the menu.

onDismissRequest

Android
Optional • Type: () => void

Callback fired when the menu requests to be dismissed (for example, tapping outside). Must be provided when expanded is true to allow the menu to close.

properties

Android
Optional • Type: PopupProperties

Properties for the popup window of the menu.

Items

Android

Type: React.Element<{ children: ReactNode }>

Container for items displayed in the dropdown menu. Children should be DropdownMenuItem components or other native views.

Preview

Android

Type: React.Element<{ children: ReactNode }>

Preview content shown during long press (iOS only).

SelectableDropdownMenuItem

Android

Type: React.Element<SelectableDropdownMenuItemProps>

A Material 3 Expressive menu item that wraps Compose's SelectableDropdownMenuItem, for a choice of one option. A selected item gets a highlighted container and shows its SelectedLeadingIcon.

Props of the SelectableDropdownMenuItem component.

SelectableDropdownMenuItemProps

children

Android
Optional • Type: ReactNode

Slot children for the text, the icons, and the supporting text.

colors

Android
Optional • Type: SelectableDropdownMenuItemColors

Color overrides for the item.

enabled

Android
Optional • Type: boolean • Default: true

Whether the item is enabled.

modifiers

Android
Optional • Type: ModifierConfig[]

Modifiers for the component.

onClick

Android
Optional • Type: () => void

Callback that is called when the item is clicked.

selected

Android
Type: boolean

Whether the item is selected.

shapes

Android
Optional • Type: MenuShapePosition

The position of the item in its DropdownMenuGroup, which sets its shape through Compose's MenuDefaults.itemShape(index, count). Defaults to MenuDefaults.itemShapes(), the shape of a single item.

Trigger

Android

Type: React.Element<{ children: ReactNode }>

Container for the trigger element that opens the dropdown menu.

Types

DropdownMenuItemElementColors

Android

Color overrides for the DropdownMenuItem component.

PropertyTypeDescription
disabledLeadingIconColor(optional)ColorValue
-
disabledTextColor(optional)ColorValue

Color of the text when the menu item is disabled.

disabledTrailingIconColor(optional)ColorValue
-
leadingIconColor(optional)ColorValue
-
textColor(optional)ColorValue

Color of the menu item text.

trailingIconColor(optional)ColorValue
-

MenuShapePosition

Android

The position of a group in a DropdownMenuPopup, or of an item in a group. Compose's MenuDefaults.groupShape(index, count) and MenuDefaults.itemShape(index, count) use it to round the outer corners of the first and last element.

PropertyTypeDescription
countnumber

The number of groups in the menu, or of items in the group.

indexnumber

The index of the group in the menu, or of the item in its group.

PopupProperties

Android

Properties for the popup window, matching PopupProperties in Compose.

PropertyTypeDescription
clippingEnabled(optional)boolean

Whether the popup window is clipped to the screen boundaries. Set to false to let it extend beyond them, which positions the popup accurately.

Default:true
dismissOnBackPress(optional)boolean

Whether the popup can be dismissed by pressing the back button. Has no effect when focusable is false.

Default:true
dismissOnClickOutside(optional)boolean

Whether the popup can be dismissed by clicking outside of its bounds.

Default:true
focusable(optional)boolean

Whether the popup is focusable. When true, the popup receives IME events and key presses, such as the back button.

Default:true

SelectableDropdownMenuItemColors

Android

Color overrides for the SelectableDropdownMenuItem component. Each color defaults to the value of Compose's MenuDefaults.selectableItemColors().

PropertyTypeDescription
containerColor(optional)ColorValue
-
disabledContainerColor(optional)ColorValue
-
disabledLeadingIconColor(optional)ColorValue
-
disabledTextColor(optional)ColorValue
-
disabledTrailingContentColor(optional)ColorValue
-
leadingIconColor(optional)ColorValue
-
selectedContainerColor(optional)ColorValue
-
selectedLeadingIconColor(optional)ColorValue
-
selectedTextColor(optional)ColorValue
-
selectedTrailingContentColor(optional)ColorValue
-
textColor(optional)ColorValue
-
trailingContentColor(optional)ColorValue
-