Αναπτυσσόμενα

Εναλλάξτε τις επικαλύψεις με βάση τα συμφραζόμενα για την εμφάνιση λιστών συνδέσμων και άλλων με την αναπτυσσόμενη προσθήκη Bootstrap.

Σε αυτήν την σελίδα

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

Τα αναπτυσσόμενα μενού είναι εναλλάξιμα, επικαλύψεις με βάση τα συμφραζόμενα για την εμφάνιση λιστών συνδέσμων και πολλά άλλα. Γίνονται διαδραστικά με το αναπτυσσόμενο πρόσθετο JavaScript Bootstrap που περιλαμβάνεται. Εναλλάσσονται κάνοντας κλικ, όχι με το αιώρηση. αυτή είναι μια σκόπιμη απόφαση σχεδιασμού .

Τα αναπτυσσόμενα μενού είναι χτισμένα σε μια βιβλιοθήκη τρίτου μέρους, την Popper , η οποία παρέχει δυναμική τοποθέτηση και ανίχνευση θυρών προβολής. Φροντίστε να συμπεριλάβετε το popper.min.js πριν από την JavaScript του Bootstrap ή χρησιμοποιήστε το bootstrap.bundle.min.js/ bootstrap.bundle.jsπου περιέχει Popper. Το Popper δεν χρησιμοποιείται για την τοποθέτηση αναπτυσσόμενων στοιχείων σε γραμμές πλοήγησης, αν και δεν απαιτείται δυναμική τοποθέτηση.

Προσιτότητα

Το πρότυπο WAI ARIA ορίζει ένα πραγματικό role="menu"γραφικό στοιχείο , αλλά αυτό είναι συγκεκριμένο για μενού που μοιάζουν με εφαρμογές που ενεργοποιούν ενέργειες ή λειτουργίες. Τα μενού ARIA μπορούν να περιέχουν μόνο στοιχεία μενού, στοιχεία μενού πλαισίου ελέγχου, στοιχεία μενού κουμπιών επιλογής, ομάδες κουμπιών επιλογής και υπομενού.

Τα αναπτυσσόμενα μενού του Bootstrap, από την άλλη πλευρά, έχουν σχεδιαστεί για να είναι γενικά και να εφαρμόζονται σε μια ποικιλία καταστάσεων και δομών σήμανσης. Για παράδειγμα, είναι δυνατό να δημιουργηθούν αναπτυσσόμενα μενού που περιέχουν πρόσθετες εισόδους και στοιχεία ελέγχου φορμών, όπως πεδία αναζήτησης ή φόρμες σύνδεσης. Για αυτόν τον λόγο, το Bootstrap δεν αναμένει (ούτε προσθέτει αυτόματα) κανένα από τα χαρακτηριστικά roleκαι aria-που απαιτούνται για τα πραγματικά μενού ARIA . Οι συγγραφείς θα πρέπει να συμπεριλάβουν οι ίδιοι αυτά τα πιο συγκεκριμένα χαρακτηριστικά.

Ωστόσο, το Bootstrap προσθέτει ενσωματωμένη υποστήριξη για τις περισσότερες τυπικές αλληλεπιδράσεις μενού πληκτρολογίου, όπως τη δυνατότητα μετακίνησης σε μεμονωμένα .dropdown-itemστοιχεία χρησιμοποιώντας τα πλήκτρα του δρομέα και το κλείσιμο του μενού με το ESCπλήκτρο.

Παραδείγματα

Τυλίξτε την εναλλαγή του αναπτυσσόμενου μενού (το κουμπί ή ο σύνδεσμός σας) και το αναπτυσσόμενο μενού εντός .dropdownή σε άλλο στοιχείο που δηλώνει position: relative;. Τα αναπτυσσόμενα μενού μπορούν να ενεργοποιηθούν από <a>ή <button>στοιχεία για να ταιριάζουν καλύτερα στις πιθανές ανάγκες σας. Τα παραδείγματα που εμφανίζονται εδώ χρησιμοποιούν σημασιολογικά <ul>στοιχεία όπου χρειάζεται, αλλά υποστηρίζεται η προσαρμοσμένη σήμανση.

Μονό κουμπί

