البناء · جديد

قائمة التنقل

تنقّل الموقع بلوحات منسدلة: كل لوحة فيها وجهات قليلة بأيقونة وسطر قصير، وبطاقة مميزة واحدة على الأكثر.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/navigation-menu

الاعتماديات التي يضيفها: @base-ui/react, @phosphor-icons/react

الاستخدام

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuLinks,
  NavigationMenuList,
  NavigationMenuPanelLink,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu";

<NavigationMenu aria-label="Main">
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLinks>
          <NavigationMenuPanelLink href="/payments" icon={CreditCardIcon} title="Payments" description="Accept cards, Apple Pay and CliQ." />
        </NavigationMenuLinks>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/pricing">Pricing</NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

أمثلة

عمود واحد، والصفحة الحالية

‏columns={1} للوحات القصيرة وبلا بطاقة مميزة. الرابط البسيط للصفحة الحالية يأخذ active (aria-current="page").

مرجع الخصائص

الخاصية	النوع	الافتراضي	الوصف
`aria-label`	`string`		اسم التنقل، إن كان في الصفحة أكثر من `nav`.
`delay / closeDelay`	`number`	`50 / 50`	المهلة قبل الفتح والإغلاق بالمؤشر (ملّي ثانية).
`value / onValueChange`	`string \| null`		اللوحة المفتوحة، للتحكم من الكود.

NavigationMenuTrigger

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`		خاصية Label. السهم يُضاف تلقائيًا.

NavigationMenuLink

الخاصية	النوع	الوصف
`href`	`string`	رابط بسيط في الصف، بلا لوحة.
`active`	`boolean`	الصفحة الحالية.
`render`	`ReactElement`	رابط إطار العمل، مثل `<Link />` من Next.

NavigationMenuLinks

الخاصية	النوع	الافتراضي	الوصف
`columns`	`1 \| 2`	`2`	أعمدة الروابط، بعرض 220px.

NavigationMenuPanelLink

الخاصية	النوع	الوصف
`icon`	`IconComponent`	أيقونة في مربع `brand/faint`.
`title`	`ReactNode`	خاصية Title: الوجهة.
`description`	`ReactNode`	خاصية Description: سطر قصير.
`href / render`	`string / ReactElement`	الرابط.

NavigationMenuFeatured

الخاصية	النوع	الوصف
`tag`	`ReactNode`	الوسم الصغير في الأعلى («جديد»).
`title / description`	`ReactNode`	العنوان والوصف.
`linkLabel`	`ReactNode`	الدعوة في الأسفل؛ البطاقة كلها رابط.

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

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	بين عناصر الصف؛ من زر مفتوح إلى روابط لوحته ثم إلى العنصر التالي.
`EnterSpace`	على زر: يفتح لوحته أو يغلقها.
`ArrowRightArrowLeft`	بين عناصر الصف؛ بالعربية السهم الأيسر إلى التالي.
`Esc`	يغلق اللوحة ويعيد التركيز إلى زرها.

ARIA

‏<nav> فيه قائمة (ul) من العناصر؛ لكل زر aria-expanded وaria-controls.
روابط اللوحة روابط حقيقية، والبطاقة المميزة رابط واحد.
الأزرار ارتفاعها 32px ومنطقة لمسها 48px عموديًا فقط.
على الجوال: زر قائمة يفتح درجًا فيه المجموعات نفسها في أكورديون.

ملاحظات العربية والاتجاه

ينعكس

أول عنصر على اليمين، واللوحة تبدأ من الحافة اليمنى للصف.
روابط اللوحة تُقرأ من اليمين، والبطاقة المميزة على اليسار.

لا ينعكس

سهم الزر يشير إلى الأسفل ويدور عند الفتح، ولا ينعكس.
أيقونات الروابط لا تنعكس.

الأرقام: الأرقام في الأوصاف تتبع إعداد الأرقام (toNumerals للنصوص الثابتة).
الخط العربي: الأزرار label-14 Medium، وعناوين الروابط label-14 Semibold، والأوصاف label-12، وعنوان البطاقة label-16 Semibold.
النص ثنائي الاتجاه: أسماء المنتجات اللاتينية (Apple Pay وiOS) داخل الوصف العربي تبقى بترتيبها. اللوحة تحمل اتجاه الصفحة ولغتها إلى خارجها.

كل المكونات ›