Menu | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
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 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
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<IPressableProps>
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<ITextProps>
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<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.
Info: We can easily extend the menu component theme using extendTheme function as described in the documentation .
Accessibility
Nativebase logo
MadeWithNativeBase