Skip to main content

Documentation Index

Fetch the complete documentation index at: https://copylabs.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

​
DropdownMenu

DropdownMenu is an overlay component for displaying a list of actions or options in a dropdown menu.

​
Import

import { DropdownMenu } from 'radix-native-ui';

​
Usage

import { DropdownMenu, IconButton, Text } from 'radix-native-ui';

<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <IconButton>
      <Icon name="more-vertical" />
    </IconButton>
  </DropdownMenu.Trigger>

  <DropdownMenu.Content>
    <DropdownMenu.Item>
      <Text>Edit</Text>
    </DropdownMenu.Item>
    <DropdownMenu.Item>
      <Text>Duplicate</Text>
    </DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item color="red">
      <Text>Delete</Text>
    </DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

​
Components

The root container component that manages menu state. Element that opens the menu.

​
DropdownMenu.Content

The menu content container. Individual menu item. Group of related items. Checkable menu item. Group of mutually exclusive items. Radio-style menu item. Nested submenu. Trigger for a submenu. Content for a submenu. Renders menu content in a Modal. Backdrop for menu. Closes menu when pressed. Icon button trigger for the menu.

​
Props

​
DropdownMenu.Content

​
Haptic Feedback

Dropdown menu triggers and items provide haptic feedback by default. You can disable this with the hapticFeedback prop: 
<DropdownMenu.Root>
  <DropdownMenu.Trigger hapticFeedback={false}>
    <Button>No haptic on open</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item hapticFeedback={false}>No haptic on select</DropdownMenu.Item>
    <DropdownMenu.Item>With haptic</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

​
Examples

​
Basic Menu

<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <Button>Options</Button>
  </DropdownMenu.Trigger>

  <DropdownMenu.Content>
    <DropdownMenu.Item>Edit</DropdownMenu.Item>
    <DropdownMenu.Item>Duplicate</DropdownMenu.Item>
    <DropdownMenu.Item>Share</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

​
With Separator

<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <IconButton>
      <Icon name="more-vertical" />
    </IconButton>
  </DropdownMenu.Trigger>

  <DropdownMenu.Content>
    <DropdownMenu.Item>Edit</DropdownMenu.Item>
    <DropdownMenu.Item>Duplicate</DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item color="red">Delete</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

​
With Labels

<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <Button>Actions</Button>
  </DropdownMenu.Trigger>

  <DropdownMenu.Content>
    <DropdownMenu.Label>Edit</DropdownMenu.Label>
    <DropdownMenu.Item>Cut</DropdownMenu.Item>
    <DropdownMenu.Item>Copy</DropdownMenu.Item>
    <DropdownMenu.Item>Paste</DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Label>Share</DropdownMenu.Label>
    <DropdownMenu.Item>Email</DropdownMenu.Item>
    <DropdownMenu.Item>Message</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

​
With Icons

<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <IconButton>
      <Icon name="more-horizontal" />
    </IconButton>
  </DropdownMenu.Trigger>

  <DropdownMenu.Content>
    <DropdownMenu.Item>
      <Flex gap={2} align="center">
        <Icon name="pencil" />
        <Text>Edit</Text>
      </Flex>
    </DropdownMenu.Item>
    <DropdownMenu.Item>
      <Flex gap={2} align="center">
        <Icon name="copy" />
        <Text>Duplicate</Text>
      </Flex>
    </DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item color="red">
      <Flex gap={2} align="center">
        <Icon name="trash" />
        <Text>Delete</Text>
      </Flex>
    </DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

​
With Checkbox Items

<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <Button>View Options</Button>
  </DropdownMenu.Trigger>

  <DropdownMenu.Content>
    <DropdownMenu.CheckboxItem checked>
      <Text>Show Sidebar</Text>
    </DropdownMenu.CheckboxItem>
    <DropdownMenu.CheckboxItem checked={false}>
      <Text>Show Toolbar</Text>
    </DropdownMenu.CheckboxItem>
    <DropdownMenu.CheckboxItem checked>
      <Text>Show Status Bar</Text>
    </DropdownMenu.CheckboxItem>
  </DropdownMenu.Content>
</DropdownMenu.Root>

​
User Menu

<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <Avatar src="https://i.pravatar.cc/150" fallback="JD" />
  </DropdownMenu.Trigger>

  <DropdownMenu.Content>
    <DropdownMenu.Label>
      <Flex direction="column">
        <Text weight="medium">John Doe</Text>
        <Text size={1} color="gray">john@example.com</Text>
      </Flex>
    </DropdownMenu.Label>
    <DropdownMenu.Separator />
    <DropdownMenu.Item>Profile</DropdownMenu.Item>
    <DropdownMenu.Item>Settings</DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item color="red">Sign Out</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>