روٹی crumb

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

اس صفحہ پر

مثال

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

html

<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 کو دوبارہ مرتب کیے بغیر اوور رائڈ کر سکتے ہیں۔

html

<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 متغیر استعمال کریں۔

ایمبیڈڈ ایس وی جی کا استعمال

ڈیٹا URI کے بطور SVG کو ان لائن کرنے کے لیے کچھ حروف سے بچنے کے لیے URL کی ضرورت ہوتی ہے، خاص طور پر <، >اور #. یہی وجہ ہے کہ متغیر ہمارے Sass فنکشن$breadcrumb-divider سے گزرا ہے ۔ CSS حسب ضرورت پراپرٹی استعمال کرتے وقت، آپ کو اپنے طور پر اپنے SVG سے بچنے کے لیے URL کی ضرورت ہوتی ہے۔ کس چیز سے بچنا ہے اس بارے میں تفصیلی معلومات کے لیے CodePen پر کیون ویبر کی وضاحتیں پڑھیں ۔escape-svg()

html

<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;ہیں۔

html

<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 تصنیف کی مشقیں گائیڈ بریڈ کرمب پیٹرن دیکھیں ۔

سی ایس ایس

متغیرات

v5.2.0 میں شامل کیا گیا۔

بوٹسٹریپ کے ابھرتے ہوئے 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;