Menu | NativeBase


Show Code
Playground
function Example() {
  return <Box h="80%" w="90%" alignItems="flex-start">
      <Menu shadow={2} w="190" trigger={triggerProps => {
      return <Pressable accessibilityLabel="More options menu" {...triggerProps}>
              <HamburgerIcon />
            </Pressable>;
    }}>
        <Menu.Item>Arial</Menu.Item>
        <Menu.Item>Nunito Sans</Menu.Item>
        <Menu.Item>Roboto</Menu.Item>
        <Menu.Item>Poppins</Menu.Item>
        <Menu.Item>SF Pro</Menu.Item>
        <Menu.Item>Helvetica</Menu.Item>
        <Menu.Item isDisabled>Sofia</Menu.Item>
        <Menu.Item>Cookie</Menu.Item>
      </Menu>
    </Box>;
}function Example() {
  return <Box h="80%" w="90%" alignItems="flex-start">
      <Menu shadow={2} w="190" trigger={triggerProps => {
      return <Pressable accessibilityLabel="More options menu" {...triggerProps}>
              <HamburgerIcon />
            </Pressable>;
    }}>
        <Menu.Item>Arial</Menu.Item>
        <Menu.Item>Nunito Sans</Menu.Item>
        <Menu.Item>Roboto</Menu.Item>
        <Menu.Item>Poppins</Menu.Item>
        <Menu.Item>SF Pro</Menu.Item>
        <Menu.Item>Helvetica</Menu.Item>
        <Menu.Item isDisabled>Sofia</Menu.Item>
        <Menu.Item>Cookie</Menu.Item>
      </Menu>
    </Box>;
}

Import

NativeBase uses 5 components for rendering menus:

Menu: The wrapper component provides context, state, and focus management.

Menu.Item: The trigger that handles menu selection.

Menu.Group: A wrapper to group related menu items.

Menu.OptionGroup: A wrapper for checkable menu items (radio and checkbox).

Menu.ItemOption: The checkable menu item, to be used with MenuOptionGroup.

Copy
import { Menu } from 'native-base';

Examples

Basic


Playground
function Example() {
  return <Box w="90%" alignItems="center">
      <Menu w="190" trigger={triggerProps => {
      return <Pressable accessibilityLabel="More options menu" {...triggerProps}>
              <HamburgerIcon />
            </Pressable>;
    }}>
        <Menu.Item>Arial</Menu.Item>
        <Menu.Item>Nunito Sans</Menu.Item>
        <Menu.Item>Roboto</Menu.Item>
        <Menu.Item>Poppins</Menu.Item>
        <Menu.Item>SF Pro</Menu.Item>
        <Menu.Item>Helvetica</Menu.Item>
        <Menu.Item isDisabled>Sofia</Menu.Item>
        <Menu.Item>Cookie</Menu.Item>
      </Menu>
    </Box>;
}function Example() {
  return <Box w="90%" alignItems="center">
      <Menu w="190" trigger={triggerProps => {
      return <Pressable accessibilityLabel="More options menu" {...triggerProps}>
              <HamburgerIcon />
            </Pressable>;
    }}>
        <Menu.Item>Arial</Menu.Item>
        <Menu.Item>Nunito Sans</Menu.Item>
        <Menu.Item>Roboto</Menu.Item>
        <Menu.Item>Poppins</Menu.Item>
        <Menu.Item>SF Pro</Menu.Item>
        <Menu.Item>Helvetica</Menu.Item>
        <Menu.Item isDisabled>Sofia</Menu.Item>
        <Menu.Item>Cookie</Menu.Item>
      </Menu>
    </Box>;
}

Group


Playground
function Example() {
  return <Box w="90%" alignItems="center">
      <Menu w="190" trigger={triggerProps => {
      return <Pressable {...triggerProps}>
              <HamburgerIcon />
            </Pressable>;
    }}>
        <Menu.Group title="Free">
          <Menu.Item>Arial</Menu.Item>
          <Menu.Item>Nunito Sans</Menu.Item>
          <Menu.Item>Roboto</Menu.Item>
        </Menu.Group>
        <Divider mt="3" w="100%" />
        <Menu.Group title="Paid">
          <Menu.Item>SF Pro</Menu.Item>
          <Menu.Item>Helvetica</Menu.Item>
        </Menu.Group>
      </Menu>
    </Box>;
}function Example() {
  return <Box w="90%" alignItems="center">
      <Menu w="190" trigger={triggerProps => {
      return <Pressable {...triggerProps}>
              <HamburgerIcon />
            </Pressable>;
    }}>
        <Menu.Group title="Free">
          <Menu.Item>Arial</Menu.Item>
          <Menu.Item>Nunito Sans</Menu.Item>
          <Menu.Item>Roboto</Menu.Item>
        </Menu.Group>
        <Divider mt="3" w="100%" />
        <Menu.Group title="Paid">
          <Menu.Item>SF Pro</Menu.Item>
          <Menu.Item>Helvetica</Menu.Item>
        </Menu.Group>
      </Menu>
    </Box>;
}

