ബ്രെഡ്ക്രംബ്
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 ഓതറിംഗ് പ്രാക്ടീസ് ഗൈഡ് ബ്രെഡ്ക്രംബ് പാറ്റേൺ കാണുക .