1---
2title: Use Native Menus for Dropdowns and Context Menus
3impact: HIGH
4impactDescription: native accessibility, platform-consistent UX
5tags: user-interface, menus, context-menus, zeego, accessibility
6---
7 
8## Use Native Menus for Dropdowns and Context Menus
9 
10Use native platform menus instead of custom JS implementations. Native menus
11provide built-in accessibility, consistent platform UX, and better performance.
12Use [zeego](https://zeego.dev) for cross-platform native menus.
13 
14**Incorrect (custom JS menu):**
15 
16```tsx
17import { useState } from 'react'
18import { View, Pressable, Text } from 'react-native'
19 
20function MyMenu() {
21  const [open, setOpen] = useState(false)
22 
23  return (
24    <View>
25      <Pressable onPress={() => setOpen(!open)}>
26        <Text>Open Menu</Text>
27      </Pressable>
28      {open && (
29        <View style={{ position: 'absolute', top: 40 }}>
30          <Pressable onPress={() => console.log('edit')}>
31            <Text>Edit</Text>
32          </Pressable>
33          <Pressable onPress={() => console.log('delete')}>
34            <Text>Delete</Text>
35          </Pressable>
36        </View>
37      )}
38    </View>
39  )
40}
41```
42 
43**Correct (native menu with zeego):**
44 
45```tsx
46import * as DropdownMenu from 'zeego/dropdown-menu'
47 
48function MyMenu() {
49  return (
50    <DropdownMenu.Root>
51      <DropdownMenu.Trigger>
52        <Pressable>
53          <Text>Open Menu</Text>
54        </Pressable>
55      </DropdownMenu.Trigger>
56 
57      <DropdownMenu.Content>
58        <DropdownMenu.Item key='edit' onSelect={() => console.log('edit')}>
59          <DropdownMenu.ItemTitle>Edit</DropdownMenu.ItemTitle>
60        </DropdownMenu.Item>
61 
62        <DropdownMenu.Item
63          key='delete'
64          destructive
65          onSelect={() => console.log('delete')}
66        >
67          <DropdownMenu.ItemTitle>Delete</DropdownMenu.ItemTitle>
68        </DropdownMenu.Item>
69      </DropdownMenu.Content>
70    </DropdownMenu.Root>
71  )
72}
73```
74 
75**Context menu (long-press):**
76 
77```tsx
78import * as ContextMenu from 'zeego/context-menu'
79 
80function MyContextMenu() {
81  return (
82    <ContextMenu.Root>
83      <ContextMenu.Trigger>
84        <View style={{ padding: 20 }}>
85          <Text>Long press me</Text>
86        </View>
87      </ContextMenu.Trigger>
88 
89      <ContextMenu.Content>
90        <ContextMenu.Item key='copy' onSelect={() => console.log('copy')}>
91          <ContextMenu.ItemTitle>Copy</ContextMenu.ItemTitle>
92        </ContextMenu.Item>
93 
94        <ContextMenu.Item key='paste' onSelect={() => console.log('paste')}>
95          <ContextMenu.ItemTitle>Paste</ContextMenu.ItemTitle>
96        </ContextMenu.Item>
97      </ContextMenu.Content>
98    </ContextMenu.Root>
99  )
100}
101```
102 
103**Checkbox items:**
104 
105```tsx
106import * as DropdownMenu from 'zeego/dropdown-menu'
107 
108function SettingsMenu() {
109  const [notifications, setNotifications] = useState(true)
110 
111  return (
112    <DropdownMenu.Root>
113      <DropdownMenu.Trigger>
114        <Pressable>
115          <Text>Settings</Text>
116        </Pressable>
117      </DropdownMenu.Trigger>
118 
119      <DropdownMenu.Content>
120        <DropdownMenu.CheckboxItem
121          key='notifications'
122          value={notifications}
123          onValueChange={() => setNotifications((prev) => !prev)}
124        >
125          <DropdownMenu.ItemIndicator />
126          <DropdownMenu.ItemTitle>Notifications</DropdownMenu.ItemTitle>
127        </DropdownMenu.CheckboxItem>
128      </DropdownMenu.Content>
129    </DropdownMenu.Root>
130  )
131}
132```
133 
134**Submenus:**
135 
136```tsx
137import * as DropdownMenu from 'zeego/dropdown-menu'
138 
139function MenuWithSubmenu() {
140  return (
141    <DropdownMenu.Root>
142      <DropdownMenu.Trigger>
143        <Pressable>
144          <Text>Options</Text>
145        </Pressable>
146      </DropdownMenu.Trigger>
147 
148      <DropdownMenu.Content>
149        <DropdownMenu.Item key='home' onSelect={() => console.log('home')}>
150          <DropdownMenu.ItemTitle>Home</DropdownMenu.ItemTitle>
151        </DropdownMenu.Item>
152 
153        <DropdownMenu.Sub>
154          <DropdownMenu.SubTrigger key='more'>
155            <DropdownMenu.ItemTitle>More Options</DropdownMenu.ItemTitle>
156          </DropdownMenu.SubTrigger>
157 
158          <DropdownMenu.SubContent>
159            <DropdownMenu.Item key='settings'>
160              <DropdownMenu.ItemTitle>Settings</DropdownMenu.ItemTitle>
161            </DropdownMenu.Item>
162 
163            <DropdownMenu.Item key='help'>
164              <DropdownMenu.ItemTitle>Help</DropdownMenu.ItemTitle>
165            </DropdownMenu.Item>
166          </DropdownMenu.SubContent>
167        </DropdownMenu.Sub>
168      </DropdownMenu.Content>
169    </DropdownMenu.Root>
170  )
171}
172```
173 
174Reference: [Zeego Documentation](https://zeego.dev/components/dropdown-menu)
175