<Menu
  placement="top"
  offset={5}
  disabledKeys={["Settings"]}
  trigger={({ ...triggerProps }) => {
    return (
      <Button {...triggerProps}>
        <ButtonText>Menu</ButtonText>
      </Button>
    )
  }}
>
  <MenuItem key="Add account" textValue="Add account">
    <Icon as={AddIcon} size="sm" className="mr-2" />
    <MenuItemLabel size="sm">Add account</MenuItemLabel>
  </MenuItem>
  <MenuItem key="Community" textValue="Community">
    <Icon as={GlobeIcon} size="sm" className="mr-2" />
    <MenuItemLabel size="sm">Community</MenuItemLabel>
  </MenuItem>
  <MenuItem key="Plugins" textValue="Plugins">
    <Icon as={PlayIcon} size="sm" className="mr-2" />
    <MenuItemLabel size="sm">Plugins</MenuItemLabel>
  </MenuItem>
  <MenuItem key="Settings" textValue="Settings">
    <Icon as={SettingsIcon} size="sm" className="mr-2" />
    <MenuItemLabel size="sm">Settings</MenuItemLabel>
  </MenuItem>
</Menu>

Installation

CLI

Manual

Run the following command:

npx gluestack-ui add menu

Step 1: Install the following dependencies:

npm i @gluestack-ui/menu @legendapp/motion

Important Note

Note: At present, we have integrated the @legendapp/motion for animation. You have the option to remove this and implement your own custom animation wrapper.

Step 2: Copy and paste the following code into your project.

"use client"
import React from "react"
import { createMenu } from "@gluestack-ui/menu"
import { tva } from "@gluestack-ui/nativewind-utils/tva"
import { cssInterop } from "nativewind"
import { Pressable, Text, Platform, View } from "react-native"
import { Motion, AnimatePresence } from "@legendapp/motion"
import type { VariantProps } from "@gluestack-ui/nativewind-utils"
import { withStates } from "@gluestack-ui/nativewind-utils/withStates"

const menuStyle = tva({
  base: "rounded-md bg-background-0 border border-outline-100 p-1 shadow-hard-5",
})

const menuItemStyle = tva({
  base: "min-w-[200px] p-3 flex-row items-center rounded data-[hover=true]:bg-background-50 data-[active=true]:bg-background-100 data-[focus=true]:bg-background-50 data-[focus=true]:web:outline-none data-[focus=true]:web:outline-0 data-[disabled=true]:opacity-40 data-[disabled=true]:web:cursor-not-allowed data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-primary-700 data-[focus-visible=true]:web:outline data-[focus-visible=true]:web:cursor-pointer data-[disabled=true]:data-[focus=true]:bg-transparent",
})

const menuBackdropStyle = tva({
  base: "absolute top-0 bottom-0 left-0 right-0 web:cursor-default",
  // add this classnames if you want to give background color to backdrop
  // opacity-50 bg-background-500,
})

const menuSeparatorStyle = tva({
  base: "bg-background-200 h-px w-full",
})

const menuItemLabelStyle = tva({
  base: "text-typography-700 font-normal font-body",

  variants: {
    isTruncated: {
      true: "web:truncate",
    },
    bold: {
      true: "font-bold",
    },
    underline: {
      true: "underline",
    },
    strikeThrough: {
      true: "line-through",
    },
    size: {
      "2xs": "text-2xs",
      xs: "text-xs",
      sm: "text-sm",
      md: "text-base",
      lg: "text-lg",
      xl: "text-xl",
      "2xl": "text-2xl",
      "3xl": "text-3xl",
      "4xl": "text-4xl",
      "5xl": "text-5xl",
      "6xl": "text-6xl",
    },
    sub: {
      true: "text-xs",
    },
    italic: {
      true: "italic",
    },
    highlight: {
      true: "bg-yellow-500",
    },
  },
})

const BackdropPressable = React.forwardRef<
  React.ElementRef<typeof Pressable>,
  React.ComponentPropsWithoutRef<typeof Pressable> &
    VariantProps<typeof menuBackdropStyle>
>(({ className, ...props }, ref) => {
  return (
    <Pressable
      ref={ref}
      className={menuBackdropStyle({
        class: className,
      })}
      {...props}
    />
  )
})

type IMenuItemProps = VariantProps<typeof menuItemStyle> & {
  className?: string
} & React.ComponentPropsWithoutRef<typeof Pressable>

const Item = React.forwardRef<
  React.ElementRef<typeof Pressable>,
  IMenuItemProps
