બ્રેડક્રમ્બ
નેવિગેશનલ હાયરાર્કીમાં વર્તમાન પૃષ્ઠનું સ્થાન સૂચવો જે 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"
તે વર્તમાન પૃષ્ઠને રજૂ કરે છે તે દર્શાવવા માટે સેટની છેલ્લી આઇટમ પર લાગુ કરવું.
વધુ માહિતી માટે, ARIA ઓથરિંગ પ્રેક્ટિસ માર્ગદર્શિકા બ્રેડક્રમ્બ પેટર્ન જુઓ .