Menu

The Menu component creates a user-friendly dropdown interface that can be utilized to present a range of options or actions. This feature ensures accessibility and ease of use for the user.
Installation
API Reference
This is an illustration of a Menu component.
<Menu
size="lg"
placement="top"
trigger={({ ...triggerProps }) => {
return (
<Button {...triggerProps}>
<ButtonText>Menu</ButtonText>
</Button>
)
}}
>
<MenuItem key="Community" textValue="Community">
<Icon as={GlobeIcon} size="sm" className="mr-2" />
<MenuItemLabel size="sm">Community</MenuItemLabel>
</MenuItem>
<MenuItem key="Plugins" textValue="Plugins">
{/* PuzzleIcon is imported from 'lucide-react-native' */}
<Icon as={PuzzleIcon} size="sm" className="mr-2" />
<MenuItemLabel size="sm">Plugins</MenuItemLabel>
</MenuItem>
<MenuItem key="Theme" textValue="Theme">
{/* PaintBucket is imported from 'lucide-react-native' */}
<Icon as={PaintBucket} size="sm" className="mr-2" />
<MenuItemLabel size="sm">Theme</MenuItemLabel>
</MenuItem>
<MenuItem key="Settings" textValue="Settings">
<Icon as={SettingsIcon} size="sm" className="mr-2" />
<MenuItemLabel size="sm">Settings</MenuItemLabel>
</MenuItem>
<MenuItem key="Add account" textValue="Add account">
<Icon as={AddIcon} size="sm" className="mr-2" />
<MenuItemLabel size="sm">Add account</MenuItemLabel>
</MenuItem>
</Menu>

Installation

Run the following command:

npx gluestack-ui add menu

API Reference

To use this component in your project, include the following import statement in your file.
import { Menu, MenuItem, MenuItemLabel } from "@/components/ui/menu"
export default () => (
<Menu>
<MenuItem>
<MenuItemLabel />
</MenuItem>
</Menu>
)

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
Contains all menu related layout style props and actions. It inherits all the properties of React Native's View component.
Prop
Type
Default
Description
trigger
(_props: any, state: { open: boolean; }) => Element
-
Function that returns a React Element. This element will be used as a Trigger for the Menu
placement
"bottom" | "top" | "right" | "left" | "top left" | "top right" | "bottom left" | "bottom right" | "right top" | "right bottom" | "left top" | "left bottom"
bottom left
menu placement
defaultIsOpen
boolean
false
If true, the menu will be opened by default.
onOpen
() => void
true
This function will be invoked when the menu is opened.
onClose
() => void
-
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.
isOpen
boolean
false
Whether the menu is opened. Useful for controlling the open state.
offset
number
-
The additional offset applied along the main axis between the element and its trigger element.
crossOffset
number
-
The additional offset applied along the cross axis between the element and its trigger element.
disabledKeys
string []
-
Item keys in this collection will be disabled.
closeOnSelect
boolean
true
This prop determine whether menu is closed after option is selected.
selectedKeys
'all' | Iterable<Key>
-
The currently selected keys in the collection (controlled).
selectionMode
'none'| 'single' | 'multiple'
-
The type of selection that is allowed in the collection.
onSelectionChange
(keys: 'all' | Iterable<Key>) => void
-
Handler that is called when the selection changes.
Contains all button related layout style props and actions. It inherits all the properties of React Native's Pressable component.
Prop
Type
Default
Description
closeOnSelect
boolean
true
This prop determine whether menu is closed after option is selected.
Contains all text related layout style props and actions. It inherits all the properties of React Native's Text component.

Features

  • Keyboard support for actions.
  • Support for hover, focus and active states.

Accessibility

We have outlined the various features that ensure the Menu component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.

Examples

The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
Menu Component provides different placement options, allowing you to position it dynamically based on user interaction or layout requirements.
placement
<Menu
placement="top"
trigger={({ ...triggerProps }) => {
return (
<Button {...triggerProps}>
<ButtonText>Menu</ButtonText>
</Button>
)
}}
>
<MenuItem key="Community" textValue="Community">
<Icon as={GlobeIcon} size="sm" className="mr-2" />
<MenuItemLabel size="sm">Community</MenuItemLabel>
</MenuItem>
<MenuItem key="Plugins" textValue="Plugins">
{/* PuzzleIcon is imported from 'lucide-react-native' */}
<Icon as={PuzzleIcon} size="sm" className="mr-2" />
<MenuItemLabel size="sm">Plugins</MenuItemLabel>
</MenuItem>
<MenuItem key="Theme" textValue="Theme">
{/* PaintBucket is imported from 'lucide-react-native' */}
<Icon as={PaintBucket} size="sm" className="mr-2" />
<MenuItemLabel size="sm">Theme</MenuItemLabel>
</MenuItem>
<MenuItem key="Settings" textValue="Settings">
<Icon as={SettingsIcon} size="sm" className="mr-2" />
<MenuItemLabel size="sm">Settings</MenuItemLabel>
</MenuItem>
<MenuItem key="Add account" textValue="Add account">
<Icon as={AddIcon} size="