Version: 3.0.0-next.36

Menu

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. Must be a direct child of a MenuList.
  • 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.
import { Menu } from 'native-base';

Examples#

Basic#

Group#

MenuOptionGroups#

Props#

Menu#

NameTypeDescriptionDefault
triggerfunctionPressable element to apply the trigger of menu.-
onOpenfunctionFunction to be called when menu opens.-
onClosefunctionFunction to be called when menu closes.-
closeOnSelectbooleanIf true, the menu will close when a menu item is clicked.-

MenuItem#

NameTypeDescriptionDefault
isDisabledbooleanIf true, the menu item will be disabled.-
onPressfunctionFunction that is called on press.-
_textTextStyleProps to pass on to Text.-
closeOnSelectbooleanIf true, the menu will close when a menu item is clicked.-

MenuItemOption#

Extends MenuItem.

MenuItemOption#

NameTypeDescriptionDefault
valuenumber, stringThe value of the MenuItemOption-

MenuGroup#

NameTypeDescriptionDefault
titlestringThe title of the menu group-
_titleTextStyleProps to pass on to Text.-

MenuOptionGroup#

NameTypeDescriptionDefault
typecheckbox, radioUsed to add roles menuitemradio or menuitemcheckbox-
defaultValuenumber, number[], string, string[]The initial value of the option group.-
valuenumber, stringThe value of the option group.-
onChangefunctionFunction called when selection changes-