Menu [react-aria-components]

Buttons 26

About

A Menu displays a list of actions or options that a user can choose. There is no native element to implement a menu in HTML that is widely supported. MenuTrigger and Menu help achieve accessible menu components that can be styled as needed.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Menu [react-aria-components] to your project and fits it to your theme.

Code

How Menu [react-aria-components] is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Button } from "@/components/ui/button"
import {
  Menu,
  MenuItem,
  MenuPopover,
  MenuTrigger,
} from "@/components/ui/menu"

export function MenuDemo() {
  return (
    <MenuTrigger>
      <Button aria-label="Menu" size="icon" variant="outline">
        ☰
      </Button>
      <MenuPopover>
        <Menu>
          <MenuItem onAction={() => alert("open")}>Open</MenuItem>
          <MenuItem onAction={() => alert("rename")}>Rename…</MenuItem>
          <MenuItem onAction={() => alert("duplicate")}>Duplicate</MenuItem>
          <MenuItem onAction={() => alert("share")}>Share…</MenuItem>
          <MenuItem onAction={() => alert("delete")}>Delete…</MenuItem>
        </Menu>
      </MenuPopover>
    </MenuTrigger>
  )
}