ബ്രെഡ്ക്രംബ്

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 ഓതറിംഗ് പ്രാക്ടീസുകൾ കാണുക .