Μετάβαση στο κύριο περιεχόμενο Μετάβαση στην πλοήγηση εγγράφων
in English

Φρυγανιά

Υποδείξτε τη θέση της τρέχουσας σελίδας σε μια ιεραρχία πλοήγησης που προσθέτει αυτόματα διαχωριστικά μέσω 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. Μπορούν να αλλάξουν τροποποιώντας μια τοπική προσαρμοσμένη ιδιότητα CSS --bs-breadcrumb-divider, ή μέσω της $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, απαιτείται η συνάρτηση quote για τη δημιουργία των εισαγωγικών γύρω από μια συμβολοσειρά. Για παράδειγμα, χρησιμοποιώντας >ως διαχωριστικό, μπορείτε να χρησιμοποιήσετε αυτό:

$breadcrumb-divider: quote(">");

Είναι επίσης δυνατό να χρησιμοποιήσετε ένα ενσωματωμένο εικονίδιο SVG . Εφαρμόστε το μέσω της προσαρμοσμένης ιδιότητας CSS ή χρησιμοποιήστε τη μεταβλητή Sass.

<nav style="--bs-breadcrumb-divider: url(&#34;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&#34;);" 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;

Προσιτότητα

Δεδομένου ότι το breadcrumbs παρέχει μια πλοήγηση, είναι καλή ιδέα να προσθέσετε μια ετικέτα με νόημα, όπως aria-label="breadcrumb"να περιγράφει τον τύπο πλοήγησης που παρέχεται στο <nav>στοιχείο, καθώς και να εφαρμόσετε ένα aria-current="page"στο τελευταίο στοιχείο του συνόλου για να υποδείξετε ότι αντιπροσωπεύει την τρέχουσα σελίδα.

Για περισσότερες πληροφορίες, ανατρέξτε στις πρακτικές συγγραφής WAI-ARIA για το μοτίβο φρυγανιάς .

Sass

Μεταβλητές

$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;