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 menu whose items can be pinned into a Favorites group at the top, toggled with a star.
<!--
A menu whose items can be pinned. Each row is role="menuitemcheckbox"; checked
means pinned, and toggling moves the row between the Pinned and All groups
without closing the menu. Group headings are role="presentation". Shown open.
-->
<div class="relative inline-block">
<button type="button" aria-haspopup="menu" aria-expanded="true" class="rounded-lg border border-gray-300 bg-white px-3.5 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">Folders</button>
<div role="menu" aria-label="Folders" class="absolute left-0 top-[calc(100%+0.375rem)] z-20 min-w-56 rounded-xl border border-gray-200 bg-white p-1 shadow-lg dark:border-gray-700 dark:bg-gray-900">
<p role="presentation" class="px-3 pb-1 pt-2 text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500">Pinned</p>
<button type="button" role="menuitemcheckbox" aria-checked="true" class="flex w-full items-center justify-between gap-3 rounded-md px-3 py-2 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">
<span class="truncate">Inbox</span>
<svg class="h-4 w-4 flex-none text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5 15 8.6l6.7 1-4.85 4.7 1.15 6.7L12 17.9 5.99 21l1.16-6.7L2.3 9.6l6.7-1z"/></svg>
</button>
<p role="presentation" class="px-3 pb-1 pt-2 text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500">All</p>
<button type="button" role="menuitemcheckbox" aria-checked="false" class="flex w-full items-center justify-between gap-3 rounded-md px-3 py-2 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">
<span class="truncate">Drafts</span>
<svg class="h-4 w-4 flex-none text-gray-400 dark:text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5 15 8.6l6.7 1-4.85 4.7 1.15 6.7L12 17.9 5.99 21l1.16-6.7L2.3 9.6l6.7-1z"/></svg>
</button>
</div>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | - | Accessible label announced while loading. |
itemsrequired | FavItem[] | - | The array of items to render. |
defaultPinned | string[] | [] | Default pinned |
onChange | (pinned: string[]) => void | - | On change |
Each row is a `role="menuitemcheckbox"` where checked means pinned; toggling the star moves the row between the Pinned and All groups without closing the menu. The group headings are `role="presentation"` so arrow-key roving flows across every item regardless of group.