Οποιοδήποτε single .btnμπορεί να μετατραπεί σε αναπτυσσόμενο εναλλαγή με ορισμένες αλλαγές σήμανσης. Δείτε πώς μπορείτε να τα θέσετε σε λειτουργία με οποιοδήποτε από τα δύο <button>στοιχεία:

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Και με <a>στοιχεία:

html

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Το καλύτερο μέρος είναι ότι μπορείτε να το κάνετε αυτό με οποιαδήποτε παραλλαγή κουμπιού, επίσης:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Κουμπί διαίρεσης

Ομοίως, δημιουργήστε αναπτυσσόμενα μενού διαχωρισμού κουμπιών με σχεδόν την ίδια σήμανση με τα αναπτυσσόμενα μενού με ένα κουμπί, αλλά με την προσθήκη του .dropdown-toggle-splitγια σωστή απόσταση γύρω από το αναπτυσσόμενο πλαίσιο.

Χρησιμοποιούμε αυτήν την επιπλέον κατηγορία για να μειώσουμε την οριζόντια paddingκαι στις δύο πλευρές του κουμπιού κατά 25% και να αφαιρέσουμε τα margin-leftπου προστίθενται για τα κανονικά αναπτυσσόμενα κουμπιά. Αυτές οι πρόσθετες αλλαγές κρατούν το καρέ στο κέντρο στο κουμπί διαχωρισμού και παρέχουν μια περιοχή χτυπήματος πιο κατάλληλου μεγέθους δίπλα στο κύριο κουμπί.

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Κόλλα

Τα αναπτυσσόμενα κουμπιά λειτουργούν με κουμπιά όλων των μεγεθών, συμπεριλαμβανομένων των αναπτυσσόμενων κουμπιών προεπιλογής και διαχωρισμού.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Σκούρα αναπτυσσόμενα μενού

Επιλέξτε πιο σκούρα αναπτυσσόμενα μενού για να ταιριάξετε με μια σκοτεινή γραμμή πλοήγησης ή ένα προσαρμοσμένο στυλ προσθέτοντας .dropdown-menu-darkσε ένα υπάρχον .dropdown-menu. Δεν απαιτούνται αλλαγές στα αναπτυσσόμενα στοιχεία.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Και η χρήση του σε μια γραμμή πλοήγησης:

html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Κατευθύνσεις

RTL

Οι οδηγίες αντικατοπτρίζονται όταν χρησιμοποιείτε το Bootstrap στο RTL, που σημαίνει ότι .dropstartθα εμφανίζονται στη δεξιά πλευρά.

Κέντρο

Κάντε το αναπτυσσόμενο μενού στο κέντρο κάτω από την εναλλαγή με .dropdown-centerτο γονικό στοιχείο.

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropup

Ενεργοποιήστε τα αναπτυσσόμενα μενού πάνω από τα στοιχεία προσθέτοντας .dropupστο γονικό στοιχείο.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Στο κέντρο της πτώσης

Κάντε το αναπτυσσόμενο μενού στο κέντρο πάνω από την εναλλαγή με .dropup-centerτο γονικό στοιχείο.

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropend

Ενεργοποιήστε τα αναπτυσσόμενα μενού στα δεξιά των στοιχείων προσθέτοντας .dropendστο γονικό στοιχείο.

<!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropstart

Ενεργοποιήστε τα αναπτυσσόμενα μενού στα αριστερά των στοιχείων προσθέτοντας .dropstartστο γονικό στοιχείο.

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropstart</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

Μπορείτε να χρησιμοποιήσετε <a>ή <button>στοιχεία ως αναπτυσσόμενα στοιχεία.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Μπορείτε επίσης να δημιουργήσετε μη διαδραστικά αναπτυσσόμενα στοιχεία με το .dropdown-item-text. Μη διστάσετε να δημιουργήσετε περαιτέρω στυλ με προσαρμοσμένα CSS ή βοηθητικά προγράμματα κειμένου.

html

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

Ενεργός

