Breadcrumb | سیستم طراحی سپانو

Breadcrumb

در سیستم طراحی سپانو دیتا انواع Breadcrumbها عبارتند از :

Lightmode, Darkmode

مشخصات کلی

تمامی Breadcrumbها برای دو حالت تاریک و روشن صفحه طراحی شده‌اند.

استفاده از هر نوع از Breadcrumb‌ها بنا به اهمیت آن‌ها است.

منابع

فایل فیگما سیستم طراحی سپانو دسترسی کامل به تمامی کامپوننت‌ها و شیوه‌نامه‌های سیستم طراحی سپانوwest

فایل لوگو سپانو دیتا دریافت لوگو رسمی و سازمانی سپانو دیتاwest

Breadcrumb

رنگ

Hex	Element
#9E9E9E	1. Text Color
#1AAB66	2. Icon Color

Hex	Element
#E6E1E5	1. Text Color
#3ECF8A	2. Icon Color

چیدمان

Breadcrumb

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

                                                        
<nav aria-label="breadcrumb">
    <ol class="breadcrumb" class="sdp-breadcrumb">
      <li class="breadcrumb-item sdp-breadcrumb-item active" aria-current="page">
        <a href="#" class="sdp-breadcrumb-link">صفحه اصلی</a>
      </li>
      <span class="material-icons sdp-breadcrumb-divider">keyboard_arrow_left</span>
      <li class="breadcrumb-item sdp-breadcrumb-item">
        <a href="#" class="sdp-breadcrumb-link">درباره ما</a>
      </li>
      <span class="material-icons sdp-breadcrumb-divider">keyboard_arrow_left</span>
      <li class="breadcrumb-item sdp-breadcrumb-item">
        <a href="#" class="sdp-breadcrumb-link">تیم سپانو دیتا</a>
      </li>
    </ol>
  </nav>


                                                            
.breadcrumb-item+.breadcrumb-item::before {
    float: right;
    padding-left: 0 !important;
    content: '' !important;
}
  
a.sdp-breadcrumb-link {
    color: #9E9E9E;
    text-decoration: none;
}
  
a.sdp-breadcrumb-link:hover {
    color: #666666;
}
  
.sdp-breadcrumb-divider {
    color: #1AAB66;
}

Breadcrumb (Dark)

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

                                                        
<nav aria-label="breadcrumb">
    <ol class="breadcrumb" class="sdp-breadcrumb">
      <li class="breadcrumb-item sdp-breadcrumb-item active" aria-current="page">
        <a href="#" class="sdp-breadcrumb-link">صفحه اصلی</a>
      </li>
      <span class="material-icons sdp-breadcrumb-divider">keyboard_arrow_left</span>
      <li class="breadcrumb-item sdp-breadcrumb-item">
        <a href="#" class="sdp-breadcrumb-link">درباره ما</a>
      </li>
      <span class="material-icons sdp-breadcrumb-divider">keyboard_arrow_left</span>
      <li class="breadcrumb-item sdp-breadcrumb-item">
        <a href="#" class="sdp-breadcrumb-link">تیم سپانو دیتا</a>
      </li>
    </ol>
  </nav>


                                                            
.breadcrumb-item+.breadcrumb-item::before {
    float: right;
    padding-left: 0 !important;
    content: '' !important;
}

.dark a.sdp-breadcrumb-link {
    color: #E6E1E5;
    text-decoration: none;
  }
  
  .dark a.sdp-breadcrumb-link:hover {
    color: #ffffff;
  }
  
  .dark .sdp-breadcrumb-divider {
    color: #3ECF8A;
  }

موارد استفاده

کامپوننت Breadcrumb هنگامی استفاده می‌شود که نیاز به نمایش سلسله‌مراتبی جایگاه فعلی کاربر در سایت یا برنامه است. این کامپوننت لیستی از لینک‌ها است که مسیر کاربر در سایت را نشان می‌دهد.
این کامپوننت به کاربران این امکان را می‌دهد تا علاوه بر تشخیص جایگاه فعلی، به سرعت به صفحات قبلی نیز جابه‌حا شوند.
کامپوننت Breadcrumb، جای کمی اشغال می‌کند و به عنوان یک روش ثانویه برای جابه‌جایی در سایت نیز استفاده می‌شود.

نکات کلی

کامپوننت breadcrumb معمولا در بالای صفحه، پایین هدر و قبل از عنوان اصلی محتوا قرار می‌گیرد.

کامپوننت Breadcrumb هنگامی که کاربر از یک لینک خارجی وارد سایت می‌شود (و یا سایت محتوای زیاد و پیچیده دارد) بسیار مفید است.
طراحی این کامپوننت باید ساده و گویا باشد تا از گمراه شدن کاربر جلوگیری کند.

سیستم طراحی شرکت سپانو دیتا پارس

موارد استفاده

نکات کلی