روٹی crumb

نیویگیشنل درجہ بندی کے اندر موجودہ صفحہ کے مقام کی نشاندہی کریں جو خود بخود CSS کے ذریعے الگ کرنے والوں کو شامل کرتا ہے۔

اس صفحہ پر

مثال

کم سے کم اسٹائل والا بریڈ کرمب بنانے کے لیے لنک کردہ فہرست آئٹمز کے ساتھ ترتیب شدہ یا غیر ترتیب شدہ فہرست کا استعمال کریں۔ حسب ضرورت اضافی شیلیوں کو شامل کرنے کے لیے ہماری یوٹیلیٹیز استعمال کریں۔

<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="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

تقسیم کرنے والے

ڈیوائیڈرز خود بخود CSS میں ::beforeاور کے ذریعے شامل ہو جاتے ہیں content۔ --bs-breadcrumb-dividerانہیں مقامی CSS کسٹم پراپرٹی میں ترمیم کرکے ، یا $breadcrumb-dividerSass متغیر کے ذریعے تبدیل کیا جا سکتا ہے — اور $breadcrumb-divider-flippedاگر ضرورت ہو تو اس کے RTL ہم منصب کے لیے۔ ہم اپنے Sass متغیر کو ڈیفالٹ کرتے ہیں، جو حسب ضرورت پراپرٹی کے فال بیک کے طور پر سیٹ کیا جاتا ہے۔ اس طرح، آپ کو ایک عالمی تقسیم کار ملتا ہے جسے آپ کسی بھی وقت CSS کو دوبارہ مرتب کیے بغیر اوور رائڈ کر سکتے ہیں۔

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

Sass کے ذریعے ترمیم کرتے وقت، اقتباس فنکشن کو سٹرنگ کے ارد گرد اقتباسات پیدا کرنے کی ضرورت ہوتی ہے۔ مثال کے طور پر، >تقسیم کار کے طور پر استعمال کرتے ہوئے، آپ اسے استعمال کر سکتے ہیں:

$breadcrumb-divider: quote(">");

ایمبیڈڈ SVG آئیکن استعمال کرنا بھی ممکن ہے ۔ اسے ہماری CSS کسٹم پراپرٹی کے ذریعے لاگو کریں، یا Sass متغیر استعمال کریں۔

<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");

آپ ڈیوائیڈر سیٹنگ کو بھی ہٹا سکتے ہیں --bs-breadcrumb-divider: '';(CSS کسٹم پراپرٹیز میں خالی ڈور ایک قدر کے طور پر شمار ہوتی ہے) یا Sass متغیر کو سیٹ کر سکتے $breadcrumb-divider: none;ہیں۔

<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

$breadcrumb-divider: none;

رسائی

چونکہ بریڈ کرمبس نیویگیشن فراہم کرتے ہیں، اس لیے ایک بامعنی لیبل شامل کرنا اچھا خیال ہے جیسے aria-label="breadcrumb"کہ عنصر میں فراہم کردہ نیویگیشن کی قسم کو بیان کرنا <nav>، اور ساتھ ہی سیٹ کے آخری آئٹم پر لاگو کرنا aria-current="page"اس بات کی نشاندہی کرنے کے لیے کہ یہ موجودہ صفحہ کی نمائندگی کرتا ہے۔

مزید معلومات کے لیے، بریڈ کرمب پیٹرن کے لیے WAI-ARIA تصنیف کی مشقیں دیکھیں ۔

سس

متغیرات

$breadcrumb-font-size:              null;
$breadcrumb-padding-y:              0;
$breadcrumb-padding-x:              0;
$breadcrumb-item-padding-x:         .5rem;
$breadcrumb-margin-bottom:          1rem;
$breadcrumb-bg:                     null;
$breadcrumb-divider-color:          $gray-600;
$breadcrumb-active-color:           $gray-600;
$breadcrumb-divider:                quote("/");
$breadcrumb-divider-flipped:        $breadcrumb-divider;
$breadcrumb-border-radius:          null;