Menubar

نصب

pnpm dlx @simurgh-ui/cli add menubar

import { Menubar, MenubarItem } from '@simurgh-ui/react/menubar';
import { Menubar as VueMenubar, MenubarItem as VueMenubarItem } from '@simurgh-ui/vue/menubar';
import { MenubarComponent, MenubarItemDirective } from '@simurgh-ui/angular/menubar';
import '@simurgh-ui/styles/menubar.css';

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

Live component Menubar ◆

FileEditView

استفاده

<Menubar label="ویرایشگر">
  <MenubarItem onClick={createDocument}>فایل</MenubarItem>
  <MenubarItem onClick={undo}>ویرایش</MenubarItem>
  <MenubarItem disabled>نمایش</MenubarItem>
</Menubar>

<simurgh-menubar label="ویرایشگر">
  <button simurghMenubarItem (select)="createDocument()">فایل</button>
  <button simurghMenubarItem (select)="undo()">ویرایش</button>
  <button simurghMenubarItem [disabled]="true">نمایش</button>
</simurgh-menubar>

صفحه‌کلید و RTL

Tab یک بار وارد Menubar می‌شود و roving tabindex، item فعال را نگه می‌دارد. Arrow چپ/راست میان itemها حرکت می‌کند و در RTL معکوس می‌شود؛ Home/End به ابتدا و انتها و Enter یا Space به activation می‌روند. item disabled skip می‌شود.

Menubar برای commandهای application است، نه navigation معمول سایت. label باید purpose گروه را مشخص کند.

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