تم تاریک
بردکرامب Breadcrumb
نشانگرهای مسیر به کاربران مکان فعلی آنها را نسبت به معماری اطلاعات نشان میدهند و به آنها امکان میدهند به سرعت به سطح والد یا گام قبلی برگردند.
Breadcrumbs برای سلسله مراتب ناوبری عمیق و چند سطحی (بیش از ۲ سطح) بسیار مناسب هستند و زمینهای روشن برای مکان کاربر در درون ساختار ناوبری ارایه میدهند.
نمونه زنده
آناتومی
ساختار بردکرامب از سه بخش اصلی تشکیل شده است که ترتیب آنها همواره از ساختار ناوبری پیروی میکند:
- صفحه کنونی (Current page): یک عنصر غیر قابل کلیک که عنوان صفحه فعلی کاربر را نمایش میدهد.
- جداکننده (Separator): المانی که صفحات مختلف را به وضوح از یکدیگر متمایز میکند.
- لینک صفحه (Page link): لینکهای والد که به دستههای بالاتر اشاره دارند.
سلسلهمراتب
چه زمانی استفاده کنیم؟
- در محصولاتی با حجم محتوای زیاد و سلسله مراتب بیش از دو سطح.
چه زمانی استفاده نکنیم؟
- بردکرامب نباید جایگزین ناوبری اصلی (Main Navigation) شود.
- در محصولاتی با ناوبری تکسطحی، استفاده از بردکرامب باعث ایجاد ازدحام غیرضروری و سردرگمی میشود.
چیدمان
محل قرارگیری
بردکرامبها در بخش بالا و سمت راست صفحه (در حالت RTL) قرار میگیرند.
فواصل
| موضوع | مقدار |
|---|---|
| فاصله از Sub-header | 16px space5 |
| فاصله از Container | 16px space5 |
نوشتار
- طول برچسب: اگر متن برچسب برای فضای افقی موجود بزرگ باشد، باید متن را با نقطهچین (Ellipsis) قطع کنید.
- محل قطع شدن: به طور پیشفرض، قطع شدن باید در انتهای عنوان اتفاق بیفتد. در موارد خاص که انتهای عنوان برای کاربر حیاتی است، قطع کردن از وسط نیز مجاز است.
- ممنوعیت Wrap: برچسبهای Breadcrumb تحت هیچ شرایطی نباید شکسته شده و در دو خط نمایش داده شوند.
| Do | Don't |
|---|---|
| برچسبهای طولانی را با نقطهچین قطع کنید. | برچسبهای Breadcrumb را به خط بعد منتقل نکنید (Wrap نکنید). |