Cursor rule

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