最新
菜单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 user menu triggered by an avatar, with an identity header above the profile, settings and sign-out commands.
<!--
An account menu. The identity header is presentational (not a menuitem), so
arrow keys skip it and land on the first command. Shown open.
-->
<div class="relative inline-block">
<button type="button" aria-haspopup="menu" aria-expanded="true" aria-label="Account: Ada Lovelace" class="flex items-center gap-2 rounded-full border border-gray-200 bg-white py-1 pl-1 pr-3 text-sm font-medium 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-200 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
<span class="flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 text-xs font-bold text-white">AL</span>
<span class="hidden sm:inline">Ada Lovelace</span>
</button>
<div role="menu" aria-label="Account" class="absolute right-0 top-[calc(100%+0.5rem)] z-20 w-60 overflow-hidden rounded-xl border border-gray-200 bg-white p-1 shadow-lg dark:border-gray-700 dark:bg-gray-900">
<div class="border-b border-gray-100 px-3 py-2.5 dark:border-gray-800">
<p class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">Ada Lovelace</p>
<p class="truncate text-xs text-gray-500 dark:text-gray-400">ada@analytical.dev</p>
</div>
<div class="pt-1">
<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">Your profile</button>
<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">Settings</button>
<button type="button" role="menuitem" class="flex w-full items-center rounded-md px-3 py-2 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">Sign out</button>
</div>
</div>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
name必填 | string | - | 作为标题显示的套餐名称。 |
email必填 | string | - | 已登录账号的电子邮箱地址。 |
items必填 | AccountItem[] | - | 要渲染的项目数组。 |
onSelect | (id: string) => void | - | 用户选择菜单项时触发，参数为所选项。 |
Initials and a gradient avatar are derived from `name`. The identity header is presentational - not a `menuitem` - so arrow keys skip it and land on the first real command; the sign-out entry renders in red via its `danger` flag. Escape closes and restores focus to the trigger.