Προσθέστε .activeσε στοιχεία στο αναπτυσσόμενο μενού για να τα διαμορφώσετε ως ενεργά . Για να μεταφέρετε την ενεργή κατάσταση σε υποστηρικτικές τεχνολογίες, χρησιμοποιήστε το aria-currentχαρακτηριστικό — χρησιμοποιώντας την pageτιμή για την τρέχουσα σελίδα ή trueγια το τρέχον στοιχείο σε ένα σύνολο.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

άτομα με ειδικές ανάγκες

Προσθέστε .disabledστα στοιχεία στο αναπτυσσόμενο μενού για να τα διαμορφώσετε ως απενεργοποιημένα .

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

Από προεπιλογή, ένα αναπτυσσόμενο μενού τοποθετείται αυτόματα 100% από την κορυφή και κατά μήκος της αριστερής πλευράς του γονέα του. Μπορείτε να το αλλάξετε αυτό με τις κατευθυντήριες .drop*κατηγορίες, αλλά μπορείτε επίσης να τις ελέγξετε με πρόσθετες κατηγορίες τροποποιητών.

Προσθήκη .dropdown-menu-endστο a .dropdown-menuπρος τα δεξιά, ευθυγραμμίστε το αναπτυσσόμενο μενού. Οι οδηγίες αντικατοπτρίζονται όταν χρησιμοποιείτε το Bootstrap στο RTL, που σημαίνει ότι .dropdown-menu-endθα εμφανίζονται στην αριστερή πλευρά.

Ψηλά το κεφάλι! Τα αναπτυσσόμενα μενού τοποθετούνται χάρη στο Popper, εκτός εάν περιέχονται σε μια γραμμή πλοήγησης.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Ευθυγράμμιση με απόκριση

Εάν θέλετε να χρησιμοποιήσετε αποκριτική στοίχιση, απενεργοποιήστε τη δυναμική τοποθέτηση προσθέτοντας το data-bs-display="static"χαρακτηριστικό και χρησιμοποιήστε τις αποκριτικές κλάσεις παραλλαγής.

Για να ευθυγραμμίσετε δεξιά το αναπτυσσόμενο μενού με το δεδομένο σημείο διακοπής ή μεγαλύτερο, προσθέστε .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Για να ευθυγραμμίσετε αριστερά το αναπτυσσόμενο μενού με το δεδομένο σημείο διακοπής ή μεγαλύτερο, προσθέστε .dropdown-menu-endκαι .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Σημειώστε ότι δεν χρειάζεται να προσθέσετε ένα data-bs-display="static"χαρακτηριστικό στα αναπτυσσόμενα κουμπιά στις γραμμές πλοήγησης, καθώς το Popper δεν χρησιμοποιείται στις γραμμές πλοήγησης.

Επιλογές ευθυγ��άμμισης

Λαμβάνοντας τις περισσότερες από τις επιλογές που φαίνονται παραπάνω, ακολουθεί μια επίδειξη μικρού νεροχύτη κουζίνας με διάφορες αναπτυσσόμενες επιλογές ευθυγράμμισης σε ένα μέρος.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

Κεφαλίδες

Προσθέστε μια κεφαλίδα για να προσθέσετε ετικέτες σε ενότητες ενεργειών σε οποιοδήποτε αναπτυσσόμενο μενού.

html

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

Διαβήτης

Διαχωρίστε τις ομάδες σχετικών στοιχείων μενού με ένα διαχωριστικό.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

Κείμενο

Τοποθετήστε οποιοδήποτε κείμενο ελεύθερης μορφής σε ένα αναπτυσσόμενο μενού με κείμενο και χρησιμοποιήστε βοηθητικά προγράμματα διαχωρισμού . Σημειώστε ότι πιθανότατα θα χρειαστείτε πρόσθετα στυλ μεγέθους για να περιορίσετε το πλάτος του μενού.

html

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

Έντυπα

Τοποθετήστε μια φόρμα σε ένα αναπτυσσόμενο μενού ή μετατρέψτε τη σε ένα αναπτυσσόμενο μενού και χρησιμοποιήστε βοηθητικά προγράμματα περιθωρίου ή συμπλήρωσης για να της δώσετε τον αρνητικό χώρο που χρειάζεστε.

html

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

html

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <form class="dropdown-menu p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck2">
        <label class="form-check-label" for="dropdownCheck2">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