MenuOptionGroups


Playground
function Example() {
  return <Box w="90%" alignItems="center">
      <Menu closeOnSelect={false} w="190" onOpen={() => console.log("opened")} onClose={() => console.log("closed")} trigger={triggerProps => {
      return <Pressable {...triggerProps}>
              <HamburgerIcon />
            </Pressable>;
    }}>
        <Menu.OptionGroup defaultValue="Arial" title="free" type="radio">
          <Menu.ItemOption value="Arial">Arial</Menu.ItemOption>
          <Menu.ItemOption value="Nunito Sans">Nunito Sans</Menu.ItemOption>
          <Menu.ItemOption value="Roboto">Roboto</Menu.ItemOption>
        </Menu.OptionGroup>
        <Divider mt="3" w="100%" />
        <Menu.OptionGroup title="paid" type="checkbox">
          <Menu.ItemOption value="SF Pro">SF Pro</Menu.ItemOption>
          <Menu.ItemOption value="Helvetica">Helvetica</Menu.ItemOption>
        </Menu.OptionGroup>
      </Menu>
    </Box>;
}function Example() {
  return <Box w="90%" alignItems="center">
      <Menu closeOnSelect={false} w="190" onOpen={() => console.log("opened")} onClose={() => console.log("closed")} trigger={triggerProps => {
      return <Pressable {...triggerProps}>
              <HamburgerIcon />
            </Pressable>;
    }}>
        <Menu.OptionGroup defaultValue="Arial" title="free" type="radio">
          <Menu.ItemOption value="Arial">Arial</Menu.ItemOption>
          <Menu.ItemOption value="Nunito Sans">Nunito Sans</Menu.ItemOption>
          <Menu.ItemOption value="Roboto">Roboto</Menu.ItemOption>
        </Menu.OptionGroup>
        <Divider mt="3" w="100%" />
        <Menu.OptionGroup title="paid" type="checkbox">
          <Menu.ItemOption value="SF Pro">SF Pro</Menu.ItemOption>
          <Menu.ItemOption value="Helvetica">Helvetica</Menu.ItemOption>
        </Menu.OptionGroup>
      </Menu>
    </Box>;
}


Playground
function Example() {
  const [shouldOverlapWithTrigger] = React.useState(false);
  const [position, setPosition] = React.useState("auto");
  return <VStack space={6} alignSelf="flex-start" w="100%">
      <Menu w="160" shouldOverlapWithTrigger={shouldOverlapWithTrigger} // @ts-ignore
    placement={position == "auto" ? undefined : position} trigger={triggerProps => {
      return <Button alignSelf="center" variant="solid" {...triggerProps}>
              Menu
            </Button>;
    }}>
        <Menu.Item>Arial</Menu.Item>
        <Menu.Item>Nunito Sans</Menu.Item>
        <Menu.Item>Roboto</Menu.Item>
      </Menu>

      <Select selectedValue={position} mx={{
      base: 0,
      md: "auto"
    }} onValueChange={nextValue => setPosition(nextValue)} _selectedItem={{
      bg: "cyan.600",
      endIcon: <CheckIcon size={4} />
    }} accessibilityLabel="Select a position for Menu">
        <Select.Item label="auto" value="auto" />
        <Select.Item label="Top Left" value="top left" />
        <Select.Item label="Top" value="top" />
        <Select.Item label="Top Right" value="top right" />
        <Select.Item label="Right Top" value="right top" />
        <Select.Item label="Right" value="right" />
        <Select.Item label="Right Bottom" value="right bottom" />
        <Select.Item label="Bottom Left" value="bottom left" />
        <Select.Item label="Bottom" value="bottom" />
        <Select.Item label="Bottom Right" value="bottom right" />
        <Select.Item label="Left Top" value="left top" />
        <Select.Item label="Left" value="left" />
        <Select.Item label="Left Bottom" value="left bottom" />
      </Select>
    </VStack>;
}function Example() {
  const [shouldOverlapWithTrigger] = React.useState(false);
  const [position, setPosition] = React.useState("auto");
  return <VStack space={6} alignSelf="flex-start" w="100%">
      <Menu w="160" shouldOverlapWithTrigger={shouldOverlapWithTrigger} // @ts-ignore
    placement={position == "auto" ? undefined : position} trigger={triggerProps => {
      return <Button alignSelf="center" variant="solid" {...triggerProps}>
              Menu
            </Button>;
    }}>
        <Menu.Item>Arial</Menu.Item>
        <Menu.Item>Nunito Sans</Menu.Item>
        <Menu.Item>Roboto</Menu.Item>
      </Menu>

      <Select selectedValue={position} mx={{
      base: 0,
      md: "auto"
    }} onValueChange={nextValue => setPosition(nextValue)} _selectedItem={{
      bg: "cyan.600",
      endIcon: <CheckIcon size={4} />
    }} accessibilityLabel="Select a position for Menu">
        <Select.Item label="auto" value="auto" />
        <Select.Item label="Top Left" value="top left" />
        <Select.Item label="Top" value="top" />
        <Select.Item label="Top Right" value="top right" />
        <Select.Item label="Right Top" value="right top" />
        <Select.Item label="Right" value="right" />
        <Select.Item label="Right Bottom" value="right bottom" />
        <Select.Item label="Bottom Left" value="bottom left" />
        <Select.Item label="Bottom" value="bottom" />
        <Select.Item label="Bottom Right" value="bottom right" />
        <Select.Item label="Left Top" value="left top" />
        <Select.Item label="Left" value="left" />
        <Select.Item label="Left Bottom" value="left bottom" />
      </Select>
    </VStack>;
}

