બ્રેડક્રમ્બ
નેવિગેશનલ હાયરાર્કીમાં વર્તમાન પૃષ્ઠનું સ્થાન સૂચવો જે 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
. --bs-breadcrumb-divider
તેમને સ્થાનિક CSS કસ્ટમ પ્રોપર્ટીમાં ફેરફાર કરીને અથવા $breadcrumb-divider
Sass વેરીએબલ દ્વારા બદલી શકાય છે — અને $breadcrumb-divider-flipped
જો જરૂરી હોય તો તેના RTL સમકક્ષ માટે. અમે અમારા Sass વેરીએબલને ડિફોલ્ટ કરીએ છીએ, જે કસ્ટમ પ્રોપર્ટીમાં ફોલબેક તરીકે સેટ છે. આ રીતે, તમને વૈશ્વિક વિભાજક મળે છે જેને તમે કોઈપણ સમયે CSS પુનઃસંકલિત કર્યા વિના ઓવરરાઇડ કરી શકો છો.
<nav style="--bs-breadcrumb-divider: '>';" 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>
Sass દ્વારા સંશોધિત કરતી વખતે, ક્વોટ ફંક્શન શબ્દમાળાની આસપાસના અવતરણો જનરેટ કરવા માટે જરૂરી છે. ઉદાહરણ તરીકે, >
વિભાજક તરીકે ઉપયોગ કરીને, તમે આનો ઉપયોગ કરી શકો છો:
$breadcrumb-divider: quote(">");
એમ્બેડેડ SVG આઇકનનો ઉપયોગ કરવો પણ શક્ય છે . તેને અમારી CSS કસ્ટમ પ્રોપર્ટી દ્વારા લાગુ કરો અથવા Sass વેરીએબલનો ઉપયોગ કરો.
<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");" 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>
$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");
તમે વિભાજક સેટિંગને પણ દૂર કરી શકો છો --bs-breadcrumb-divider: '';
(CSS કસ્ટમ પ્રોપર્ટીઝમાં ખાલી સ્ટ્રિંગ્સ મૂલ્ય તરીકે ગણાય છે), અથવા Sass ચલને $breadcrumb-divider: none;
.
<nav style="--bs-breadcrumb-divider: '';" 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>
$breadcrumb-divider: none;
ઉપલ્બધતા
કારણ કે બ્રેડક્રમ્સ નેવિગેશન પ્રદાન કરે છે, તે અર્થપૂર્ણ લેબલ ઉમેરવાનો સારો વિચાર છે જેમ કે તત્વમાં aria-label="breadcrumb"
આપેલા નેવિગેશનના પ્રકારનું વર્ણન કરવા <nav>
, તેમજ aria-current="page"
તે વર્તમાન પૃષ્ઠને રજૂ કરે છે તે દર્શાવવા માટે સેટની છેલ્લી આઇટમ પર લાગુ કરવું.
વધુ માહિતી માટે, બ્રેડક્રમ્બ પેટર્ન માટે WAI-ARIA ઓથરિંગ પ્રેક્ટિસ જુઓ .
સસ
ચલો
$breadcrumb-font-size: null;
$breadcrumb-padding-y: 0;
$breadcrumb-padding-x: 0;
$breadcrumb-item-padding-x: .5rem;
$breadcrumb-margin-bottom: 1rem;
$breadcrumb-bg: null;
$breadcrumb-divider-color: $gray-600;
$breadcrumb-active-color: $gray-600;
$breadcrumb-divider: quote("/");
$breadcrumb-divider-flipped: $breadcrumb-divider;
$breadcrumb-border-radius: null;