Menu | NativeBase

NativeBase

3.4.x

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Resources

Core Concepts

Features

Color mode (Dark Mode)

Theme

Customizing Components

Making components dark mode compatible

Layout

Forms

Data Display

Feedback

Typography

Typography

Disclosure

Media and Icons

Transition

Others

ReactNative Components

Hooks

Examples

Community Integration

React Hook Forms

Formik

Recipes

Designs

Forms

Layout

Migration

Components Migration

If you are starting a new project, please try gluestack-ui for better performance and new design.

A dropdown menu for the common dropdown menu button design pattern.

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 <Menu trigger={triggerProps => {
    return <Pressable accessibilityLabel="More options menu" {...triggerProps}>
            <HamburgerIcon />
          </Pressable>;
  }}>
      <Menu.Item>Arial</Menu.Item>
      <Menu.Item>Nunito Sans</Menu.Item>
      <Menu.Item isDisabled>Tahoma</Menu.Item>
      <Divider />
      <Menu.Item>Roboto</Menu.Item>
      <Menu.Item>Montserrat</Menu.Item>
    </Menu>;
}function Example() {
  return <Menu trigger={triggerProps => {
    return <Pressable accessibilityLabel="More options menu" {...triggerProps}>
            <HamburgerIcon />
          </Pressable>;
  }}>
      <Menu.Item>Arial</Menu.Item>
      <Menu.Item>Nunito Sans</Menu.Item>
      <Menu.Item isDisabled>Tahoma</Menu.Item>
      <Divider />
      <Menu.Item>Roboto</Menu.Item>
      <Menu.Item>Montserrat</Menu.Item>
    </Menu>;
}

Group


Playground
function Example() {
  return <Menu closeOnSelect={false} onOpen={() => console.log("opened")} onClose={() => console.log("closed")} trigger={triggerProps => {
    return <Pressable {...triggerProps}>
            <HamburgerIcon />
          </Pressable>;
  }}>
      <Menu.Group title="Profile">
        <Menu.Item>Menu item 1</Menu.Item>
        <Menu.Item>Menu item 2</Menu.Item>
      </Menu.Group>
      <Divider borderColor="gray.300" />
      <Menu.Group title="Help">
        <Menu.Item isDisabled>Menu item 3</Menu.Item>
        <Menu.Item>Menu item 4</Menu.Item>
      </Menu.Group>
    </Menu>;
}function Example() {
  return <Menu closeOnSelect={false} onOpen={() => console.log("opened")} onClose={() => console.log("closed")} trigger={triggerProps => {
    return <Pressable {...triggerProps}>
            <HamburgerIcon />
          </Pressable>;
  }}>
      <Menu.Group title="Profile">
        <Menu.Item>Menu item 1</Menu.Item>
        <Menu.Item>Menu item 2</Menu.Item>
      </Menu.Group>
      <Divider borderColor="gray.300" />
      <Menu.Group title="Help">
        <Menu.Item isDisabled>Menu item 3</Menu.Item>
        <Menu.Item>Menu item 4</Menu.Item>
      </Menu.Group>
    </Menu>;
}

MenuOptionGroups


Playground
function Example() {
  return <Menu onOpen={() => console.log("opened")} onClose={() => console.log("closed")} trigger={triggerProps => {
    return <Pressable {...triggerProps}>
            <HamburgerIcon />
          </Pressable>;
  }}>
      <Menu.OptionGroup defaultValue="asc" title="Order" type="radio">
        <Menu.ItemOption value="asc">Ascending</Menu.ItemOption>
        <Menu.ItemOption value="desc">Descending</Menu.ItemOption>
      </Menu.OptionGroup>
      <Divider />
      <Menu.OptionGroup title="Country" type="checkbox">
        <Menu.ItemOption value="email">Email</Menu.ItemOption>
        <Menu.ItemOption value="country">Country</Menu.ItemOption>
      </Menu.OptionGroup>
    </Menu>;
}function Example() {
  return <Menu onOpen={() => console.log("opened")} onClose={() => console.log("closed")} trigger={triggerProps => {
    return <Pressable {...triggerProps}>
            <HamburgerIcon />
          </Pressable>;
  }}>
      <Menu.OptionGroup defaultValue="asc" title="Order" type="radio">
        <Menu.ItemOption value="asc">Ascending</Menu.ItemOption>
        <Menu.ItemOption value="desc">Descending</Menu.ItemOption>
      </Menu.OptionGroup>
      <Divider />
      <Menu.OptionGroup title="Country" type="checkbox">
        <Menu.ItemOption value="email">Email</Menu.ItemOption>
        <Menu.ItemOption value="country">Country</Menu.ItemOption>
      </Menu.OptionGroup>
    </Menu>;
}


Playground
function Example() {
  const [shouldOverlapWithTrigger] = React.useState(false);
  const [position, setPosition] = React.useState("auto");
  return <VStack space={6} alignSelf="flex-start" w="100%">
      <Menu shouldOverlapWithTrigger={shouldOverlapWithTrigger} // @ts-ignore
    placement={position == "auto" ? undefined : position} trigger={triggerProps => {
      return <Button alignSelf="center" variant="solid" {...triggerProps}>
              Menu
            </Button>;
    }}>
        <Menu.Item>Large Menu item 1</Menu.Item>
        <Menu.Item>Large Menu item 2</Menu.Item>
        <Menu.Item>Large Menu item 3</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 shouldOverlapWithTrigger={shouldOverlapWithTrigger} // @ts-ignore
    placement={position == "auto" ? undefined : position} trigger={triggerProps => {
      return <Button alignSelf="center" variant="solid" {...triggerProps}>
              Menu
            </Button>;
    }}>
        <Menu.Item>Large Menu item 1</Menu.Item>
        <Menu.Item>Large Menu item 2</Menu.Item>
        <Menu.Item>Large Menu item 3</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 menu is opened

Type: () => void

onClose

This function will be invoked when menu is closed. It'll also be called when 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 conrolling 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

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:

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

MenuGroup

title

The title of the menu group

Type: string

children

The children of Menu group

Type: Element | Element[]

_title

Props to pass on to Text.

Type:

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