Components
Menu [react-aria-components]
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.
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>
)
}
Source
Published
Similar components
Explore more
Part of Jolly UI — browse the full library on 21st.dev.