شريط قوائم

Menubar

شريط قوائم أفقي بنمط سطح المكتب في React مبني على Radix، بقوائم متداخلة وعناصر مربّعات اختيار وأزرار اختيار ومشغّلات محدّدة. تتحرّك مفاتيح الأسهم عبر القوائم وداخلها.

افتح في ستوري بوك ↗

يقدم Menubar نمط File / Edit / View. يضم كل MenubarMenu مشغلًا وقائمة عناصر، وتتنقل مفاتيح الأسهم عبر القوائم وداخلها.

متى تستخدمه

استخدم Menubar في الأدوات المكتبية الكثيفة مثل محرّرات المستندات ولوحات الإدارة الخلفية حيث يتوقّع المستخدم قوائم بنمط ملف وتحرير وعرض. لقائمة إجراءات واحدة، استخدم DropdownMenu. للتنقّل الرئيسي في الموقع، استخدم Sidebar أو SlideoutMenu.

أمثلة

ملف / تحرير / عرض

مربّعات اختيار ومجموعة أزرار

مشغّلات محدّدة

الخصائص

الخصائص التي يعرّفها Menubar. سمات العنصر الأصلي تمرّ كما هي.

<Menubar>

الخاصية	النوع	الافتراضي	الوصف
`value`	`string`
`defaultValue`	`string`
`onValueChange`	`(value: string) => void`
`loop`	`boolean`
`dir`	`Direction`
`asChild`	`boolean`

<MenubarMenu>

الخاصية	النوع	الافتراضي	الوصف
`__scopeMenubar`	`_radix_ui_react_context.Scope`
`value`	`string`
`children`	`ReactNode`

<MenubarTrigger>

الخاصية	النوع	الافتراضي	الوصف
`variant`	`"outline" \| "default"`
`asChild`	`boolean`

<MenubarContent>

الخاصية	النوع	الافتراضي	الوصف
`size`	`"sm" \| "md"`
`forceMount`	`true`		Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
`onCloseAutoFocus`	`(event: Event) => void`		Event handler called when auto-focusing on close. Can be prevented.
`loop`	`boolean`	`false`	Whether keyboard navigation should loop around
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`
`onPointerDownOutside`	`(event: PointerDownOutsideEvent) => void`
`onFocusOutside`	`(event: FocusOutsideEvent) => void`
`onInteractOutside`	`(event: PointerDownOutsideEvent \| FocusOutsideEvent) => void`
`side`	`"top" \| "right" \| "bottom" \| "left"`
`sideOffset`	`number`
`align`	`"center" \| "start" \| "end"`
`alignOffset`	`number`
`arrowPadding`	`number`
`avoidCollisions`	`boolean`
`collisionBoundary`	`Element \| Element[]`
`collisionPadding`	`number \| Partial<Record<"top" \| "right" \| "bottom" \| "left", number>>`
`sticky`	`"always" \| "partial"`
`hideWhenDetached`	`boolean`
`updatePositionStrategy`	`"always" \| "optimized"`
`asChild`	`boolean`

<MenubarItem>

الخاصية	النوع	الوصف
`destructive`	`boolean`	Style as a destructive action (red text, red hover).
`startIcon`	`react.ReactNode`	Icon rendered before the label. Sized to 1em.
`shortcut`	`react.ReactNode`	Trailing text shown muted, e.g. a keyboard shortcut hint ("⌘K").
`onSelect`	`(event: Event) => void`
`disabled`	`boolean`
`textValue`	`string`
`asChild`	`boolean`

<MenubarCheckboxItem>

الخاصية	النوع	الافتراضي	الوصف
`onSelect`	`(event: Event) => void`
`disabled`	`boolean`
`textValue`	`string`
`checked`	`CheckedState`
`onCheckedChange`	`(checked: boolean) => void`
`asChild`	`boolean`

<MenubarRadioGroup>

الخاصية	النوع	الافتراضي	الوصف
`value`	`string`
`onValueChange`	`(value: string) => void`
`asChild`	`boolean`

<MenubarRadioItem>

الخاصية	النوع	الافتراضي	الوصف
`onSelect`	`(event: Event) => void`
`disabled`	`boolean`
`textValue`	`string`
`value`إلزامي	`string`
`asChild`	`boolean`

<MenubarLabel>

الخاصية	النوع	الافتراضي	الوصف
`asChild`	`boolean`

<MenubarSeparator>

الخاصية	النوع	الافتراضي	الوصف
`asChild`	`boolean`

<MenubarGroup>

الخاصية	النوع	الافتراضي	الوصف
`asChild`	`boolean`

<MenubarSub>

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`
`open`	`boolean`
`defaultOpen`	`boolean`
`onOpenChange`	`(open: boolean) => void`

<MenubarSubTrigger>

الخاصية	النوع	الافتراضي	الوصف
`startIcon`	`react.ReactNode`
`disabled`	`boolean`
`textValue`	`string`
`asChild`	`boolean`

<MenubarSubContent>

الخاصية	النوع	الافتراضي	الوصف
`size`	`"sm" \| "md"`
`loop`	`boolean`	`false`	Whether keyboard navigation should loop around
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`
`onPointerDownOutside`	`(event: PointerDownOutsideEvent) => void`
`onFocusOutside`	`(event: FocusOutsideEvent) => void`
`onInteractOutside`	`(event: PointerDownOutsideEvent \| FocusOutsideEvent) => void`
`forceMount`	`true`		Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
`align`	`AlignSubContent`		Controls the direction the subcontent appears from its anchor menu item Default: start
`sideOffset`	`number`
`alignOffset`	`number`
`arrowPadding`	`number`
`avoidCollisions`	`boolean`
`collisionBoundary`	`Element \| Element[]`
`collisionPadding`	`number \| Partial<Record<"top" \| "right" \| "bottom" \| "left", number>>`
`sticky`	`"always" \| "partial"`
`hideWhenDetached`	`boolean`
`updatePositionStrategy`	`"always" \| "optimized"`
`asChild`	`boolean`

إمكانية الوصول

يعرض الشريط role="menubar" بمشغّلات قوائم؛ ينقل السهمان الأيسر والأيمن بين القوائم، وينقل السهمان العلوي والسفلي داخل الواحدة، ويغلق Escape القائمة المفتوحة. تقفز الكتابة إلى العنصر المطابق.

تعرض عناصر مربّعات الاختيار وأزرار الاختيار aria-checked. تتبع مفاتيح الأسهم اتجاه القراءة في العربية.