د ډوډۍ ټوټه
د اوسني مخ موقعیت په نیویګیشنل درجه بندي کې په ګوته کړئ چې په اتوماتيک ډول د 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
. دوی د بدلون په واسطه بدل کیدی شي $breadcrumb-divider
. د اقتباس فنکشن ته اړتیا ده چې د سټینګ شاوخوا نرخونه رامینځته کړي ، نو که تاسو >
د جلا کونکي په توګه غواړئ ، تاسو کولی شئ دا وکاروئ:
$breadcrumb-divider: quote(">");
دا هم امکان لري چې د بیس 64 ایمبیډ شوي SVG آیکون وکاروئ :
$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
$breadcrumb-divider
جلا کوونکی د دې ترتیب کولو له لارې لرې کیدی شي none
:
$breadcrumb-divider: none;
لاسرسی
څرنګه چې breadcrumbs یو نیویګیشن چمتو کوي، نو دا یو ښه نظر دی چې یو معنی لرونکی لیبل اضافه کړئ لکه aria-label="breadcrumb"
په عنصر کې چمتو شوي نیویګیشن ډول تشریح کول <nav>
، او همدارنګه aria-current="page"
د سیټ وروستي توکي ته د یو پلي کول په ګوته کول چې دا د اوسني پاڼې استازیتوب کوي.
د لا زیاتو معلوماتو لپاره، د ARIA لیکوال کولو طرزالعملونو لارښود روډ کرمب نمونه وګورئ .