Menu | NativeBase | Universal Components for React and React Native

Search
K
Hire us
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
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
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: "top" | "bottom" | "left" | "right" | "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
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
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
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.
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