</div>

Χρησιμοποιήστε data-bs-offsetή data-bs-referenceγια να αλλάξετε τη θέση του αναπτυσσόμενου μενού.

html

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

Συμπεριφορά αυτόματου κλεισίματος

Από προεπιλογή, το αναπτυσσόμενο μενού κλείνει όταν κάνετε κλικ μέσα ή έξω από το αναπτυσσόμενο μενού. Μπορείτε να χρησιμοποιήσετε την autoCloseεπιλογή για να αλλάξετε αυτήν τη συμπεριφορά του αναπτυσσόμενου μενού.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

CSS

Μεταβλητές

Προστέθηκε στην έκδοση 5.2.0

Ως μέρος της εξελισσόμενης προσέγγισης μεταβλητών CSS του Bootstrap, τα αναπτυσσόμενα μενού χρησιμοποιούν πλέον τοπικές μεταβλητές CSS .dropdown-menuγια βελτιωμένη προσαρμογή σε πραγματικό χρόνο. Οι τιμές για τις μεταβλητές CSS ορίζονται μέσω Sass, επομένως η προσαρμογή Sass εξακολουθεί να υποστηρίζεται.

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

Η προσαρμογή μέσω μεταβλητών CSS μπορεί να φανεί στην .dropdown-menu-darkκλάση όπου παρακάμπτουμε συγκεκριμένες τιμές χωρίς την προσθήκη διπλών επιλογέων CSS.

  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

Μεταβλητές Sass

