import { Menu, Button, Text, Paper } from 'react-native-mantine';

const MyComponent = () => {
  return (
    <Menu>
      <Menu.Target>
        <Button>Open Menu</Button>
      </Menu.Target>

      <Menu.Dropdown>
        <Paper shadow="md" p={0}>
          <Menu.Item onPress={() => console.log('Item 1')}>
            <Text>Menu Item 1</Text>
          </Menu.Item>
          <Menu.Item onPress={() => console.log('Item 2')}>
            <Text>Menu Item 2</Text>
          </Menu.Item>
          <Menu.Divider />
          <Menu.Item color="red">
            <Text>Delete</Text>
          </Menu.Item>
        </Paper>
      </Menu.Dropdown>
    </Menu>
  );
};

Props

Prop	Type	Description
`opened`	`boolean`	Controlled opened state
`onChange`	`(opened: boolean) => void`	Called when menu state changes
`position`	`'bottom' \| 'top' \| 'left' \| 'right' \| 'bottom-start' \| 'bottom-end' \| 'top-start' \| 'top-end'`	Menu position
`width`	`number \| 'target'`	Menu width
`closeOnItemClick`	`boolean`	Close menu on item click
`closeOnClickOutside`	`boolean`	Close menu on click outside
`shadow`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	Menu shadow
`radius`	`MantineNumberSize`	Border radius
`zIndex`	`number`	Z-index
`children` (required)	`React.ReactNode`	Menu.Target and Menu.Dropdown elements
`accessibilityLabel`	`string`	Accessibility label for the menu
`style`	`any`	Additional styles
`testID`	`string`	Test identifier used by testing frameworks

Source on GitHub · npm

Menu

Usage

Props