Right-click here
Copy
Paste
Delete
{/* The same actions on a visible button: a context menu must never be the only way in. */}
Actions
}
/>
Copy
Paste
Delete
{last}
);
}
```
A context menu opens at the pointer on right click (and, on touch, a long press: Base UI provides that and it is not tested here). Once open it behaves exactly like a dropdown, and it takes the same item parts.
**Use it as an enhancement only.** The trigger area is not focusable, the browser's keyboard route to a context menu needs a focused element, and a long press is easy to miss. So everything in it must be reachable another way, as in the demo, where the same actions are on a visible button.
## Open a dialog from a menu
```tsx
"use client";
import { Button } from "@azmr/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@azmr/ui/menu";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@azmr/ui/modal";
import { useState } from "react";
// Open a dialog from a menu item: control the dialog and open it from the item's onClick. The
// dialog sits next to the menu, not inside it, so it survives the menu closing.
export default function MenuOpensDialog() {
const [confirming, setConfirming] = useState(false);
const [deleted, setDeleted] = useState(false);
return (