Μεταβλητές για όλα τα αναπτυσσόμενα μενού:

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             var(--#{$prefix}border-color-translucent);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg:            $gray-200;

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      $gray-500;

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

Μεταβλητές για το σκοτεινό αναπτυσσόμενο μενού :

$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-border-color:        $dropdown-border-color;
$dropdown-dark-divider-bg:          $dropdown-divider-bg;
$dropdown-dark-box-shadow:          null;
$dropdown-dark-link-color:          $dropdown-dark-color;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

Μεταβλητές για τα καρέ που βασίζονται σε CSS που υποδεικνύουν τη διαδραστικότητα ενός αναπτυσσόμενου μενού:

$caret-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

Μείγματα

Οι μίξεις χρησιμοποιούνται για τη δημιουργία των καρετών που βασίζονται σε CSS και μπορούν να βρεθούν στο scss/mixins/_caret.scss.

@mixin caret-down {
  border-top: $caret-width solid;
  border-right: $caret-width solid transparent;
  border-bottom: 0;
  border-left: $caret-width solid transparent;
}

@mixin caret-up {
  border-top: 0;
  border-right: $caret-width solid transparent;
  border-bottom: $caret-width solid;
  border-left: $caret-width solid transparent;
}

@mixin caret-end {
  border-top: $caret-width solid transparent;
  border-right: 0;
  border-bottom: $caret-width solid transparent;
  border-left: $caret-width solid;
}

@mixin caret-start {
  border-top: $caret-width solid transparent;
  border-right: $caret-width solid;
  border-bottom: $caret-width solid transparent;
}

@mixin caret($direction: down) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $caret-spacing;
      vertical-align: $caret-vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down();
      } @else if $direction == up {
        @include caret-up();
      } @else if $direction == end {
        @include caret-end();
      }
    }

    @if $direction == start {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $caret-spacing;
        vertical-align: $caret-vertical-align;
        content: "";
        @include caret-start();
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

Χρήση

Μέσω χαρακτηριστικών δεδομένων ή JavaScript, η αναπτυσσόμενη προσθήκη εναλλάσσει το κρυφό περιεχόμενο (αναπτυσσόμενα μενού) εναλλάσσοντας την .showκλάση στο γονικό .dropdown-menu. Το data-bs-toggle="dropdown"χαρακτηριστικό βασίζεται για το κλείσιμο αναπτυσσόμενων μενού σε επίπεδο εφαρμογής, επομένως είναι καλή ιδέα να το χρησιμοποιείτε πάντα.

Σε συσκευές με δυνατότητα αφής, το άνοιγμα ενός αναπτυσσόμενου μενού προσθέτει κενά mouseoverπρογράμματα χειρισμού στα άμεσα παιδιά του <body>στοιχείου. Αυτό το ομολογουμένως άσχημο hack είναι απαραίτητο για να επιλύσετε μια ιδιορρυθμία στην αποστολή συμβάντων του iOS , η οποία διαφορετικά θα εμπόδιζε ένα πάτημα οπουδήποτε εκτός του αναπτυσσόμενου μενού να ενεργοποιήσει τον κώδικα που κλείνει το αναπτυσσόμενο μενού. Μόλις κλείσει το αναπτυσσόμενο μενού, αυτοί οι πρόσθετοι άδειοι mouseoverχειριστές καταργούνται.

Μέσω χαρακτηριστικών δεδομένων

Προσθήκη data-bs-toggle="dropdown"σε σύνδεσμο ή κουμπί για εναλλαγή ενός αναπτυσσόμενου μενού.

<div class="dropdown">
  <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Μέσω JavaScript

Καλέστε τα αναπτυσσόμενα μενού μέσω JavaScript:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

`data-bs-toggle="dropdown"`απαιτείται ακόμη

Ανεξάρτητα από το αν καλείτε το αναπτυσσόμενο μενού μέσω JavaScript ή αντ' αυτού χρησιμοποιείτε το data-api, data-bs-toggle="dropdown"απαιτείται πάντα να υπάρχει στο στοιχείο ενεργοποίησης του αναπτυσσόμενου μενού.

Επιλογές

Καθώς οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript, μπορείτε να προσαρτήσετε ένα όνομα επιλογής στο data-bs-, όπως στο data-bs-animation="{value}". Φροντίστε να αλλάξετε τον τύπο θήκης του ονόματος της επιλογής από « camelCase » σε « kebab-case » όταν μεταβιβάζετε τις επιλογές μέσω των χαρακτηριστικών δεδομένων. Για παράδειγμα, χρησιμοποιήστε data-bs-custom-class="beautifier"αντί για data-bs-customClass="beautifier".

Από το Bootstrap 5.2.0, όλα τα στοιχεία υποστηρίζουν ένα πειραματικό χαρακτηριστικό δεσμευμένων δεδομένων data-bs-configπου μπορεί να φιλοξενήσει απλή διαμόρφωση στοιχείων ως συμβολοσειρά JSON. Όταν ένα στοιχείο έχει data-bs-config='{"delay":0, "title":123}'και data-bs-title="456"χαρακτηριστικά, η τελική titleτιμή θα είναι 456και τα ξεχωριστά χαρακτηριστικά δεδομένων θα αντικαταστήσουν τις τιμές που δίνονται στο data-bs-config. Επιπλέον, τα υπάρχοντα χαρακτηριστικά δεδομένων μπορούν να φιλοξενήσουν τιμές JSON όπως data-bs-delay='{"show":0,"hide":150}'.

Ονομα	Τύπος	Προκαθορισμένο	Περιγραφή
`autoClose`	boolean, χορδή	`true`	Διαμορφώστε τη συμπεριφορά αυτόματου κλεισίματος του αναπτυσσόμενου μενού: `true`- το αναπτυσσόμενο μενού θα κλείσει κάνοντας κλικ έξω ή μέσα στο αναπτυσσόμενο μενού. `false`- το αναπτυσσόμενο μενού θα κλείσει κάνοντας κλικ στο κουμπί εναλλαγής και μη αυτόματη κλήση `hide`ή `toggle`μέθοδο. (Επίσης δεν θα κλείσει πατώντας το `esc`πλήκτρο) `'inside'`- το αναπτυσσόμενο μενού θα κλείσει (μόνο) κάνοντας κλικ μέσα στο αναπτυσσόμενο μενού. `'outside'`- το αναπτυσσόμενο μενού θα κλείσει (μόνο) κάνοντας κλικ έξω από το αναπτυσσόμενο μενού. Σημείωση: το αναπτυσσόμενο μενού μπορεί πάντα να κλείσει με το `ESC`κλειδί.
`boundary`	χορδή, στοιχείο	`'clippingParents'`	Όριο περιορισμού υπερχείλισης του αναπτυσσόμενου μενού (ισχύει μόνο για τον τροποποιητή preventOverflow του Popper). Από προεπιλογή είναι `clippingParents`και μπορεί να δεχτεί μια αναφορά HTMLElement (μόνο μέσω JavaScript). Για περισσότερες πληροφορίες, ανατρέξτε στα έγγραφα του Popper detectOverflow .
`display`	σειρά	`'dynamic'`	Από προεπιλογή, χρησιμοποιούμε το Popper για δυναμική τοποθέτηση. Απενεργοποιήστε αυτό με `static`.
`offset`	πίνακας, συμβολοσειρά, συνάρτηση	`[0, 2]`	Μετατόπιση του αναπτυσσόμενου μενού σε σχέση με τον στόχο του. Μπορείτε να περάσετε μια συμβολοσειρά σε χαρακτηριστικά δεδομένων με τιμές διαχωρισμένες με κόμμα, όπως: `data-bs-offset="10,20"`. Όταν μια συνάρτηση χρησιμοποιείται για τον προσδιορισμό της μετατόπισης, καλείται με ένα αντικείμενο που περιέχει την τοποθέτηση popper, την αναφορά και το popper rects ως πρώτο όρισμα. Ο κόμβος DOM του στοιχείου ενεργοποίησης μεταβιβάζεται ως δεύτερο όρισμα. Η συνάρτηση πρέπει να επιστρέψει έναν πίνακα με δύο αριθμούς: ολίσθηση , απόσταση . Για περισσότερες πληροφορίες, ανατρέξτε στα έγγραφα μετατόπισης του Popper .
`popperConfig`	null, αντικείμενο, συνάρτηση	`null`	Για να αλλάξετε την προεπιλεγμένη διαμόρφωση Popper του Bootstrap, ανατρέξτε στη διαμόρφωση του Popper . Όταν μια συνάρτηση χρησιμοποιείται για τη δημιουργία της διαμόρφωσης Popper, καλείται με ένα αντικείμενο που περιέχει την προεπιλεγμένη διαμόρφωση Popper του Bootstrap. Σας βοηθά να χρησιμοποιήσετε και να συγχωνεύσετε την προεπιλογή με τη δική σας διαμόρφωση. Η συνάρτηση πρέπει να επιστρέψει ένα αντικείμενο διαμόρφωσης για το Popper.
`reference`	συμβολοσειρά, στοιχείο, αντικείμενο	`'toggle'`	Στοιχείο αναφοράς του αναπτυσσόμενου μενού. Αποδέχεται τις τιμές του `'toggle'`, `'parent'`, μιας αναφοράς HTMLElement ή ενός αντικειμένου που παρέχει `getBoundingClientRect`. Για περισσότερες πληροφορίες, ανατρέξτε στα έγγραφα κατασκευής του Popper και στα έγγραφα εικονικών στοιχείων .

Χρήση της λειτουργίας με`popperConfig`

const dropdown = new bootstrap.Dropdown(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Μέθοδοι

Μέθοδος	Περιγραφή
`dispose`	Καταστρέφει το αναπτυσσόμενο στοιχείο ενός στοιχείου. (Καταργεί τα αποθηκευμένα δεδομένα στο στοιχείο DOM)
`getInstance`	Στατική μέθοδος που σας επιτρέπει να λάβετε το αναπτυσσόμενο στιγμιότυπο που σχετίζεται με ένα στοιχείο DOM, μπορείτε να το χρησιμοποιήσετε ως εξής: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Στατική μέθοδος που επιστρέφει μια αναπτυσσόμενη παρουσία που σχετίζεται με ένα στοιχείο DOM ή δημιουργεί μια νέα σε περίπτωση που δεν είχε αρχικοποιηθεί. Μπορείτε να το χρησιμοποιήσετε ως εξής: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Αποκρύπτει το αναπτυσσόμενο μενού μιας δεδομένης γραμμής πλοήγησης ή πλοήγησης με καρτέλες.
`show`	Εμφανίζει το αναπτυσσόμενο μενού μιας δεδομένης γραμμής πλοήγησης ή πλοήγησης με καρτέλες.
`toggle`	Εναλλάσσει το αναπτυσσόμενο μενού μιας δεδομένης γραμμής πλοήγησης ή πλοήγησης με καρτέλες.
`update`	Ενημερώνει τη θέση του αναπτυσσόμενου μενού ενός στοιχείου.

Εκδηλώσεις

Όλα τα αναπτυσσόμενα συμβάντα ενεργοποιούνται στο στοιχείο εναλλαγής και, στη συνέχεια, εμφανίζονται με φυσαλίδες. Έτσι, μπορείτε επίσης να προσθέσετε προγράμματα ακρόασης συμβάντων στο .dropdown-menuγονικό στοιχείο του '. hide.bs.dropdownκαι hidden.bs.dropdownτα συμβάντα έχουν μια clickEventιδιότητα (μόνο όταν ο αρχικός τύπος συμβάντος είναι click) που περιέχει ένα αντικείμενο συμβάντος για το συμβάν κλικ.

Τύπος συμβάντος	Περιγραφή
`hide.bs.dropdown`	Ενεργοποιείται αμέσως όταν `hide`καλείται η μέθοδος παρουσίας.
`hidden.bs.dropdown`	Ενεργοποιήθηκε όταν ολοκληρωθεί η απόκρυψη του αναπτυσσόμενου μενού από τον χρήστη και οι μεταβάσεις CSS έχουν ολοκληρωθεί.
`show.bs.dropdown`	Ενεργοποιείται αμέσως όταν `show`καλείται η μέθοδος του στιγμιότυπου.
`shown.bs.dropdown`	Ενεργοποιείται όταν το αναπτυσσόμενο μενού έχει γίνει ορατό στον χρήστη και οι μεταβάσεις CSS έχουν ολοκληρωθεί.

const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})

