Dropdown Menu

نصب

pnpm dlx @simurgh-ui/cli add dropdown-menu

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from '@simurgh-ui/react/dropdown-menu';
import '@simurgh-ui/styles/dropdown-menu.css';

Vue همین partها را صادر می‌کند. Angular از DropdownMenuComponent و DropdownMenuItemDirective استفاده می‌کند.

پیش‌نمایش واقعی

Live component Dropdown Menu ◆

Actions

استفاده

<DropdownMenu>
  <DropdownMenuTrigger>عملیات</DropdownMenuTrigger>
  <DropdownMenuContent aria-label="عملیات سند">
    <DropdownMenuItem onSelect={archive}>بایگانی</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

<simurgh-dropdown-menu>
  <span trigger>عملیات</span>
  <button simurghMenuItem (select)="archive()">بایگانی</button>
</simurgh-dropdown-menu>

صفحه‌کلید

Tab به trigger می‌رسد. Arrow بالا و پایین و Home/End میان itemهای فعال حرکت می‌کنند؛ Enter یا Space action را فعال می‌کند. Escape منو را می‌بندد و focus باید به trigger برگردد. item غیرفعال از navigation و activation کنار گذاشته می‌شود.

Content را با accessible name مشخص کنید. برای انتخاب state پایدار به‌جای action menu از Select یا Radio Group استفاده کنید.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.