Navigation Menu
منوی ناوبری سربرگ سایت: چند عنوان که هرکدام یک پنل محتوایی باز میکنند. برخلاف منوی کشویی، برای ناوبری بین بخشهای سایت ساخته شده نه اجرای دستور، و ساختارش یک nav واقعی با فهرست لینکهاست.
این کامپوننت فعلاً برای ۱ فریمورک از ۴ فریمورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
نصب
با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگیها و فایلها خودکار اضافه میشوند.
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/navigation-menu.jsonnpx dig-ui@latest add https://design-system-tau-green.vercel.app/r/navigation-menu.jsonyarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/navigation-menu.jsonbunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/navigation-menu.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
استفاده
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>محصولات</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="grid w-80 gap-1 p-2">…</ul>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
ترکیب اجزا
دسترسپذیری
- ساختار یک nav با فهرست لینکهاست، پس صفحهخوان آن را بهعنوان ناوبری معرفی میکند؛ برای منوی دستور از منوی کشویی استفاده کنید نه این.
- کلیدهای چپ و راست بین عنوانها حرکت میکنند و جهتشان از dir صفحه میآید؛ در راستبهچپ برعکس میشود.
- پنل با Escape بسته میشود و فوکوس به تریگر برمیگردد؛ با Tab هم میتوان وارد لینکهای داخل پنل شد.
- برای صفحهٔ فعلی روی لینک data-active بگذارید؛ رنگ پسزمینهٔ متفاوت بهتنهایی برای صفحهخوان کافی نیست، aria-current="page" هم بدهید.
- روی موبایل این منو جا نمیشود؛ در عرض کم به کشو یا آکاردئون تبدیلش کنید.
مرجع API
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
نمونهها
Without Viewport
با viewport={false} هر پنل مستقیم زیر عنوان خودش باز میشود؛ برای منوهای کوچک سادهتر است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
Active Link
لینک صفحهٔ فعلی با data-active متمایز میشود؛ aria-current را هم بدهید.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
آیتم غیرفعال (Disabled)
لینک را حذف نکنید؛ با data-disabled و aria-disabled غیرفعالش کنید تا کاربر بداند این مسیر وجود دارد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار میآید |
|---|---|
| Without Viewport | با viewport={false} هر پنل مستقیم زیر عنوان خودش باز میشود؛ برای منوهای کوچک سادهتر است. |
| Active Link | لینک صفحهٔ فعلی با data-active متمایز میشود؛ aria-current را هم بدهید. |
| آیتم غیرفعال (Disabled) | بخشی از منو که بهزودی میآید یا دسترسی ندارید |
دستورالعمل استفاده
ظاهر یکدست برای همهٔ عنوانها
انجام بده
لینکهای بدون پنل را با navigationMenuTriggerStyle() بسازید تا ارتفاع، فاصله و حالت hover همهٔ عنوانهای نوار یکی باشد.
انجام نده
لینک خام کنار عنوانهای استاندارد، ارتفاع و ترازش فرق میکند و نوار بههمریخته دیده میشود.
برای ناوبری، نه اجرای دستور
انجام بده
محتوای پنل باید فهرستی از لینکهای مقصد باشد؛ همین است که این کامپوننت را از منوی کشویی جدا میکند.
انجام نده
برای دستورهایی مثل «کپی» و «حذف» از منوی کشویی استفاده کنید؛ گذاشتنشان اینجا هم ساختار nav را بیمعنا میکند و هم انتظار کاربر را میشکند.