Αναπτυσσόμενα

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

Προσιτότητα

Παραδείγματα

Μονό κουμπί

Κουμπί διαίρεσης

Κόλλα

Σκούρα αναπτυσσόμενα μενού

Κατευθύνσεις

RTL

Κέντρο

Dropup

Στο κέντρο της πτώσης

Dropend

Dropstart

Στοιχεία μενού

Ενεργός

άτομα με ειδικές ανάγκες

Στοίχιση μενού

Ευθυγράμμιση με απόκριση

Επιλογές ευθυγ��άμμισης

Περιεχόμενο μενού

Κεφαλίδες

Διαβήτης

Κείμενο

Έντυπα

Συμπεριφορά αυτόματου κλεισίματος

CSS

Μεταβλητές

Μεταβλητές Sass

Μείγματα

Χρήση

Μέσω χαρακτηριστικών δεδομένων

Μέσω JavaScript

`data-bs-toggle="dropdown"`απαιτείται ακόμη

Επιλογές

Χρήση της λειτουργίας με`popperConfig`

Μέθοδοι

Εκδηλώσεις

Αναπτυσσόμενα

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

Προσιτότητα

Παραδείγματα

Μονό κουμπί

Κουμπί διαίρεσης

Κόλλα

Σκούρα αναπτυσσόμενα μενού

Κατευθύνσεις

RTL

Κέντρο

Dropup

Στο κέντρο της πτώσης

Dropend

Dropstart

Στοιχεία μενού

Ενεργός

άτομα με ειδικές ανάγκες

Στοίχιση μενού

Ευθυγράμμιση με απόκριση

Επιλογές ευθυγ��άμμισης

Περιεχόμενο μενού

Κεφαλίδες

Αναπτυσσόμενη κεφαλίδα

Διαβήτης

Κείμενο

Έντυπα

Αναπτυσσόμενες επιλογές

Συμπεριφορά αυτόματου κλεισίματος

CSS

Μεταβλητές

Μεταβλητές Sass

Μείγματα

Χρήση

Μέσω χαρακτηριστικών δεδομένων

Μέσω JavaScript

data-bs-toggle="dropdown"απαιτείται ακόμη

Επιλογές

Χρήση της λειτουργίας μεpopperConfig

Μέθοδοι

Εκδηλώσεις

`data-bs-toggle="dropdown"`απαιτείται ακόμη

Χρήση της λειτουργίας με`popperConfig`