Menu

Overlay & Menus

Menu

Context menu built on Popover + Dropdown primitives with keyboard support.

Usage

Attach contextual actions to buttons, chips, or icon triggers.

Highlights

• MenuItem subcomponent
• Close-on-select and focus restore behaviors

When to use it

• User needs a small list of contextual actions.
• You require cascading operations without navigation.

Related components

ActionSheetDropdownList

Examples

Default

Preview (Web)

import { useRef, useState } from 'react';
import { StyleSheet } from 'react-native';
import { Button } from 'react-native-molecules/components/Button';
import { Icon } from 'react-native-molecules/components/Icon';
import { Menu } from 'react-native-molecules/components/Menu';
import { Text } from 'react-native-molecules/components/Text';

const styles = StyleSheet.create({
  menu: {
      width: 280,
  },
});

export default function Example() {
  const triggerRef = useRef(null);
  const [open, setOpen] = useState(false);

  return (
      <>
          <Button ref={triggerRef} onPress={() => setOpen(o => !o)}>
              Toggle
          </Button>
          <Menu style={styles.menu} isOpen={open} onClose={() => setOpen(false)} triggerRef={triggerRef}>
              <Menu.Item left={<Icon name="content-cut" size={22} />} right={<Text>⌘X</Text>}>
                  Cut
              </Menu.Item>
              <Menu.Item left={<Icon name="content-copy" size={22} />} right={<Text>⌘C</Text>}>
                  Copy
              </Menu.Item>
              <Menu.Item left={<Icon name="content-paste" size={22} />} right={<Text>⌘V</Text>}>
                  Paste
              </Menu.Item>
              <Menu.Divider />
              <Menu.Item left={<Icon name="cloud" size={22} />}>Web Clipboard</Menu.Item>
          </Menu>
      </>
  );
}

Prop	Type	Default	Description
style	((false | "" | ViewStyle | RegisteredStyle<ViewStyle> | RecursiveArray<Falsy | ViewStyle | RegisteredStyle<ViewStyle>> | null) & ViewStyle) | undefined	—	—
closeOnSelect	boolean | undefined	—	—
onCloseRequired	() => void	—	—
childrenRequired	ReactElement<unknown, string | JSXElementConstructor<any>> | ReactElement<unknown, string | JSXElementConstructor<any>>[]	—	—

Defined in react-native-molecules/components/Menu