Props

Menu implements

trigger

Function that returns a React Element. This element will be used as a Trigger for the menu.

Type: (_props: any, state: { open: boolean; }) => Element

onOpen

This function will be invoked when the menu is opened.

Type: () => void

onClose

This function will be invoked when menu is closed. It will also be called when the user attempts to close the menu via Escape key or backdrop press.

Type: () => void

closeOnSelect

Whether menu should be closed when a menu item is pressed.

Type: boolean

Default: true

defaultIsOpen

If true, the menu will be opened by default.

Type: boolean

isOpen

Whether the menu is opened. Useful for controlling the open state.

Type: boolean

crossOffset

The additional offset applied along the cross axis between the element and its trigger element.

Type: number

offset

The additional offset applied along the main axis between the element and its trigger element.

Type: number

shouldOverlapWithTrigger

Determines whether menu content should overlap with the trigger.

Type: boolean

Default: false

placement

menu placement

Default: bottom left

shouldFlip

Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.

Type: boolean

Default: true

_overlay

Overlay related props can be passed in _overlay.

Type: Partial<IOverlayProps>

_presenceTransition

PresenceTransition related props can be passed in _presenceTransition.

Type: Partial<IPresenceTransitionProps>

_backdrop

Backdrop related props can be passed in _backdrop.

Type: Partial<IPressableProps>

MenuItem

MenuItem implements

children

Children of Menu Item.

Type: string | Element | Element[]

isDisabled

Whether menu item is disabled.

Type: boolean

_text

Props to be passed to Text.

Type: Partial<ITextProps>

textValue

This value will be available for the typeahead menu feature.

Type: string

MenuItem implements [Pressable]

MenuItemOption

Extends MenuItem.

MenuItemOption

MenuItemOption implements

value

Value of the Menu Item option.

Type: string | number

_stack

Stack related props can be passed in _stack.

Type: Partial<IStackProps>

_icon

Icon related props can be passed in _icon.

Type: Partial<IIconProps>

_text

Text related props can be passed in _text.

Type: Partial<ITextProps>

MenuGroup

title

The title of the menu group.

Type: string

children

The children of the Menu group.

Type: Element | Element[]

_title

Props to pass on to Text.

Type: Partial<ITextProps>

MenuOptionGroup

type

Used to add selection type of menu group.

Type: "checkbox" | "radio"

defaultValue

The initial value of the option group.

Type: string | number | string[] | number[]

value

The value of the option group.

Type: string | number | string[] | number[]

onChange

Function called when selection changes.

Type: (val: any) => void

Styling

NativeBase ships with a default theme for each component. Check out the default theme of the menu

here

Info: We can easily extend the menu component theme using extendTheme function as described in the documentation

here

Accessibility

Adheres to the

Menu WAI-ARIA design pattern.

Quick Nav

Menu | NativeBase | Universal Components for React and React Native