ಬ್ರೆಡ್ಕ್ರಂಬ್
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
ಮತ್ತು ಮೂಲಕ CSS ನಲ್ಲಿ ವಿಭಜಕಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸೇರಿಸಲಾಗುತ್ತದೆ 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 ಆಥರಿಂಗ್ ಅಭ್ಯಾಸಗಳ ಮಾರ್ಗದರ್ಶಿ ಬ್ರೆಡ್ಕ್ರಂಬ್ ಮಾದರಿಯನ್ನು ನೋಡಿ .