@cdx-ui/components 0.2.3 → 0.2.5

package/docs/components/menu/content.md

@@ -0,0 +1,1254 @@
+# Menu (https://design.candescent.com/docs/components/menu)
+
+Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=7606-560), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/overlays-menu--default)
+
+`Menu` combines an anchored overlay with a reusable `Menu.Content` list surface. The same items can be commands, checkbox or radio options, or custom layouts, either on the page or anchored to a trigger.
+
+```tsx
+import { Menu } from '@cdx-ui/components';
+```
+
+## Basic
+
+Use `Menu.Item` for one-off commands that perform an action immediately and do not retain a checked state, such as opening a transfer flow or downloading a statement.
+
+```tsx
+import { useState } from 'react';
+import { Box, Button, Menu, Text } from '@cdx-ui/components';
+import { KeyboardArrowDown } from '@cdx-ui/icons';
+
+export default function MenuBasicDemo() {
+  const [result, setResult] = useState('Choose an account action');
+
+  return (
+    <Box className="items-start gap-2">
+      <Menu>
+        <Menu.Trigger asChild>
+          <Button variant="outline">
+            <Button.Label>Everyday Checking</Button.Label>
+            <Button.Icon as={KeyboardArrowDown} position="trailing" />
+          </Button>
+        </Menu.Trigger>
+        <Menu.Popup>
+          <Menu.Content accessibilityLabel="Everyday Checking actions">
+            <Menu.Item onPress={() => setResult('Opening account details')}>
+              <Menu.ItemLabel>View account details</Menu.ItemLabel>
+            </Menu.Item>
+            <Menu.Item onPress={() => setResult('Starting a transfer')}>
+              <Menu.ItemLabel>Transfer money</Menu.ItemLabel>
+            </Menu.Item>
+            <Menu.Item onPress={() => setResult('Preparing your latest statement')}>
+              <Menu.ItemLabel>Download statement</Menu.ItemLabel>
+            </Menu.Item>
+            <Menu.Separator />
+            <Menu.Item onPress={() => setResult('Opening alert preferences')}>
+              <Menu.ItemLabel>Manage alerts</Menu.ItemLabel>
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Popup>
+      </Menu>
+      <Text size="sm" color="secondary">
+        {result}
+      </Text>
+    </Box>
+  );
+}
+```
+
+## Checkbox items
+
+Use `Menu.CheckboxItem` when each option can be enabled independently, and compose `Menu.ItemIndicator` for a trailing check. The menu stays open after each toggle.
+
+```tsx
+import { useState } from 'react';
+import { Button, Menu } from '@cdx-ui/components';
+import { KeyboardArrowDown } from '@cdx-ui/icons';
+
+export default function MenuCheckboxItemsDemo() {
+  const [showBalances, setShowBalances] = useState(true);
+  const [includePending, setIncludePending] = useState(false);
+  const [maskAccountNumbers, setMaskAccountNumbers] = useState(true);
+  const enabledCount = [showBalances, includePending, maskAccountNumbers].filter(Boolean).length;
+
+  return (
+    <Menu>
+      <Menu.Trigger asChild>
+        <Button variant="outline">
+          <Button.Label>Account view · {enabledCount} enabled</Button.Label>
+          <Button.Icon as={KeyboardArrowDown} position="trailing" />
+        </Button>
+      </Menu.Trigger>
+      <Menu.Popup>
+        <Menu.Content accessibilityLabel="Account display preferences">
+          <Menu.CheckboxItem isChecked={showBalances} onChange={setShowBalances}>
+            <Menu.ItemLabel>Show available balances</Menu.ItemLabel>
+            <Menu.ItemIndicator />
+          </Menu.CheckboxItem>
+          <Menu.CheckboxItem isChecked={includePending} onChange={setIncludePending}>
+            <Menu.ItemLabel>Include pending transactions</Menu.ItemLabel>
+            <Menu.ItemIndicator />
+          </Menu.CheckboxItem>
+          <Menu.CheckboxItem isChecked={maskAccountNumbers} onChange={setMaskAccountNumbers}>
+            <Menu.ItemLabel>Mask account numbers</Menu.ItemLabel>
+            <Menu.ItemIndicator />
+          </Menu.CheckboxItem>
+        </Menu.Content>
+      </Menu.Popup>
+    </Menu>
+  );
+}
+```
+
+## Radio items
+
+Use `Menu.RadioGroup` and `Menu.RadioItem` when exactly one option may be active, and compose `Menu.ItemIndicator` to mark the current choice. The trigger reflects that choice after the menu closes.
+
+```tsx
+import { useState } from 'react';
+import { Button, Menu } from '@cdx-ui/components';
+import { KeyboardArrowDown } from '@cdx-ui/icons';
+
+const SORT_OPTIONS = [
+  { value: 'newest', label: 'Newest transactions first' },
+  { value: 'oldest', label: 'Oldest transactions first' },
+  { value: 'highest', label: 'Highest amount first' },
+] as const;
+
+export default function MenuRadioItemsDemo() {
+  const [sortBy, setSortBy] = useState('newest');
+  const selectedLabel =
+    SORT_OPTIONS.find(({ value }) => value === sortBy)?.label ?? SORT_OPTIONS[0].label;
+
+  return (
+    <Menu>
+      <Menu.Trigger asChild>
+        <Button variant="outline">
+          <Button.Label>{selectedLabel}</Button.Label>
+          <Button.Icon as={KeyboardArrowDown} position="trailing" />
+        </Button>
+      </Menu.Trigger>
+      <Menu.Popup>
+        <Menu.Content accessibilityLabel="Transaction sort order">
+          <Menu.RadioGroup value={sortBy} onChange={setSortBy}>
+            {SORT_OPTIONS.map(({ label, value }) => (
+              <Menu.RadioItem key={value} value={value}>
+                <Menu.ItemLabel>{label}</Menu.ItemLabel>
+                <Menu.ItemIndicator />
+              </Menu.RadioItem>
+            ))}
+          </Menu.RadioGroup>
+        </Menu.Content>
+      </Menu.Popup>
+    </Menu>
+  );
+}
+```
+
+## With icons
+
+Render `Menu.Content` on its own when the list is already on the page. The same items work inside `Menu.Popup` when they should anchor to a trigger.
+
+```tsx
+import { Menu } from '@cdx-ui/components';
+import { ContentCopy, Edit, Person } from '@cdx-ui/icons';
+
+export default function MenuWithIconsDemo() {
+  return (
+    <Menu>
+      <Menu.Content accessibilityLabel="Account menu">
+        <Menu.Item onPress={() => undefined}>
+          <Menu.ItemIcon as={Person} />
+          <Menu.ItemLabel>View profile</Menu.ItemLabel>
+        </Menu.Item>
+        <Menu.Item onPress={() => undefined}>
+          <Menu.ItemIcon as={Edit} />
+          <Menu.ItemLabel>Edit profile</Menu.ItemLabel>
+        </Menu.Item>
+        <Menu.Item onPress={() => undefined}>
+          <Menu.ItemIcon as={ContentCopy} />
+          <Menu.ItemLabel>Copy link</Menu.ItemLabel>
+        </Menu.Item>
+      </Menu.Content>
+    </Menu>
+  );
+}
+```
+
+## With shortcuts
+
+`Menu.ItemShortcut` is a visual hint for a keystroke. It does not register or handle that shortcut.
+
+```tsx
+import { Menu } from '@cdx-ui/components';
+
+export default function MenuWithShortcutsDemo() {
+  return (
+    <Menu.Content accessibilityLabel="Edit menu" className="w-full max-w-56">
+      <Menu.Item onPress={() => undefined}>
+        <Menu.ItemLabel>Undo</Menu.ItemLabel>
+        <Menu.ItemShortcut>⌘Z</Menu.ItemShortcut>
+      </Menu.Item>
+      <Menu.Item onPress={() => undefined}>
+        <Menu.ItemLabel>Redo</Menu.ItemLabel>
+        <Menu.ItemShortcut>⇧⌘Z</Menu.ItemShortcut>
+      </Menu.Item>
+      <Menu.Item onPress={() => undefined}>
+        <Menu.ItemLabel>Copy</Menu.ItemLabel>
+        <Menu.ItemShortcut>⌘C</Menu.ItemShortcut>
+      </Menu.Item>
+    </Menu.Content>
+  );
+}
+```
+
+## Destructive
+
+Set `color="danger"` on the action that removes or irreversibly changes something.
+
+```tsx
+import { Menu } from '@cdx-ui/components';
+import { Delete, Edit } from '@cdx-ui/icons';
+
+export default function MenuDestructiveDemo() {
+  return (
+    <Menu.Content accessibilityLabel="Account actions" className="w-full max-w-56">
+      <Menu.Item onPress={() => undefined}>
+        <Menu.ItemIcon as={Edit} />
+        <Menu.ItemLabel>Edit nickname</Menu.ItemLabel>
+      </Menu.Item>
+      <Menu.Separator />
+      <Menu.Item color="danger" onPress={() => undefined}>
+        <Menu.ItemIcon as={Delete} />
+        <Menu.ItemLabel>Delete account</Menu.ItemLabel>
+      </Menu.Item>
+    </Menu.Content>
+  );
+}
+```
+
+## Sections
+
+Use `Menu.SectionLabel` to name a group and `Menu.Separator` to divide groups. Neither is a menu item, so arrow keys skip them.
+
+```tsx
+import { Menu } from '@cdx-ui/components';
+
+export default function MenuSectionsDemo() {
+  return (
+    <Menu.Content accessibilityLabel="Account filters" className="w-full max-w-56">
+      <Menu.SectionLabel>Status</Menu.SectionLabel>
+      <Menu.Item onPress={() => undefined}>
+        <Menu.ItemLabel>Active</Menu.ItemLabel>
+      </Menu.Item>
+      <Menu.Item onPress={() => undefined}>
+        <Menu.ItemLabel>Pending</Menu.ItemLabel>
+      </Menu.Item>
+      <Menu.Separator />
+      <Menu.SectionLabel>Type</Menu.SectionLabel>
+      <Menu.Item onPress={() => undefined}>
+        <Menu.ItemLabel>Checking</Menu.ItemLabel>
+      </Menu.Item>
+      <Menu.Item onPress={() => undefined}>
+        <Menu.ItemLabel>Savings</Menu.ItemLabel>
+      </Menu.Item>
+    </Menu.Content>
+  );
+}
+```
+
+## Inset
+
+Set `inset` on items without an icon so their labels line up with icon items in the same menu.
+
+```tsx
+import { Menu } from '@cdx-ui/components';
+import { Edit, Person } from '@cdx-ui/icons';
+
+export default function MenuInsetDemo() {
+  return (
+    <Menu.Content accessibilityLabel="Profile actions" className="w-full max-w-56">
+      <Menu.Item onPress={() => undefined}>
+        <Menu.ItemIcon as={Person} />
+        <Menu.ItemLabel>View profile</Menu.ItemLabel>
+      </Menu.Item>
+      <Menu.Item inset onPress={() => undefined}>
+        <Menu.ItemLabel>Account settings</Menu.ItemLabel>
+      </Menu.Item>
+      <Menu.Item onPress={() => undefined}>
+        <Menu.ItemIcon as={Edit} />
+        <Menu.ItemLabel>Edit profile</Menu.ItemLabel>
+      </Menu.Item>
+    </Menu.Content>
+  );
+}
+```
+
+## Group header
+
+`Menu.GroupHeader` is a non-command row. Pair it with `Menu.ItemAction` when that row needs a button, such as clearing a selection. Arrow keys skip the header, and the button is its own tab stop.
+
+```tsx
+import { useState } from 'react';
+import { Button, Menu } from '@cdx-ui/components';
+
+export default function MenuGroupHeaderDemo() {
+  const [showPending, setShowPending] = useState(true);
+
+  return (
+    <Menu.Content accessibilityLabel="Transaction filters" className="w-full max-w-72">
+      <Menu.GroupHeader>
+        <Menu.ItemLabel>Filter by</Menu.ItemLabel>
+        <Menu.ItemAction>
+          <Button variant="ghost" size="small" onPress={() => setShowPending(false)}>
+            <Button.Label>Clear</Button.Label>
+          </Button>
+        </Menu.ItemAction>
+      </Menu.GroupHeader>
+      <Menu.Separator />
+      <Menu.CheckboxItem isChecked={showPending} onChange={setShowPending}>
+        <Menu.ItemControl />
+        <Menu.ItemLabel>Pending transactions</Menu.ItemLabel>
+      </Menu.CheckboxItem>
+    </Menu.Content>
+  );
+}
+```
+
+## Item control
+
+`Menu.ItemControl` draws presentational checkbox or radio chrome from the row's role. The row keeps the checked semantics, and the control is hidden from the accessibility tree. These rows stay open while the selection changes.
+
+```tsx
+import { useState } from 'react';
+import { Menu } from '@cdx-ui/components';
+
+export default function MenuItemControlDemo() {
+  const [pending, setPending] = useState(true);
+  const [posted, setPosted] = useState(false);
+  const [status, setStatus] = useState('open');
+
+  return (
+    <Menu.Content accessibilityLabel="Transaction filters" className="w-full max-w-64">
+      <Menu.SectionLabel>Activity</Menu.SectionLabel>
+      <Menu.CheckboxItem isChecked={pending} onChange={setPending}>
+        <Menu.ItemControl />
+        <Menu.ItemLabel>Pending</Menu.ItemLabel>
+      </Menu.CheckboxItem>
+      <Menu.CheckboxItem isChecked={posted} onChange={setPosted}>
+        <Menu.ItemControl />
+        <Menu.ItemLabel>Posted</Menu.ItemLabel>
+      </Menu.CheckboxItem>
+      <Menu.Separator />
+      <Menu.SectionLabel>Status</Menu.SectionLabel>
+      <Menu.RadioGroup value={status} onChange={setStatus}>
+        <Menu.RadioItem value="open">
+          <Menu.ItemControl />
+          <Menu.ItemLabel>Open</Menu.ItemLabel>
+        </Menu.RadioItem>
+        <Menu.RadioItem value="closed">
+          <Menu.ItemControl />
+          <Menu.ItemLabel>Closed</Menu.ItemLabel>
+        </Menu.RadioItem>
+      </Menu.RadioGroup>
+    </Menu.Content>
+  );
+}
+```
+
+## Item count
+
+Nest `Menu.ItemCount` inside `Menu.ItemLabel` on a row that includes `Menu.ItemControl` so the count uses secondary text and wraps with the label.
+
+```tsx
+import { useState } from 'react';
+import { Menu } from '@cdx-ui/components';
+
+const CATEGORIES = [
+  { id: 'admin', label: 'Administrative services', count: 21 },
+  { id: 'banking', label: 'Business banking & money movement', count: 10 },
+] as const;
+
+export default function MenuItemCountDemo() {
+  const [categories, setCategories] = useState<Record<string, boolean>>({ admin: true });
+
+  return (
+    <Menu.Content accessibilityLabel="Categories" className="w-full max-w-64">
+      {CATEGORIES.map((category) => (
+        <Menu.CheckboxItem
+          key={category.id}
+          isChecked={categories[category.id] ?? false}
+          onChange={(isChecked) =>
+            setCategories((current) => ({ ...current, [category.id]: isChecked }))
+          }
+        >
+          <Menu.ItemControl />
+          <Menu.ItemLabel>
+            {category.label} <Menu.ItemCount>{category.count}</Menu.ItemCount>
+          </Menu.ItemLabel>
+        </Menu.CheckboxItem>
+      ))}
+    </Menu.Content>
+  );
+}
+```
+
+## Item action
+
+Put a `Button` in `Menu.ItemAction` when a command row needs a trailing action. Pressing the button does not activate the row or dismiss the menu.
+
+```tsx
+import { useState } from 'react';
+import { Box, Button, Menu, Text } from '@cdx-ui/components';
+import { KeyboardArrowDown } from '@cdx-ui/icons';
+
+export default function MenuItemActionDemo() {
+  const [result, setResult] = useState('Choose an account action');
+
+  return (
+    <Box className="items-start gap-2">
+      <Menu>
+        <Menu.Trigger asChild>
+          <Button variant="outline">
+            <Button.Label>Everyday Checking</Button.Label>
+            <Button.Icon as={KeyboardArrowDown} position="trailing" />
+          </Button>
+        </Menu.Trigger>
+        <Menu.Popup className="w-full max-w-72">
+          <Menu.Content accessibilityLabel="Everyday Checking actions">
+            <Menu.Item onPress={() => setResult('Opening account details')}>
+              <Menu.ItemLabel>View details</Menu.ItemLabel>
+              <Menu.ItemAction>
+                <Button
+                  variant="ghost"
+                  size="small"
+                  onPress={() => setResult('Copied account number')}
+                >
+                  <Button.Label>Copy</Button.Label>
+                </Button>
+              </Menu.ItemAction>
+            </Menu.Item>
+            <Menu.Item onPress={() => setResult('Starting a transfer')}>
+              <Menu.ItemLabel>Transfer money</Menu.ItemLabel>
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Popup>
+      </Menu>
+      <Text size="sm" color="secondary">
+        {result}
+      </Text>
+    </Box>
+  );
+}
+```
+
+## With filters
+
+Compose a group header, section labels, checkbox rows, and radio groups when customers change several filters before dismissing the menu.
+
+```tsx
+import { useState } from 'react';
+import { Button, Menu } from '@cdx-ui/components';
+import { KeyboardArrowDown } from '@cdx-ui/icons';
+
+const CATEGORIES = [
+  { id: 'admin', label: 'Administrative services', count: 21 },
+  { id: 'banking', label: 'Business banking & money movement', count: 10 },
+  { id: 'growth', label: 'Engagement & growth', count: 5 },
+  { id: 'wellbeing', label: 'Financial wellbeing', count: 5 },
+  { id: 'security', label: 'Identity & business security', count: 5 },
+  { id: 'intelligence', label: 'Intelligence & connectivity', count: 1 },
+  { id: 'lending', label: 'Lending & credit', count: 3 },
+] as const;
+
+const STATUSES = [
+  { id: 'all', label: 'All statuses', count: 51 },
+  { id: 'available', label: 'Available', count: 45 },
+  { id: 'pilot', label: 'Ready for pilot', count: 2 },
+  { id: 'soon', label: 'Coming soon', count: 3 },
+] as const;
+
+const PROVIDERS = [
+  { id: 'all', label: 'All providers', count: 51 },
+  { id: 'partners', label: 'Partners', count: 36 },
+  { id: 'candescent', label: 'Candescent', count: 15 },
+] as const;
+
+export default function MenuWithFiltersDemo() {
+  const [categories, setCategories] = useState<Record<string, boolean>>({
+    admin: true,
+    banking: false,
+  });
+  const [status, setStatus] = useState('available');
+  const [provider, setProvider] = useState('all');
+
+  const clearFilters = () => {
+    setCategories({});
+    setStatus('all');
+    setProvider('all');
+  };
+
+  return (
+    <Menu>
+      <Menu.Trigger asChild>
+        <Button variant="outline">
+          <Button.Label>Catalog filters</Button.Label>
+          <Button.Icon as={KeyboardArrowDown} position="trailing" />
+        </Button>
+      </Menu.Trigger>
+      <Menu.Popup className="w-full max-w-72">
+        <Menu.Content accessibilityLabel="Catalog filters">
+          <Menu.GroupHeader>
+            <Menu.ItemLabel>Filter by</Menu.ItemLabel>
+            <Menu.ItemAction>
+              <Button variant="ghost" size="small" onPress={clearFilters}>
+                <Button.Label>Clear filters</Button.Label>
+              </Button>
+            </Menu.ItemAction>
+          </Menu.GroupHeader>
+          <Menu.Separator />
+          <Menu.SectionLabel>Categories</Menu.SectionLabel>
+          {CATEGORIES.map((category) => (
+            <Menu.CheckboxItem
+              key={category.id}
+              isChecked={categories[category.id] ?? false}
+              onChange={(isChecked) =>
+                setCategories((current) => ({ ...current, [category.id]: isChecked }))
+              }
+            >
+              <Menu.ItemControl />
+              <Menu.ItemLabel>
+                {category.label} <Menu.ItemCount>{category.count}</Menu.ItemCount>
+              </Menu.ItemLabel>
+            </Menu.CheckboxItem>
+          ))}
+          <Menu.Separator />
+          <Menu.SectionLabel>Status</Menu.SectionLabel>
+          <Menu.RadioGroup value={status} onChange={setStatus}>
+            {STATUSES.map((item) => (
+              <Menu.RadioItem key={item.id} value={item.id}>
+                <Menu.ItemControl />
+                <Menu.ItemLabel>
+                  {item.label} <Menu.ItemCount>{item.count}</Menu.ItemCount>
+                </Menu.ItemLabel>
+              </Menu.RadioItem>
+            ))}
+          </Menu.RadioGroup>
+          <Menu.Separator />
+          <Menu.SectionLabel>Providers</Menu.SectionLabel>
+          <Menu.RadioGroup value={provider} onChange={setProvider}>
+            {PROVIDERS.map((item) => (
+              <Menu.RadioItem key={item.id} value={item.id}>
+                <Menu.ItemControl />
+                <Menu.ItemLabel>
+                  {item.label} <Menu.ItemCount>{item.count}</Menu.ItemCount>
+                </Menu.ItemLabel>
+              </Menu.RadioItem>
+            ))}
+          </Menu.RadioGroup>
+        </Menu.Content>
+      </Menu.Popup>
+    </Menu>
+  );
+}
+```
+
+## Scrollable
+
+Use a scrollable radio menu when customers must choose one option from a longer set, such as a monthly statement period. The selected period persists, appears in the trigger, and remains checked when the menu reopens.
+
+```tsx
+import { useState } from 'react';
+import { Button, Menu } from '@cdx-ui/components';
+import { CalendarMonth, KeyboardArrowDown } from '@cdx-ui/icons';
+
+const STATEMENT_PERIODS = [
+  'August 2026',
+  'July 2026',
+  'June 2026',
+  'May 2026',
+  'April 2026',
+  'March 2026',
+  'February 2026',
+  'January 2026',
+  'December 2025',
+  'November 2025',
+  'October 2025',
+  'September 2025',
+] as const;
+
+export default function MenuScrollableDemo() {
+  const [selectedPeriod, setSelectedPeriod] = useState<string>(STATEMENT_PERIODS[0]);
+
+  return (
+    <Menu>
+      <Menu.Trigger asChild>
+        <Button variant="outline">
+          <Button.Label>Statement · {selectedPeriod}</Button.Label>
+          <Button.Icon as={KeyboardArrowDown} position="trailing" />
+        </Button>
+      </Menu.Trigger>
+      <Menu.Popup>
+        <Menu.Content scrollable accessibilityLabel="Statement period">
+          <Menu.RadioGroup value={selectedPeriod} onChange={setSelectedPeriod}>
+            {STATEMENT_PERIODS.map((period) => (
+              <Menu.RadioItem key={period} value={period}>
+                <Menu.ItemIcon as={CalendarMonth} />
+                <Menu.ItemLabel>{period}</Menu.ItemLabel>
+                <Menu.ItemIndicator />
+              </Menu.RadioItem>
+            ))}
+          </Menu.RadioGroup>
+        </Menu.Content>
+      </Menu.Popup>
+    </Menu>
+  );
+}
+```
+
+## Custom triggers
+
+Use `asChild` to open a menu from any pressable component, such as a button, chip, or icon button.
+
+```tsx
+import { Box, Button, Card, Chip, IconButton, ListItem, Menu, Text } from '@cdx-ui/components';
+import { AccountBalance, KeyboardArrowDown, MoreHoriz } from '@cdx-ui/icons';
+
+export default function MenuCustomTriggersDemo() {
+  return (
+    <Box className="w-full max-w-sm gap-6">
+      <Box className="items-start gap-2">
+        <Text color="secondary" size="sm">
+          Money movement
+        </Text>
+        <Menu>
+          <Menu.Trigger asChild>
+            <Button>
+              <Button.Label>Move money</Button.Label>
+              <Button.Icon as={KeyboardArrowDown} position="trailing" />
+            </Button>
+          </Menu.Trigger>
+          <Menu.Popup>
+            <Menu.Content accessibilityLabel="Move money">
+              <Menu.Item onPress={() => undefined}>
+                <Menu.ItemLabel>Transfer between accounts</Menu.ItemLabel>
+              </Menu.Item>
+              <Menu.Item onPress={() => undefined}>
+                <Menu.ItemLabel>Pay a bill</Menu.ItemLabel>
+              </Menu.Item>
+              <Menu.Item onPress={() => undefined}>
+                <Menu.ItemLabel>Send money</Menu.ItemLabel>
+              </Menu.Item>
+            </Menu.Content>
+          </Menu.Popup>
+        </Menu>
+      </Box>
+
+      <Box className="items-start gap-2">
+        <Text color="secondary" size="sm">
+          Account
+        </Text>
+        <Menu>
+          <Menu.Trigger asChild>
+            <Chip color="action" variant="outline">
+              <Chip.Icon as={AccountBalance} position="leading" />
+              <Chip.Label>Checking ••4821</Chip.Label>
+              <Chip.Icon as={KeyboardArrowDown} position="trailing" />
+            </Chip>
+          </Menu.Trigger>
+          <Menu.Popup>
+            <Menu.Content accessibilityLabel="Checking account actions">
+              <Menu.Item onPress={() => undefined}>
+                <Menu.ItemLabel>View account activity</Menu.ItemLabel>
+              </Menu.Item>
+              <Menu.Item onPress={() => undefined}>
+                <Menu.ItemLabel>Download statements</Menu.ItemLabel>
+              </Menu.Item>
+              <Menu.Item onPress={() => undefined}>
+                <Menu.ItemLabel>Manage alerts</Menu.ItemLabel>
+              </Menu.Item>
+            </Menu.Content>
+          </Menu.Popup>
+        </Menu>
+      </Box>
+
+      <Box className="gap-2">
+        <Text color="secondary" size="sm">
+          Card management
+        </Text>
+        <Card fullBleed>
+          <Card.Content>
+            <ListItem showSeparator={false}>
+              <ListItem.Content>
+                <ListItem.Title>Cash Rewards ••1842</ListItem.Title>
+              </ListItem.Content>
+              <ListItem.TrailingSlot>
+                <Menu placement="bottom-end">
+                  <Menu.Trigger asChild>
+                    <IconButton
+                      as={MoreHoriz}
+                      variant="ghost"
+                      size="small"
+                      accessibilityLabel="Cash Rewards card actions"
+                    />
+                  </Menu.Trigger>
+                  <Menu.Popup>
+                    <Menu.Content accessibilityLabel="Cash Rewards card actions">
+                      <Menu.Item onPress={() => undefined}>
+                        <Menu.ItemLabel>Lock card</Menu.ItemLabel>
+                      </Menu.Item>
+                      <Menu.Item onPress={() => undefined}>
+                        <Menu.ItemLabel>Replace card</Menu.ItemLabel>
+                      </Menu.Item>
+                      <Menu.Item color="danger" onPress={() => undefined}>
+                        <Menu.ItemLabel>Report lost or stolen</Menu.ItemLabel>
+                      </Menu.Item>
+                    </Menu.Content>
+                  </Menu.Popup>
+                </Menu>
+              </ListItem.TrailingSlot>
+            </ListItem>
+          </Card.Content>
+        </Card>
+      </Box>
+    </Box>
+  );
+}
+```
+
+## Side placements
+
+The default placement is `bottom-start`. Choose a side alone to center the popup, or append `-start` or `-end` to align it with the corresponding edge of the trigger.
+
+```tsx
+import { Box, Button, Menu, Text, type MenuProps } from '@cdx-ui/components';
+
+interface PlacementMenuProps {
+  placement: NonNullable<MenuProps['placement']>;
+}
+
+const PLACEMENT_GROUPS = [
+  {
+    label: 'Top',
+    placements: ['top-start', 'top', 'top-end'],
+  },
+  {
+    label: 'Right',
+    placements: ['right-start', 'right', 'right-end'],
+  },
+  {
+    label: 'Bottom',
+    placements: ['bottom-start', 'bottom', 'bottom-end'],
+  },
+  {
+    label: 'Left',
+    placements: ['left-start', 'left', 'left-end'],
+  },
+] as const satisfies readonly {
+  label: string;
+  placements: readonly PlacementMenuProps['placement'][];
+}[];
+
+function PlacementMenu({ placement }: PlacementMenuProps) {
+  return (
+    <Menu placement={placement}>
+      <Menu.Trigger asChild>
+        <Button variant="outline" size="small">
+          <Button.Label>{placement}</Button.Label>
+        </Button>
+      </Menu.Trigger>
+      <Menu.Popup>
+        <Menu.Content accessibilityLabel={`${placement} menu`}>
+          <Menu.Item onPress={() => undefined}>
+            <Menu.ItemLabel>View details</Menu.ItemLabel>
+          </Menu.Item>
+          <Menu.Item onPress={() => undefined}>
+            <Menu.ItemLabel>Copy link</Menu.ItemLabel>
+          </Menu.Item>
+        </Menu.Content>
+      </Menu.Popup>
+    </Menu>
+  );
+}
+
+export default function MenuPlacementDemo() {
+  return (
+    <Box className="w-140 gap-6">
+      {PLACEMENT_GROUPS.map(({ label, placements }) => (
+        <Box key={label} className="items-center gap-2">
+          <Text size="sm" color="secondary">
+            {label}
+          </Text>
+          <Box className="flex-row flex-wrap justify-center gap-2">
+            {placements.map((placement) => (
+              <PlacementMenu key={placement} placement={placement} />
+            ))}
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  );
+}
+```
+
+The requested side is preferred rather than guaranteed. At viewport boundaries the popup flips to the opposite side when that side has more room, then shifts along the cross axis to remain within the default 8 px collision boundary.
+
+## Automatic placements
+
+Use `auto` to select the fitting side with the most available space. `auto-start` and `auto-end` use the same side selection while preserving the requested alignment.
+
+```tsx
+import { Box, Button, Menu, type MenuProps } from '@cdx-ui/components';
+
+type AutomaticPlacement = Extract<
+  NonNullable<MenuProps['placement']>,
+  'auto' | 'auto-start' | 'auto-end'
+>;
+
+const AUTOMATIC_PLACEMENTS = [
+  'auto-start',
+  'auto',
+  'auto-end',
+] as const satisfies readonly AutomaticPlacement[];
+
+function AutomaticPlacementMenu({ placement }: Readonly<{ placement: AutomaticPlacement }>) {
+  return (
+    <Menu placement={placement}>
+      <Menu.Trigger asChild>
+        <Button variant="outline" size="small">
+          <Button.Label>{placement}</Button.Label>
+        </Button>
+      </Menu.Trigger>
+      <Menu.Popup>
+        <Menu.Content accessibilityLabel={`${placement} menu`}>
+          <Menu.Item onPress={() => undefined}>
+            <Menu.ItemLabel>View details</Menu.ItemLabel>
+          </Menu.Item>
+          <Menu.Item onPress={() => undefined}>
+            <Menu.ItemLabel>Copy link</Menu.ItemLabel>
+          </Menu.Item>
+        </Menu.Content>
+      </Menu.Popup>
+    </Menu>
+  );
+}
+
+export default function MenuAutomaticPlacementDemo() {
+  return (
+    <Box className="w-140 flex-row flex-wrap justify-center gap-3 py-20">
+      {AUTOMATIC_PLACEMENTS.map((placement) => (
+        <AutomaticPlacementMenu key={placement} placement={placement} />
+      ))}
+    </Box>
+  );
+}
+```
+
+All placements use a 4 px `offset` between the trigger and popup and a `crossOffset` of 0 by default. `offset` changes the main-axis gap, while `crossOffset` moves the popup along the perpendicular axis.
+
+## Disabled
+
+Set `disabled` to block activation and dim the item. Arrow keys skip disabled items.
+
+```tsx
+import { Menu } from '@cdx-ui/components';
+
+export default function MenuDisabledDemo() {
+  return (
+    <Menu.Content accessibilityLabel="Account actions" className="w-full max-w-64">
+      <Menu.Item onPress={() => undefined}>
+        <Menu.ItemLabel>Edit</Menu.ItemLabel>
+      </Menu.Item>
+      <Menu.Item disabled onPress={() => undefined}>
+        <Menu.ItemLabel>Archive (unavailable)</Menu.ItemLabel>
+      </Menu.Item>
+      <Menu.Item color="danger" disabled onPress={() => undefined}>
+        <Menu.ItemLabel>Delete</Menu.ItemLabel>
+      </Menu.Item>
+    </Menu.Content>
+  );
+}
+```
+
+## Custom items
+
+Menu item variants accept arbitrary children and style overrides, so an action or selectable item can use a richer layout while retaining its press, keyboard, and accessibility behavior.
+
+```tsx
+import { useState } from 'react';
+import { Box, Button, Card, Chip, HStack, Menu, Text } from '@cdx-ui/components';
+import { KeyboardArrowDown } from '@cdx-ui/icons';
+
+const ACCOUNTS = [
+  {
+    id: 'checking',
+    name: 'Everyday Checking',
+    number: '••4821',
+    balance: '$5,248.10',
+    status: 'Primary',
+    statusColor: 'action',
+  },
+  {
+    id: 'savings',
+    name: 'High-Yield Savings',
+    number: '••1098',
+    balance: '$24,680.32',
+    status: '2.25% APY',
+    statusColor: 'success',
+  },
+  {
+    id: 'business',
+    name: 'Business Checking',
+    number: '••7315',
+    balance: '$12,904.76',
+    status: 'Business',
+    statusColor: 'info',
+  },
+] as const;
+
+type AccountId = (typeof ACCOUNTS)[number]['id'];
+type Account = (typeof ACCOUNTS)[number];
+
+function AccountOption({ account }: Readonly<{ account: Account }>) {
+  return (
+    <Card className="flex-1">
+      <Card.Header>
+        <Box className="flex-1 gap-0.5">
+          <Text weight="semibold">{account.name}</Text>
+          <Text size="sm" color="secondary">
+            {account.number}
+          </Text>
+        </Box>
+        <Chip color={account.statusColor} size="small">
+          <Chip.Label>{account.status}</Chip.Label>
+        </Chip>
+      </Card.Header>
+      <Card.Content>
+        <HStack space="md" className="items-end justify-between">
+          <Text size="sm" color="secondary">
+            Available balance
+          </Text>
+          <Text weight="semibold">{account.balance}</Text>
+        </HStack>
+      </Card.Content>
+    </Card>
+  );
+}
+
+export default function MenuCustomItemsDemo() {
+  const [selectedAccountId, setSelectedAccountId] = useState<AccountId>('checking');
+  const selectedAccount = ACCOUNTS.find(({ id }) => id === selectedAccountId) ?? ACCOUNTS[0];
+
+  return (
+    <Menu>
+      <Menu.Trigger asChild>
+        <Button variant="outline">
+          <Button.Label>From {selectedAccount.name}</Button.Label>
+          <Button.Icon as={KeyboardArrowDown} position="trailing" />
+        </Button>
+      </Menu.Trigger>
+      <Menu.Popup className="w-full max-w-80">
+        <Menu.Content accessibilityLabel="Funding account">
+          <Menu.RadioGroup
+            value={selectedAccountId}
+            onChange={(value) => setSelectedAccountId(value as AccountId)}
+          >
+            {ACCOUNTS.map((account) => (
+              <Menu.RadioItem
+                key={account.id}
+                value={account.id}
+                accessibilityLabel={`${account.name} ${account.number}, available balance ${account.balance}`}
+              >
+                <AccountOption account={account} />
+              </Menu.RadioItem>
+            ))}
+          </Menu.RadioGroup>
+        </Menu.Content>
+      </Menu.Popup>
+    </Menu>
+  );
+}
+```
+
+## API
+
+### Menu
+
+Root for an overlay menu. Controls open state, preferred placement, and offsets for `Menu.Trigger` and `Menu.Popup`; omit it when rendering `Menu.Content` as a standalone list surface.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the root's own styles. |
+| `children?` | `ReactNode` | — | The `Menu.Trigger` and `Menu.Popup`. |
+| `isOpen?` | `boolean` | — | Controlled open state. When set, `defaultOpen` has no effect. |
+| `defaultOpen?` | `boolean` | `false` | Initial open state when uncontrolled. |
+| `onOpenChange?` | `((open: boolean) => void)` | — | Called with the next open state when the menu opens or closes. |
+| `disabled?` | `boolean` | `false` | Prevents the trigger from opening the menu. |
+| `placement?` | `'auto' \| 'auto-start' \| 'auto-end' \| 'top' \| 'top-start' \| 'top-end' \| 'right' \| 'right-start' \| 'right-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end'` | — | Preferred popup placement relative to the trigger. |
+| `offset?` | `number` | — | Distance between the trigger and popup in pixels. |
+| `crossOffset?` | `number` | — | Cross-axis adjustment from the aligned popup position in pixels. |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+## Sub-components
+
+### Menu.Trigger
+
+Pressable that opens and closes an overlay menu. Use `asChild` to merge trigger behavior onto an `IconButton`, `Button`, or another pressable element.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the trigger's own styles. |
+| `children?` | `ReactNode` | — | Trigger content (or the element to render when `asChild` is set). |
+| `asChild?` | `boolean` | — | Render the consumer's child element (for example a `Button`) as the trigger instead of the default `Pressable`. |
+
+Inherits all [`PressableProps`](https://reactnative.dev/docs/pressable#props).
+
+### Menu.Popup
+
+Cross-platform overlay container that escapes normal layout through a document-body portal on web and a transparent modal on native. It positions the menu around its trigger and handles outside-press dismissal.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the popup's own styles. |
+| `children?` | `ReactNode` | — | Popup content, typically a `Menu.Content`. |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+### Menu.Content
+
+Menu list surface. It can be rendered inside `Menu.Popup` or independently; overlay content scrolls automatically when constrained, while `scrollable` caps standalone surfaces. Use `asSurface` when another component owns the collection semantics.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the menu surface's own styles. |
+| `children?` | `ReactNode` | — | The menu's items, groups and separators. |
+| `scrollable?` | `boolean \| null` | `false` | Caps the surface height and scrolls its items. Content inside a `Menu.Popup` always scrolls. |
+| `onEscape?` | `(() => void)` | — | Called when Escape is pressed on web keyboard navigation. |
+| `asSurface?` | `boolean` | — | Visual-only surface without menu semantics (e.g. inside Select listbox). |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+### Menu.Item
+
+An individual pressable action. The `color` prop defaults to `neutral`; use `color="danger"` for destructive actions.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the item's own styles. |
+| `children?` | `ReactNode` | — | Item content, typically a `Menu.ItemLabel` with optional icon, shortcut and indicator slots. |
+| `color?` | `'neutral' \| 'danger'` | `'neutral'` | Color theme applied to the item content and interaction states. |
+| `inset?` | `boolean \| null` | `false` | Indents the item content so its label lines up with items that have a leading icon. |
+| `asChild?` | `boolean` | — | Render the consumer's child element in place of the default `Pressable` host. |
+| `closeOnSelect?` | `boolean` | — | Whether activation closes an overlay Menu. Defaults to true for overlay items. |
+
+Inherits all [`PressableProps`](https://reactnative.dev/docs/pressable#props).
+
+### Menu.CheckboxItem
+
+A controllable or uncontrolled menu option that toggles independently. Compose `Menu.ItemIndicator` to display its checked state.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the item's own styles. |
+| `children?` | `ReactNode` | — | Item content, typically a `Menu.ItemLabel` with optional icon, shortcut and indicator slots. |
+| `color?` | `'neutral' \| 'danger'` | `'neutral'` | Color theme applied to the item content and interaction states. |
+| `inset?` | `boolean \| null` | `false` | Indents the item content so its label lines up with items that have a leading icon. |
+| `isChecked?` | `boolean` | — | Controlled checked state. When set, `defaultIsChecked` has no effect. |
+| `closeOnSelect?` | `boolean` | — | Whether activation closes an overlay Menu. Defaults to true for overlay items. |
+| `asChild?` | `boolean` | — | Render the consumer's child element in place of the default `Pressable` host. |
+| `defaultIsChecked?` | `boolean` | — | Initial checked state when uncontrolled. |
+| `onChange?` | `((isChecked: boolean) => void)` | — | Called with the new checked state when the user toggles the item. |
+
+Inherits all [`PressableProps`](https://reactnative.dev/docs/pressable#props).
+
+### Menu.RadioGroup
+
+Coordinates exclusive selection across `Menu.RadioItem` children.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the group's own styles. |
+| `children?` | `ReactNode` | — | The `Menu.RadioItem` options in the group. |
+| `asChild?` | `boolean` | — | Render the consumer's child element in place of the default `View` host. |
+| `value?` | `string` | — | Controlled `value` of the selected `Menu.RadioItem`. When set, `defaultValue` has no effect. |
+| `defaultValue?` | `string` | — | Initially selected `value` when uncontrolled. |
+| `onChange?` | `((value: string) => void)` | — | Called with the `value` of the item the user selects. |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+### Menu.RadioItem
+
+An exclusively selectable option within `Menu.RadioGroup`. Compose `Menu.ItemIndicator` to display its checked state.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the item's own styles. |
+| `children?` | `ReactNode` | — | Item content, typically a `Menu.ItemLabel` with optional icon, shortcut and indicator slots. |
+| `color?` | `'neutral' \| 'danger'` | `'neutral'` | Color theme applied to the item content and interaction states. |
+| `inset?` | `boolean \| null` | `false` | Indents the item content so its label lines up with items that have a leading icon. |
+| `closeOnSelect?` | `boolean` | — | Whether activation closes an overlay Menu. Defaults to true for overlay items. |
+| `asChild?` | `boolean` | — | Render the consumer's child element in place of the default `Pressable` host. |
+| `value` | `string` | — | Identifies this item within its `Menu.RadioGroup`. |
+
+Inherits all [`PressableProps`](https://reactnative.dev/docs/pressable#props).
+
+### Menu.ItemLabel
+
+Text label rendered inside a `Menu.Item`.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the label's own styles. |
+| `children?` | `ReactNode` | — | Label text. |
+| `asChild?` | `boolean` | — | Render the consumer's child element in place of the default `Text` host. |
+| `isChecked?` | `boolean` | — | Checked state when used outside a selectable Menu item (e.g. `Select.ItemLabel`). |
+
+Inherits all [`TextProps`](https://reactnative.dev/docs/text#props).
+
+### Menu.ItemIcon
+
+Decorative Forge icon rendered inside a `Menu.Item`.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the icon's own styles. |
+| `children?` | `ReactNode` | — | The element to render when `asChild` is set. |
+| `filled?` | `boolean` | — | When `true`, renders the filled variant of the icon (if available). Defaults to `false` (outlined). |
+| `size?` | `string \| number` | — | Width and height of the icon, in pixels or any SVG length. The bare icon renders at 24 when omitted. |
+| `data-testid?` | `string` | — | Test identifier forwarded to the rendered SVG. |
+| `as?` | `ForgeIcon` | — | The `@cdx-ui/icons` component to render. |
+| `asChild?` | `boolean` | — | Render the consumer's child element in place of the icon. |
+| `position?` | `'leading' \| 'trailing'` | `'leading'` | Side of the label the icon sits on; sets the spacing between them. |
+
+Inherits all `ForgeIconProps` (react-native-svg `SvgProps` plus `filled` and `size`).
+
+### Menu.ItemIndicator
+
+Decorative checked-state icon for `Menu.CheckboxItem` and `Menu.RadioItem`.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the indicator's own styles. |
+| `children?` | `ReactNode` | — | The element to render when `asChild` is set. |
+| `filled?` | `boolean` | — | When `true`, renders the filled variant of the icon (if available). Defaults to `false` (outlined). |
+| `size?` | `string \| number` | — | Width and height of the icon, in pixels or any SVG length. The bare icon renders at 24 when omitted. |
+| `data-testid?` | `string` | — | Test identifier forwarded to the rendered SVG. |
+| `as?` | `ForgeIcon` | `Check` | The `@cdx-ui/icons` component to render. |
+| `asChild?` | `boolean` | — | Render the consumer's child element in place of the icon. |
+| `isChecked?` | `boolean` | — | Shows the indicator. Defaults to the checked state of the enclosing item. |
+| `position?` | `'leading' \| 'trailing'` | `'trailing'` | Side of the label the indicator sits on; sets the spacing between them. |
+
+Inherits all `ForgeIconProps` (react-native-svg `SvgProps` plus `filled` and `size`).
+
+### Menu.ItemShortcut
+
+Decorative text hint for a keyboard shortcut. This slot does not register or handle the shortcut.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the shortcut's own styles. |
+| `children?` | `ReactNode` | — | Shortcut hint text, such as `⌘C`. |
+| `asChild?` | `boolean` | — | Render the consumer's child element in place of the default `Text` host. |
+
+Inherits all [`TextProps`](https://reactnative.dev/docs/text#props).
+
+### Menu.GroupHeader
+
+Non-interactive header row for filter panels. Host a trailing `Menu.ItemAction` button; this slot is not a command `menuitem` and is skipped by arrow-key roving.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the group header's own styles. |
+| `children?` | `ReactNode` | — | Header content, typically a `Menu.ItemLabel` and an optional `Menu.ItemAction`. |
+| `asChild?` | `boolean` | — | Render the consumer's child element in place of the default `View` host. |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+### Menu.ItemAction
+
+Trailing action slot that isolates press from the parent row so a nested `Button` does not activate or dismiss the menu.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the action's own styles. |
+| `children?` | `ReactNode` | — | The trailing interactive control, such as a `Button`. |
+| `asChild?` | `boolean` | — | Render the consumer's child element in place of the default `View` host. |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+### Menu.ItemControl
+
+Presentational Checkbox or Radio chrome for filter rows. Hidden from the accessibility tree; the parent checkbox or radio item owns checked semantics.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the control's own styles. |
+| `children?` | `ReactNode` | — | Not rendered; the control draws a checkbox or radio that mirrors the enclosing item. |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+### Menu.ItemCount
+
+Tertiary count rendered after a filter-row label. Nest it inside `Menu.ItemLabel` so it wraps with the text.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the count's own styles. |
+| `children?` | `ReactNode` | — | The count to display. |
+| `asChild?` | `boolean` | — | Render the consumer's child element in place of the default `Text` host. |
+
+Inherits all [`TextProps`](https://reactnative.dev/docs/text#props).
+
+### Menu.SectionLabel
+
+Non-interactive heading used to label a group of related menu items.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the section label's own styles. |
+| `children?` | `ReactNode` | — | Section heading text. |
+| `asChild?` | `boolean` | — | Render the consumer's child element in place of the default `Text` host. |
+
+Inherits all [`TextProps`](https://reactnative.dev/docs/text#props).
+
+### Menu.Separator
+
+Non-interactive divider between groups of menu items.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the separator's own styles. |
+| `children?` | `ReactNode` | — | Not rendered; the separator draws its own line. |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+## Anatomy
+
+| `data-slot`           | Element                       |
+| --------------------- | ----------------------------- |
+| `menu`                | Overlay root                  |
+| `menu-trigger`        | Overlay trigger               |
+| `menu-popup`          | Positioned overlay container  |
+| `menu-content`        | Menu list surface             |
+| `menu-item`           | Pressable action              |
+| `menu-checkbox-item`  | Independently checked option  |
+| `menu-radio-group`    | Exclusive option group        |
+| `menu-radio-item`     | Exclusively checked option    |
+| `menu-item-label`     | Item label                    |
+| `menu-item-icon`      | Item icon                     |
+| `menu-item-shortcut`  | Keyboard shortcut hint        |
+| `menu-item-indicator` | Checked-state indicator       |
+| `menu-item-action`    | Trailing row action           |
+| `menu-item-control`   | Presentational filter control |
+| `menu-item-count`     | Filter-row count              |
+| `menu-group-header`   | Non-command header row        |
+| `menu-section-label`  | Section heading               |
+| `menu-separator`      | Group divider                 |
+
+## Accessibility
+
+`Menu.Content` uses `role="menu"`, actions use `role="menuitem"`, checkbox items use `role="menuitemcheckbox"`, and radio items use `role="menuitemradio"`. Selectable items expose `aria-checked`; disabled items expose disabled state. In an overlay, the trigger exposes the open state and labels the menu content.
+
+`Menu.GroupHeader`, `Menu.SectionLabel`, and `Menu.Separator` are not menu items and are skipped by arrow keys. A button in `Menu.ItemAction` on the header is a separate tab stop. `Menu.ItemControl` and `Menu.ItemIndicator` are presentational and hidden from the accessibility tree; the row owns the checked state. `Menu.ItemShortcut` is hidden as well.
+
+On web, Arrow Up and Arrow Down move through enabled items, Home and End move to the first and last items, Enter or Space activates the focused item, Escape closes and restores trigger focus, and Tab closes before continuing from the trigger’s document position.