Dropdown Menu

A dropdown menu displays a menu of items or actions that directly relate to the button's purpose.

Pro component

Requires all-access to use the source code

👀 See It Live!Scan the QR code to try this component on your device!

import * as React from 'react';
import { Platform, View } from 'react-native';

import { Button } from '@/components/nativewindui/Button';
import { DropdownMenu } from '@/components/nativewindui/DropdownMenu';
import { createDropdownItem, createDropdownSubMenu } from '@/components/nativewindui/DropdownMenu/utils';
import { Text } from '@/components/nativewindui/Text';

export default function Screen() {
  const [isCompleted, setIsCompleted] = React.useState(false);
  const [isPinned, setIsPinned] = React.useState(false);

  const projectContextMenuItems = React.useMemo(
    () => [
      createDropdownItem({
        actionKey: 'mark-as-completed',
        title: isCompleted ? 'Unmark as Completed' : 'Mark as Completed',
        state: { checked: isCompleted },
        keepOpenOnPress: true,
      }),

      ...(Platform.OS === 'ios'
        ? [
            createDropdownSubMenu(
              {
                title: 'More',
              },
              [
                createDropdownItem({
                  actionKey: 'pin',
                  title: isPinned ? 'Unpin' : 'Pin',
                  icon: { name: isPinned ? 'pin.fill' : 'pin' },
                }),
                createDropdownItem({
                  actionKey: 'forward',
                  title: 'Forward',
                  icon: { name: 'arrowshape.turn.up.right' },
                }),
                createDropdownItem({
                  actionKey: 'delete',
                  title: 'Delete',
                  destructive: true,
                  icon: { name: 'trash', className: 'text-destructive' },
                }),
              ]
            ),
          ]
        : [
            createDropdownItem({
              actionKey: 'pin',
              title: isPinned ? 'Unpin' : 'Pin',
              icon: { name: isPinned ? 'pin.fill' : 'pin' },
              keepOpenOnPress: true,
            }),
            createDropdownItem({
              actionKey: 'forward',
              title: 'Forward',
              icon: { name: 'arrowshape.turn.up.right' },
            }),
            createDropdownItem({
              actionKey: 'delete',
              title: 'Delete',
              destructive: true,
              icon: { name: 'trash', className: 'text-destructive' },
            }),
          ]),
      createDropdownSubMenu(
        {
          title: 'Share',
          iOSItemSize: 'small',
          iOSType: 'inline',
        },
        [
          createDropdownItem({
            actionKey: 'link',
            title: 'Link',
            icon: { name: 'link' },
          }),
          createDropdownItem({
            actionKey: 'email',
            title: 'Email',
            icon: { name: 'envelope' },
          }),
          createDropdownItem({
            actionKey: 'message',
            title: 'Message',
            icon: { name: 'message' },
          }),
        ]
      ),
    ],
    [isCompleted, isPinned]
  );

  return (
    <>
      <View className="mb-32 flex-1 items-center justify-center gap-8 p-8">
        <DropdownMenu
          title="Options"
          items={projectContextMenuItems}
          materialMinWidth={240}
          onItemPress={(item) => {
            if (item.actionKey === 'pin') {
              setIsPinned((prev) => !prev);
            }
            if (item.actionKey === 'mark-as-completed') {
              setIsCompleted((prev) => !prev);
            }
          }}>
          <Button>
            <Text>Open Project Options</Text>
          </Button>
        </DropdownMenu>
      </View>
    </>
  );
}

Unlock All Pro Templates & Components

Elevate your app with powerful, native-feeling components and templates. Build faster with beautiful ready-to-use designs.

Get all-access

Usage

The child component needs to accept Pressable props to ensure compatibility on Android.

import { DropdownMenu } from '@/components/nativewindui/DropdownMenu';
import {
  createDropdownItem,
  createDropdownSubMenu,
} from '@/components/nativewindui/DropdownMenu/utils';

<DropdownMenu
  items={[
    createDropdownItem({
      actionKey: 'first',
      title: 'Item 1',
    }),
    createDropdownSubMenu({ title: 'Submenu 1', iOSItemSize: 'small' }, [
      createDropdownItem({
        actionKey: 'sub-first',
        title: 'Sub Item 1',
      }),
      createDropdownItem({
        actionKey: 'sub-second',
        title: 'Sub Item 2',
      }),
    ]),
  ]}
  onItemPress={(item) => {
    console.log('Item Pressed', item);
  }}>
  <Button>
    <Text>Open Dropdown</Text>
  </Button>
</DropdownMenu>

Props

DropdownMenu

Inherits all the props from React Native's View component.

Prop	Type	Default	Description
title	string		The title of the dropdown menu.
items	(DropdownItem \| DropdownSubMenu)[]		The items or submenus to display in the dropdown.
iOSItemSize	'small' \| 'medium' \| 'large'		The preferred item size on iOS.
children	React.ReactNode		The child component to render inside the dropdown menu. It needs to accept Pressable props to ensure compatibility on Android
onItemPress	(item: Omit<DropdownItem, 'icon'>) => void		Callback function triggered when an item is pressed.
enabled	boolean	true	Whether the dropdown menu is enabled.
materialPortalHost	string		The host for the Android portal.
materialSideOffset	number	2	Side offset for Android dropdown.
materialAlignOffset	number		Alignment offset for Android dropdown.
materialAlign	'start' \| 'center' \| 'end'		Alignment for Android dropdown.
materialWidth	number		Width for the Android dropdown.
materialMinWidth	number		Minimum width for the Android dropdown.
materialLoadingText	string		Text to display while the dropdown is loading.
materialSubMenuTitlePlaceholder	string		Placeholder title for the Android submenu.
materialOverlayClassName	string		Class name for the Android overlay.

Utils

createDropdownSubMenu: A utility function to create a dropdown sub-menu.

createDropdownItem: A utility function to create a dropdown item.

import { createDropdownSubMenu, createDropdownItem } from '@/components/nativewindui/DropdownMenu/utils';

const MENU = [
createDropdownSubMenu({ title: 'Submenu' }, [
  createDropdownItem({ actionKey: '1', title: 'Item 1' }),
  createDropdownItem({ actionKey: '2', title: 'Item 2' }),
]),
];

Dropdown Menu

Try It Live

Try It Live

Add the following dependencies to your project:

Usage

Props

Utils

NativewindUI