>(({ className, ...props }, ref) => {
  return (
    <Pressable
      ref={ref}
      className={menuItemStyle({
        class: className,
      })}
      {...props}
    />
  )
})

const Separator = React.forwardRef(
  ({ className, ...props }: any, ref?: any) => {
    return (
      <View
        ref={ref}
        className={menuSeparatorStyle({ class: className })}
        {...props}
      />
    )
  }
)
export const UIMenu = createMenu({
  Root: Motion.View,
  Item: Platform.OS === "web" ? Item : withStates(Item),
  Label: Text,
  Backdrop: BackdropPressable,
  AnimatePresence: AnimatePresence,
  Separator: Separator,
})

cssInterop(UIMenu, { className: "style" })
cssInterop(UIMenu.ItemLabel, { className: "style" })

type IMenuProps = React.ComponentProps<typeof UIMenu> &
  VariantProps<typeof menuStyle> & { className?: string }
type IMenuItemLabelProps = React.ComponentProps<typeof UIMenu.ItemLabel> &
  VariantProps<typeof menuItemLabelStyle> & { className?: string }

const Menu = React.forwardRef<React.ElementRef<typeof UIMenu>, IMenuProps>(
  ({ className, ...props }, ref) => {
    return (
      <UIMenu
        ref={ref}
        initial={{
          opacity: 0,
          scale: 0.8,
        }}
        animate={{
          opacity: 1,
          scale: 1,
        }}
        exit={{
          opacity: 0,
          scale: 0.8,
        }}
        transition={{
          type: "timing",
          duration: 100,
        }}
        className={menuStyle({
          class: className,
        })}
        {...props}
      />
    )
  }
)

const MenuItem = UIMenu.Item

const MenuItemLabel = React.forwardRef<
  React.ElementRef<typeof UIMenu.ItemLabel>,
  IMenuItemLabelProps
>(
  (
    {
      className,
      isTruncated,
      bold,
      underline,
      strikeThrough,
      size = "md",
      sub,
      italic,
      highlight,
      ...props
    },
    ref
  ) => {
    return (
      <UIMenu.ItemLabel
        ref={ref}
        className={menuItemLabelStyle({
          isTruncated,
          bold,
          underline,
          strikeThrough,
          size,
          sub,
          italic,
          highlight,
          class: className,
        })}
        {...props}
      />
    )
  }
)

const MenuSeparator = UIMenu.Separator

Menu.displayName = "Menu"
MenuItem.displayName = "MenuItem"
MenuItemLabel.displayName = "MenuItemLabel"
MenuSeparator.displayName = "MenuSeperator"
export { Menu, MenuItem, MenuItemLabel, MenuSeparator }

Step 3: Update the import paths to match your project setup.

API Reference

To use this component in your project, include the following import statement in your file.

import {
  Menu,
  MenuItem,
  MenuItemLabel,
  MenuSeparator,
} from "@/components/ui/menu"

export default () => (
  <Menu>
    <MenuItem>
      <MenuItemLabel />
    </MenuItem>
    <MenuSeparator />
  </Menu>
)

Important Note

Note: The immediate parent of MenuItem must be Menu. There should be no higher-order component (HOC) between them.

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.

MenuItem

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.

MenuItemLabel

Contains all text related layout style props and actions. It inherits all the properties of React Native's Text component.

MenuSeparator

Contains all view related layout style props and actions. It inherits all the properties of React Native's View 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. Adheres to the MENU WAI-ARIA design pattern.

Keyboard

Space: Opens/closes the menu.
Enter: Opens/closes the menu.
Arrow Down: Moves focus to the next focusable element.
Arrow Up: Moves focus to the previous focusable element.
Esc: Closes the menu and moves focus to menuTrigger.

VoiceOver: When the menu is opened, the screen reader will say, Menu item group with 4 items. You are currently on a menu item group. To select this menu item, press Control + Option + Space. To close the menu, press Escape.

States

aria-labelledby identifies the element that labels the current element.
aria-label defines a string value that labels the current element.

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
  offset={5}
  trigger={({ ...triggerProps }) => {
    return (
      <Button {...triggerProps} size="sm">
        <ButtonIcon as={MenuIcon} />
      </Button>
    )
  }}
