Breadcrumbv1.0.0
مسیر سلسله‌مراتبی صفحهٔ جاری؛ جهت فلش‌های جداکننده به‌صورت خودکار با RTL هماهنگ است.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/breadcrumb.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/breadcrumb.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/breadcrumb.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/breadcrumb.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
دسترس‌پذیری
- در یک nav با برچسب «مسیر راهنما» قرار دارد.
- صفحهٔ جاری با aria-current='page' مشخص می‌شود و جداکننده‌ها از درخت دسترس‌پذیری حذف شده‌اند.
مرجع API
BreadcrumbLink
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| asChild | boolean | false | برای استفاده با Link نکست از asChild استفاده کنید. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
With Ellipsis
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
مسیر عمیق (Overflow)
بیش از چهار آیتم، مسیر را شلوغ می‌کند. سطح‌های میانی را با BreadcrumbEllipsis جمع کنید و اولین و آخرین سطح را نگه دارید؛ کاربر همیشه می‌داند از کجا شروع کرده و کجاست.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
عنوان بلند (Overflow)
آیتم فعلی (غیرقابل‌کلیک) را کوتاه کنید، نه راهنماها را؛ راهنماها باید کامل و کلیک‌پذیر بمانند. shrink-0 روی آیتم‌های راهنما می‌گذارد که محو نشوند و min-w-0 روی آیتم فعلی که truncate کار کند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| With Ellipsis | مسیری با یک سطح میانی که نیازی به نمایش کامل ندارد |
| مسیر عمیق (Overflow) | صفحه‌ای که بیش از سه سطح تودرتو است |
| عنوان بلند (Overflow) | صفحهٔ فعلی با نامی که در عرض کم جا نمی‌شود |
دستورالعمل استفاده
صفحهٔ جاری لینک نیست
انجام بده
آخرین آیتم مسیر را با BreadcrumbPage بسازید؛ متن ساده با aria-current='page' است، نه یک لینک به همان صفحه.
انجام نده
لینک‌دادن به صفحهٔ جاری یعنی کلیک روی آخرین آیتم کاربر را به همان جایی می‌برد که هست؛ گیج‌کننده و بی‌فایده است.
سطح‌های میانی هم لینک باشند
انجام بده
هر سطح میانی را با BreadcrumbLink بسازید تا کاربر بتواند مستقیم به هر جای مسیر برگردد.
انجام نده
متن ساده به‌جای BreadcrumbLink برای سطح‌های میانی، تنها راه برگشت را مرورگر می‌گذارد نه خود ناوبری.
مسیرهای طولانی را با Ellipsis جمع کنید
انجام بده
برای مسیرهای عمیق، سطح‌های میانی را با BreadcrumbEllipsis جمع کنید تا فقط ابتدا و انتهای مسیر دیده شود.
انجام نده
چیدن پنج‌شش سطح پشت‌سرهم باعث می‌شود مسیر راهنما به چند خط بشکند و در هدر جا نشود.