روٹی crumb

مثال

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

<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='%236c757d'/%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,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");

آپ ڈیوائیڈر سیٹنگ کو بھی ہٹا سکتے ہیں --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"اس بات کی نشاندہی کرنے کے لیے کہ یہ موجودہ صفحہ کی نمائندگی کرتا ہے۔

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

سی ایس ایس

متغیرات

بوٹسٹریپ کے ابھرتے ہوئے CSS متغیرات کے نقطہ نظر کے حصے کے طور پر، بریڈ کرمبس اب مقامی CSS متغیرات .breadcrumbکو بہتر ریئل ٹائم حسب ضرورت کے لیے استعمال کرتے ہیں۔ CSS متغیرات کی قدریں Sass کے ذریعے سیٹ کی جاتی ہیں، اس لیے Sass حسب ضرورت اب بھی تعاون یافتہ ہے۔

  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
  

Sass متغیرات

$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;