最新
菜单Right-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 个框架高级
Loading…
A menu with a flyout submenu that opens sideways, with full arrow-key navigation between levels.
<!--
Menu with a nested flyout. ArrowRight opens a submenu, ArrowLeft/Escape steps
back one level. Shown with the "Send to" submenu 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">Share</button>
<ul role="menu" aria-label="Share" class="absolute left-0 top-[calc(100%+0.375rem)] z-20 min-w-48 rounded-xl border border-gray-200 bg-white p-1 shadow-lg dark:border-gray-700 dark:bg-gray-900">
<li role="none"><button type="button" role="menuitem" class="flex w-full items-center 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">Copy link</button></li>
<li role="none" class="relative">
<button type="button" role="menuitem" aria-haspopup="menu" aria-expanded="true" class="flex w-full items-center justify-between gap-4 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">Send to <span aria-hidden="true">›</span></button>
<ul role="menu" aria-label="Send to" class="absolute -top-1 left-[calc(100%-0.25rem)] z-20 min-w-44 rounded-xl border border-gray-200 bg-white p-1 shadow-lg dark:border-gray-700 dark:bg-gray-900">
<li role="none"><button type="button" role="menuitem" class="flex w-full items-center 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">Email</button></li>
<li role="none"><button type="button" role="menuitem" class="flex w-full items-center 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">Slack</button></li>
</ul>
</li>
</ul>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
label必填 | string | - | 加载时朗读的无障碍标签。 |
items必填 | NestedItem[] | - | 要渲染的项目数组。 |
onSelect | (id: string) => void | - | 用户选择菜单项时触发，参数为所选项。 |
ArrowRight opens the submenu and ArrowLeft (or Escape) steps back one level rather than closing the whole stack - the detail most implementations miss. Any item can carry an `items` array to become a submenu parent; the chevron and `aria-haspopup` are added automatically.