New
MenusRight-Click Context Menu
A context menu that opens at the pointer on right-click, scoped to its own area so the native browser menu still works elsewhere.
#menu#context-menu#right-click
3 frameworksAdvanced
Loading…
A bottom action sheet that slides up over a scrim, with large touch targets and a drag handle.
<!--
A mobile action sheet. The scrim and sheet here are positioned within the
component's own bounded panel; in a real full-screen app, render the scrim and
sheet at the document root with 'fixed inset-0' / 'fixed inset-x-0 bottom-0'.
Shown open. Tap targets are >= 44px.
-->
<div class="relative mx-auto w-full max-w-xs overflow-hidden rounded-2xl border border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-950">
<div class="flex min-h-64 items-center justify-center p-4">
<button type="button" aria-haspopup="menu" aria-expanded="true" class="rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-50 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">Open actions</button>
</div>
<button type="button" aria-label="Close menu" class="absolute inset-0 z-10 cursor-default bg-black/40"></button>
<div role="menu" aria-label="Post options" class="absolute inset-x-0 bottom-0 z-20 rounded-t-2xl border-t border-gray-200 bg-white p-2 shadow-2xl dark:border-gray-700 dark:bg-gray-900">
<div class="mx-auto mb-2 mt-1 h-1.5 w-10 rounded-full bg-gray-300 dark:bg-gray-700" aria-hidden="true"></div>
<p class="px-3 pb-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Post options</p>
<button type="button" role="menuitem" class="flex min-h-11 w-full items-center rounded-lg px-3 text-left text-sm text-gray-700 hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800">Share</button>
<button type="button" role="menuitem" class="flex min-h-11 w-full items-center rounded-lg px-3 text-left text-sm text-gray-700 hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800">Copy link</button>
<button type="button" role="menuitem" class="flex min-h-11 w-full items-center rounded-lg px-3 text-left text-sm text-red-600 hover:bg-red-50 focus-visible:bg-red-50 focus-visible:outline-none dark:text-red-400 dark:hover:bg-red-950/40 dark:focus-visible:bg-red-950/40">Remove</button>
</div>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
triggerrequired | string | - | Trigger |
titlerequired | string | - | Heading text for the card. |
actionsrequired | SheetAction[] | - | Actions |
onAction | (id: string) => void | - | On action |
The scrim and sheet are positioned within the component’s own bounded panel for the demo; in a real full-screen app you render the same markup at the document root with `fixed`. Every action is at least 44px tall, a scrim tap or Escape closes, and arrow keys rove the list.