خرده نان پیش فرض
ایجاد لینک های ناوبری با بوت استرپ خرده نان جزء استفاده کنید <nav> و <ol class="breadcrumb"> برای نمایش یک دنباله پودر سوخاری، که مکان صفحه فعلی را نشان می دهد.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
خرده نان با نماد خط
از سفارشی استفاده کنید .نان خرده نان کلاس برای نمایش پودر سوخاری با آیکون های ریمیکس سفارشی. آن را به <ol class="breadcrumb"> برای تقویت دنباله پودر سوخاری با نمادها.
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-line">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-line">
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-line mb-0">
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
خرده نان با نماد فلش
از سفارشی استفاده کنید .نان-پیکان کلاس برای ایجاد مسیرهای خرده نان با جداکننده های پیکانی با استفاده از نمادهای Remix. آن را به <ol class="breadcrumb"> برای یک ناوبری شیک و مبتنی بر نماد.
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-arrow">
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-arrow mb-0">
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
خرده نان با نماد پیکان دوتایی
از سفارشی استفاده کنید .نان-تیر دوبل کلاس برای ایجاد مسیرهای خرده نان با جداکننده های دو فلش با استفاده از نمادهای Remix. آن را به <ol class="breadcrumb"> برای یک سبک ناوبری منحصر به فرد و از نظر بصری متمایز.
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-double-arrow">
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-double-arrow mb-0">
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
خرده نان با اسلش
استفاده کنید .نان خرده نان کلاس برای نمایش اسلش بین آیتم های پودر سوخاری.
آن را اعمال کنید <ol class="breadcrumb"> برای یک سبک ناوبری تمیز
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-slash">
<li><i class="ri-home-4-line fs-16 me-2 lh-sm"></i></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-slash">
<li><i class="ri-home-4-line fs-16 me-2 lh-sm"></i></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-slash mb-0">
<li><i class="ri-home-4-line fs-16 me-2 lh-sm"></i></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
آرد سوخاری رنگی
با استفاده از کلاس های ابزار Bootstrap مانند، مسیرهای پودر سوخاری رنگارنگ ایجاد کنید .bg-primary یا .text-light به <nav> یا <ol class="breadcrumb">. این کار پس زمینه های پر جنب و جوش یا رنگ های متن را به شما اضافه می کند
پودر سوخاری
<nav aria-label="breadcrumb">
<ol class="breadcrumb colored-breadcrumb breadcrumb-double-arrow bg-primary mb-3">
<li><i class="ri-home-4-line fs-16 text-white me-2 lh-sm"></i></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb colored-breadcrumb breadcrumb-double-arrow bg-secondary mb-3">
<li><i class="ri-home-4-line fs-16 text-white me-2 lh-sm"></i></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb colored-breadcrumb breadcrumb-double-arrow bg-success mb-3">
<li><i class="ri-home-4-line fs-16 text-white me-2 lh-sm"></i></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>