Nativebase logo
NativeBase
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
Playground
Playground
Props
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
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]
Extends MenuItem.
value
Value of the Menu Item option.
Type: string | number
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
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