બ્રેડક્રમ્બ

નેવિગેશનલ હાયરાર્કીમાં વર્તમાન પૃષ્ઠનું સ્થાન સૂચવો જે 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(">");

base64 એમ્બેડેડ SVG આઇકનનો ઉપયોગ કરવો પણ શક્ય છે :

$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

વિભાજકને સેટ કરીને દૂર કરી શકાય $breadcrumb-dividerછે none:

$breadcrumb-divider: none;

ઉપલ્બધતા

કારણ કે બ્રેડક્રમ્સ નેવિગેશન પ્રદાન કરે છે, તે અર્થપૂર્ણ લેબલ ઉમેરવાનો સારો વિચાર છે જેમ કે તત્વમાં aria-label="breadcrumb"આપેલા નેવિગેશનના પ્રકારનું વર્ણન કરવા <nav>, તેમજ aria-current="page"તે વર્તમાન પૃષ્ઠને રજૂ કરે છે તે દર્શાવવા માટે સેટની છેલ્લી આઇટમ પર લાગુ કરવું.

વધુ માહિતી માટે, બ્રેડક્રમ્બ પેટર્ન માટે WAI-ARIA ઓથરિંગ પ્રેક્ટિસ જુઓ .