Menu | NativeBase | Universal Components for React and React Native

Nativebase logo
NativeBase
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
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: 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.
_icon
Icon related props can be passed in _icon.
_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