در حالت کلی، می‌توان دو نوع اصلی از Breadcrumbs در وب سایت‌ها تشخیص داد:

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

Breadcrumbs مبتنی بر سلسله مراتب: در این نوع Breadcrumbs، مسیر کاربر از بخشی از وب سایت که در آن قرار دارد، شروع شده و در جهت پایین به سمت بخش‌های زیرین تر و مرتبط با آن، ادامه می‌یابد. برای مثال، در یک وب سایت خبری، Breadcrumbs می‌تواند به این صورت باشد: خانه > بخش اخبار > بخش ورزشی > خبر اخبار ورزشی.

همچنین، برخی از وب سایت‌ها از نوع دیگری از Breadcrumbs به نام Hierarchy Breadcrumbs استفاده می‌کنند که در آن، سلسله مراتب کاملی از بخش‌های سایت به صورت یک درختی نمایش داده می‌شود. این نوع Breadcrumbs به کاربران کمک می‌کند تا به سرعت و با دقت بیشتری به بخش‌های مختلف وب سایت دسترسی پیدا کنند.

مزایای استفاده از Breadcrumbs :

استفاده از Breadcrumbs بردکرامب در یک وب سایت دارای مزایای مختلفی است، که شامل موارد زیر می‌شود:

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

افزایش نرخ تبدیل: با افزایش رضایت کاربران و بهبود تجربه کاربری، نرخ تبدیل به یک وب سایت نیز افزایش خواهد یافت.

بهبود سئو: با نمایش مسیر کامل، Breadcrumbs به موتورهای جستجو کمک می‌کند تا ساختار داخلی وب سایت را بهتر درک کنند و این موضوع بهبود رتبه و جایگاه سایت در نتایج جستجوی ارگانیک می‌شود.

کاهش نرخ بازگشت: با نمایش Breadcrumbs، کاربران به راحتی می‌توانند به بخش‌های دیگر سایت دسترسی پیدا کنند و در نتیجه، نرخ بازگشت به سایت کاهش می‌یابد.

بهبود سازماندهی وب سایت: Breadcrumbs به کاربران کمک می‌کند تا ساختار داخلی وب سایت را بهتر درک کنند و به راحتی به بخش‌های مختلف دسترسی پیدا کنند، که این موضوع باعث بهبود سازماندهی وب سایت می‌شود.

قطعه کد Breadcrumbs:

کد Breadcrumbs به شکل زیر می‌باشد:

توضیحات:

کد بالا یک ناوبری Breadcrumbs با استفاده از تگ nav و ol ایجاد می‌کند.
هر مورد از مسیر باید با استفاده از تگ li به صورت یک المان لیست در ol قرار بگیرد.
لینک هر مورد از مسیر باید درون تگ a قرار گیرد.
المان آخر مسیر که به صفحه فعلی اشاره دارد باید با کلاس active و برچسب aria-current=”page” نشان داده شود.

چه زمانی از Breadcrumbs استفاده میکنیم؟

Breadcrumbs یک عنصر ناوبری مفید برای وب سایت‌هایی است که دارای ساختار پیچیده ای هستند و کاربران باید برای رسیدن به یک صفحه، از چندین بخش و زیر بخش گذر کنند. در این موارد، استفاده از Breadcrumbs به کاربران کمک می‌کند تا به سادگی مسیر را دنبال کنند و به بخش‌های دیگر سایت دسترسی پیدا کنند.

در زیر شرایطی که استفاده از Breadcrumbs مفید است را بیان می‌کنیم:

سایت‌های دارای ساختار پیچیده: وب سایت‌هایی که دارای ساختار پیچیده ای هستند و دارای بیش از دو سطح ناوبری هستند، استفاده از Breadcrumbs مفید است.

سایت‌های دارای محتوای فراوان: وب سایت‌هایی که دارای محتوای فراوانی هستند و کاربران ممکن است به دنبال محتوای مختلفی باشند، از بردکرامب بهره می‌برند.

فروشگاه‌های آنلاین: در فروشگاه‌های آنلاین، Breadcrumbs به کاربران کمک می‌کند تا به راحتی محصولات را جستجو کرده و به سرعت به بخش‌های مختلف سایت دسترسی پیدا کنند.

سایت‌های خبری: در سایت‌های خبری که دارای بخش‌های مختلفی هستند، Breadcrumbs به کاربران کمک می‌کند تا به راحتی به بخش‌های مختلف دسترسی پیدا کنند.

در کل، استفاده از Breadcrumbs به کاربران کمک می‌کند تا به راحتی به بخش‌های مختلف وب سایت دسترسی پیدا کنند و بهبود تجربه کاربری آن‌ها را بهبود بخشند.