Version: 3.0.3

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.
import { Menu } from 'native-base';

Examples#

Basic#

Group#

MenuOptionGroups#

Menu Placement#

Props#

Menu#

Name Type Description Default
trigger (_props: any, state: { open: boolean; }) => Element Function that returns a React Element. This element will be used as a Trigger for the menu -
onOpen () => void This function will be invoked when menu is opened -
onClose () => void 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. -
closeOnSelect boolean Whether menu should be closed when a menu item is pressed true
defaultIsOpen boolean If true, the menu will be opened by default -
isOpen boolean Whether the menu is opened. Useful for conrolling the open state -
crossOffset number The additional offset applied along the cross axis between the element and its trigger element. -
offset number The additional offset applied along the main axis between the element and its trigger element. -
shouldOverlapWithTrigger boolean Determines whether menu content should overlap with the trigger false
placement "bottom" | "top" | "left" | "right" | "top left" | "top right" | "bottom left" | "bottom right" | "right top" | "right bottom" | "left top" | "left bottom" menu placement bottom left
shouldFlip boolean 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. true

Menu implements Box

MenuItem#

Name Type Description Default
children string | Element | Element[] Children of Menu Item -
isDisabled boolean Whether menu item is disabled -
_text ITextProps Props to be passed to Text -
textValue string This value will be available for the typeahead menu feature -

MenuItem implements [Pressable]

MenuItemOption#

Extends MenuItem.

MenuItemOption#

Name Type Description Default
value string | number Value of the Menu Item option. -

MenuGroup#

Name Type Description Default
title string The title of the menu group -
children Element | Element[] The children of Menu group -
_title ITextProps Props to pass on to Text. -

MenuOptionGroup#

Name Type Description Default
type "checkbox" | "radio" Used to add selection type of menu group. -
defaultValue string | number | string[] | number[] The initial value of the option group -
value string | number | string[] | number[] The value of the option group -
onChange (val: any) => void Function called when selection changes -

Styling#

NativeBase ships with a default theme for each component. Checkout the default theme of menu
We can easily extend the menu component theme using extendTheme function as shown below.
import { extendTheme, NativeBaseProvider } from "native-base";
const theme = extendTheme({
components: {
Menu: {
baseStyle: {},
defaultProps: {},
variants: {},
sizes: {},
}
}
});
function MyApp() {
return (
<NativeBaseProvider theme={theme}>
{/* Rest of the app goes here */}
</NativeBaseProvider>
)
}
Read more about extending component theme here.

Accessibility#

Adheres to the Menu WAI-ARIA design pattern.