Menu | NativeBase | Universal Components for React and React Native

Data Display
Typography
Disclosure
Media and Icons
Others
Menu
Menu generates a dropdown menu along with the menu button design pattern.
Show Code
Playground
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
Group
Playground
MenuOptionGroups
Playground
Menu Placement
Playground
Props
Menu
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
Type: "bottom" | "top" | "right" | "left" | "top left" | "top right" | "bottom left" | "bottom right" | "right top" | "right bottom" | "left top" | "left bottom"
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<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<...>>>>>>>>>>>>
MenuItem
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<InterfaceTextProps>
textValue
This value will be available for the typeahead menu feature
Type: string
MenuItem implements [Pressable]
MenuItemOption
Extends MenuItem.
MenuItemOption
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<InterfaceTextProps>
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: Partial<InterfaceTextProps>
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. Checkout the default theme of menu.
Info: We can easily extend the menu component theme using extendTheme function as described in the documentation .
Accessibility
Nativebase logo
MadeWithNativeBase