>
  <MenuItem
    key="Membership"
    textValue="Membership"
    className="p-2 justify-between"
  >
    <MenuItemLabel size="sm">Membership</MenuItemLabel>
    <Badge action="success" className="rounded-full">
      <BadgeText className="text-2xs capitalize">Pro</BadgeText>
    </Badge>
  </MenuItem>
  <MenuItem key="Orders" textValue="Orders" className="p-2">
    <MenuItemLabel size="sm">Orders</MenuItemLabel>
  </MenuItem>
  <MenuItem key="Address Book" textValue="Address Book" className="p-2">
    <MenuItemLabel size="sm">Address Book</MenuItemLabel>
  </MenuItem>
  <MenuSeparator />
  <MenuItem key="Earn & Redeem" textValue="Earn & Redeem" className="p-2">
    <MenuItemLabel size="sm">Earn & Redeem</MenuItemLabel>
  </MenuItem>
  <MenuItem key="Coupons" textValue="Coupons" className="p-2">
    <MenuItemLabel size="sm">Coupons</MenuItemLabel>
  </MenuItem>
  <MenuItem key="Help Center" textValue="Help Center" className="p-2">
    <MenuItemLabel size="sm">Help Center</MenuItemLabel>
  </MenuItem>
  <MenuSeparator />
  <MenuItem key="Logout" textValue="Logout" className="p-2">
    <MenuItemLabel size="sm">Logout</MenuItemLabel>
  </MenuItem>
</Menu>

function Example() {
  const [selected, setSelected] = React.useState(new Set([]))
  return (
    <Menu
      placement="bottom left"
      selectionMode="single"
      selectedKeys={selected}
      offset={5}
      className="p-1.5"
      onSelectionChange={(keys) => {
        // console.log('onSelectionChange', keys);
        setSelected(keys)
        if (keys.currentKey === "Account Setting") {
          console.log("Push to", keys.currentKey, "route")
        } else if (keys.currentKey === "Help Centre") {
          console.log("Push to", keys.currentKey, "route")
        } else if (keys.currentKey === "Contact Support") {
          console.log("Push to", keys.currentKey, "route")
        } else if (keys.currentKey === "Download Mobile App") {
          console.log("Push to", keys.currentKey, "route")
        } else if (keys.currentKey === "Install Chrome Extension") {
          console.log("Push to", keys.currentKey, "route")
        }
      }}
      closeOnSelect={true}
      trigger={({ ...triggerProps }) => {
        return (
          <Button {...triggerProps}>
            <ButtonText>Menu</ButtonText>
          </Button>
        )
      }}
    >
      <MenuItem
        key="Account Settings"
        textValue="Account Settings"
        className="p-2 min-w-[294px]"
      >
        <Icon as={SettingsIcon} size="sm" className="mr-2" />
        <MenuItemLabel size="sm">Account Settings</MenuItemLabel>
      </MenuItem>
      <MenuItem key="Help Centre" textValue="Help Centre" className="p-2">
        <Icon as={HelpCircleIcon} size="sm" className="mr-2" />
        <MenuItemLabel size="sm">Help Centre</MenuItemLabel>
      </MenuItem>
      <MenuItem
        key="Contact Support"
        textValue="Contact Support"
        className="p-2"
      >
        <Icon as={MessageCircleIcon} size="sm" className="mr-2" />
        <MenuItemLabel size="sm">Contact Support</MenuItemLabel>
      </MenuItem>
      <MenuSeparator />
      <MenuItem
        key="Download Mobile App"
        textValue="Download Mobile App"
        className="p-2"
      >
        <MenuItemLabel size="sm">Download Mobile App</MenuItemLabel>
      </MenuItem>
      <MenuItem
        key="Install Chrome Extension"
        textValue="Install Chrome Extension"
        className="p-2"
      >
        <MenuItemLabel size="sm">Install Chrome Extension</MenuItemLabel>
      </MenuItem>
    </Menu>
  )
}

Menu

Installation

Run the following command:

Step 1: Install the following dependencies:

Step 2: Copy and paste the following code into your project.

Step 3: Update the import paths to match your project setup.

API Reference

Component Props

Menu

MenuItem

MenuItemLabel

MenuSeparator

Features

Accessibility

Keyboard

States

Examples

Menu with Tag

Menu with Selection

Menu

Installation

Run the following command:

Step 1: Install the following dependencies:

Step 2: Copy and paste the following code into your project.

Step 3: Update the import paths to match your project setup.

API Reference

Component Props

Menu

MenuItem

MenuItemLabel

MenuSeparator

Features

Accessibility

Keyboard

Screen Reader

States

Examples

Menu with Tag

Menu with Selection