ਬਰੈੱਡਕ੍ਰੰਬ
ਇੱਕ ਨੈਵੀਗੇਸ਼ਨਲ ਲੜੀ ਦੇ ਅੰਦਰ ਮੌਜੂਦਾ ਪੰਨੇ ਦੇ ਟਿਕਾਣੇ ਨੂੰ ਦਰਸਾਓ ਜੋ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ 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>
ਵਿਭਾਜਕ ਨੂੰ ਬਦਲਣਾ
ਵਿਭਾਜਕ ::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;
ਪਹੁੰਚਯੋਗਤਾ
ਕਿਉਂਕਿ ਬ੍ਰੈੱਡਕ੍ਰਮਬ ਇੱਕ ਨੈਵੀਗੇਸ਼ਨ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ, ਇੱਕ ਅਰਥਪੂਰਨ ਲੇਬਲ ਜੋੜਨਾ ਇੱਕ ਚੰਗਾ ਵਿਚਾਰ ਹੈ ਜਿਵੇਂ ਕਿ ਤੱਤ aria-label="breadcrumb"
ਵਿੱਚ ਪ੍ਰਦਾਨ ਕੀਤੀ ਗਈ ਨੈਵੀਗੇਸ਼ਨ ਦੀ ਕਿਸਮ ਦਾ ਵਰਣਨ ਕਰਨਾ , ਨਾਲ ਹੀ ਇਹ ਦਰਸਾਉਣ ਲਈ ਕਿ ਇਹ ਮੌਜੂਦਾ ਪੰਨੇ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ ਸੈੱਟ ਦੀ ਆਖਰੀ ਆਈਟਮ 'ਤੇ ਇੱਕ ਲਾਗੂ ਕਰਨਾ।<nav>
aria-current="page"
ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ, ਏਆਰਆਈਏ ਆਥਰਿੰਗ ਪ੍ਰੈਕਟਿਸ ਗਾਈਡ ਬ੍ਰੈੱਡਕ੍ਰੰਬ ਪੈਟਰਨ ਦੇਖੋ ।