Dropdown

Attiva/disattiva le sovrapposizioni contestuali per la visualizzazione di elenchi di collegamenti e altro con il plug-in a discesa Bootstrap.

Su questa pagina

Panoramica

I menu a discesa sono sovrapposizioni contestuali attivabili per visualizzare elenchi di collegamenti e altro. Sono resi interattivi con il plug-in JavaScript a discesa Bootstrap incluso. Vengono attivati facendo clic, non passando con il mouse; questa è una decisione progettuale intenzionale .

I menu a discesa sono basati su una libreria di terze parti, Popper , che fornisce posizionamento dinamico e rilevamento del viewport. Assicurati di includere popper.min.js prima di JavaScript di Bootstrap o usa bootstrap.bundle.min.js/ bootstrap.bundle.jsche contiene Popper. Popper non viene utilizzato per posizionare i menu a discesa nelle barre di navigazione, anche se non è richiesto il posizionamento dinamico.

Accessibilità

Lo standard WAI ARIA definisce un vero e proprio role="menu"widget , ma questo è specifico per i menu simili a applicazioni che attivano azioni o funzioni. I menu ARIA possono contenere solo voci di menu, voci di menu checkbox, voci di menu di pulsanti di opzione, gruppi di pulsanti di opzione e sottomenu.

I menu a discesa di Bootstrap, d'altra parte, sono progettati per essere generici e applicabili a una varietà di situazioni e strutture di markup. Ad esempio, è possibile creare menu a discesa che contengono input aggiuntivi e controlli dei moduli, come campi di ricerca o moduli di accesso. Per questo motivo, Bootstrap non si aspetta (né aggiunge automaticamente) nessuno degli attributi rolee richiesti per i veri menu ARIA . Gli autori dovranno includere essi stessi questi attributi più specifici.aria-

Tuttavia, Bootstrap aggiunge il supporto integrato per la maggior parte delle interazioni standard del menu della tastiera, come la possibilità di spostarsi tra i singoli .dropdown-itemelementi utilizzando i tasti cursore e chiudere il menu con il ESCtasto.

Esempi

Avvolgi l'interruttore del menu a discesa (il tuo pulsante o collegamento) e il menu a discesa all'interno di .dropdown, o un altro elemento che dichiara position: relative;. I menu a discesa possono essere attivati da <a>o <button>elementi per soddisfare meglio le tue potenziali esigenze. Gli esempi mostrati qui utilizzano elementi semantici <ul>ove appropriato, ma è supportato il markup personalizzato.

Pulsante singolo

Qualsiasi singolo .btnpuò essere trasformato in un interruttore a discesa con alcune modifiche al markup. Ecco come puoi metterli in funzione con entrambi <button>gli elementi:

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>

E con <a>elementi:

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>

La parte migliore è che puoi farlo anche con qualsiasi variante di pulsante:

<!-- 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>

Pulsante Dividi

Allo stesso modo, crea menu a discesa dei pulsanti divisi con praticamente lo stesso markup dei menu a discesa dei pulsanti singoli, ma con l'aggiunta di .dropdown-toggle-splituna spaziatura adeguata attorno al cursore a discesa.

Usiamo questa classe extra per ridurre l'orizzontale paddingsu entrambi i lati del cursore del 25% e rimuovere margin-leftquello aggiunto per i normali menu a discesa dei pulsanti. Queste modifiche extra mantengono il cursore centrato nel pulsante di divisione e forniscono un'area di successo di dimensioni più appropriate accanto al pulsante principale.

<!-- 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>

Dimensionamento

I menu a discesa dei pulsanti funzionano con pulsanti di tutte le dimensioni, inclusi i pulsanti a discesa predefiniti e divisi.

<!-- 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>

Tenute a discesa oscure

Attiva i menu a discesa più scuri per abbinare una barra di navigazione scura o uno stile personalizzato aggiungendolo .dropdown-menu-darka un file .dropdown-menu. Non sono richieste modifiche agli elementi a discesa.

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>

E mettendolo da usare in una barra di navigazione:

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>

Indicazioni

RTL

Le direzioni vengono rispecchiate quando si utilizza Bootstrap in RTL, il che significa .dropstartche apparirà sul lato destro.

Centrato

Rendi il menu a discesa centrato sotto l'interruttore con .dropdown-centerl'elemento padre.

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>

Ritiro

Attiva i menu a discesa sopra gli elementi aggiungendoli .dropupall'elemento padre.

<!-- 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 centrato

Rendi il menu a comparsa centrato sopra l'interruttore con .dropup-centerl'elemento padre.

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

Attiva i menu a discesa a destra degli elementi aggiungendoli .dropendall'elemento padre.

<!-- 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

Attiva i menu a discesa a sinistra degli elementi aggiungendoli .dropstartall'elemento padre.

<!-- 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>

Puoi utilizzare <a>o <button>elementi come elementi a discesa.

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>

Puoi anche creare elementi a discesa non interattivi con .dropdown-item-text. Sentiti libero di personalizzare ulteriormente lo stile con CSS o utilità di testo personalizzati.

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>

Attivo

Aggiungi .activeagli elementi nel menu a discesa per impostarli come attivi . Per trasmettere lo stato attivo alle tecnologie assistive, utilizzare l' aria-currentattributo, utilizzando il pagevalore per la pagina corrente o trueper l'elemento corrente in un set.

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>

Disabilitato

Aggiungi .disabledagli elementi nel menu a discesa per impostarli come disabilitati .

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>

Per impostazione predefinita, un menu a discesa viene posizionato automaticamente al 100% dall'alto e lungo il lato sinistro del suo genitore. Puoi cambiarlo con le .drop*classi direzionali, ma puoi anche controllarle con classi di modificatori aggiuntive.

Aggiungi .dropdown-menu-enda a .dropdown-menuper allineare a destra il menu a discesa. Le direzioni vengono rispecchiate quando si utilizza Bootstrap in RTL, il che significa .dropdown-menu-endche apparirà sul lato sinistro.

Dritta! I menu a discesa sono posizionati grazie a Popper tranne quando sono contenuti in una barra di navigazione.

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>

Allineamento reattivo

Se desideri utilizzare l'allineamento reattivo, disabilita il posizionamento dinamico aggiungendo l' data-bs-display="static"attributo e utilizza le classi di variazione reattive.

Per allineare a destra il menu a discesa con il punto di interruzione specificato o più grande, aggiungi .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>

Per allineare a sinistra il menu a discesa con il punto di interruzione specificato o più grande, aggiungi .dropdown-menu-ende .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>

Nota che non è necessario aggiungere un data-bs-display="static"attributo ai pulsanti a discesa nelle barre di navigazione, poiché Popper non viene utilizzato nelle barre di navigazione.

Opzioni di allineamento

Prendendo la maggior parte delle opzioni mostrate sopra, ecco una piccola demo del lavello della cucina di varie opzioni di allineamento a discesa in un unico posto.

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>

Intestazioni

Aggiungi un'intestazione per etichettare sezioni di azioni in qualsiasi menu a discesa.

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>

Divisori

Separare i gruppi di voci di menu correlate con un divisore.

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>

Testo

Posiziona qualsiasi testo a mano libera all'interno di un menu a discesa con testo e utilizza le utilità di spaziatura . Tieni presente che probabilmente avrai bisogno di stili di ridimensionamento aggiuntivi per limitare la larghezza del menu.

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>

Le forme

Inserisci un modulo all'interno di un menu a discesa o trasformalo in un menu a discesa e utilizza le utilità di margine o riempimento per dargli lo spazio negativo necessario.

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>

Utilizzare data-bs-offseto data-bs-referenceper modificare la posizione del menu a discesa.

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>

Comportamento di chiusura automatica

Per impostazione predefinita, il menu a discesa viene chiuso quando si fa clic all'interno o all'esterno del menu a discesa. È possibile utilizzare l' autoCloseopzione per modificare questo comportamento del menu a discesa.

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

Variabili

Aggiunto nella v5.2.0

Come parte dell'approccio in evoluzione delle variabili CSS di Bootstrap, i menu a discesa ora utilizzano le variabili CSS locali .dropdown-menuper una migliore personalizzazione in tempo reale. I valori per le variabili CSS vengono impostati tramite Sass, quindi anche la personalizzazione di Sass è ancora supportata.

  --#{$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};

La personalizzazione tramite variabili CSS può essere vista sulla .dropdown-menu-darkclasse in cui sovrascriviamo valori specifici senza aggiungere selettori CSS duplicati.

  --#{$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};

variabili Sas

Variabili per tutti i menu a discesa:

$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

Variabili per il menu a discesa scuro :

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

Variabili per i punti di inserimento basati su CSS che indicano l'interattività di un menu a discesa:

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

Miscele

I mixin vengono utilizzati per generare i carets basati su CSS e possono essere trovati in 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;
    }
  }
}

Utilizzo

Tramite attributi di dati o JavaScript, il plug-in a discesa attiva o disattiva il contenuto nascosto (menu a discesa) attivando la .showclasse sul genitore .dropdown-menu. L' data-bs-toggle="dropdown"attributo viene utilizzato per la chiusura dei menu a discesa a livello di applicazione, quindi è una buona idea utilizzarlo sempre.

Sui dispositivi abilitati al tocco, l'apertura di un menu a discesa aggiunge mouseovergestori vuoti ai figli immediati <body>dell'elemento. Questo hack certamente brutto è necessario per aggirare una stranezza nella delega dell'evento di iOS , che altrimenti impedirebbe a un tocco in qualsiasi punto al di fuori del menu a discesa di attivare il codice che chiude il menu a discesa. Una volta chiuso il menu a discesa, questi mouseovergestori vuoti aggiuntivi vengono rimossi.

Tramite attributi di dati

Aggiungi data-bs-toggle="dropdown"a un link o un pulsante per attivare un menu a discesa.

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

Tramite JavaScript

Chiama i menu a discesa tramite JavaScript:

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

`data-bs-toggle="dropdown"`ancora richiesto

Indipendentemente dal fatto che chiami il menu a discesa tramite JavaScript o utilizzi invece data-api, data-bs-toggle="dropdown"è sempre necessario essere presente sull'elemento trigger del menu a discesa.

Opzioni

Poiché le opzioni possono essere passate tramite attributi di dati o JavaScript, puoi aggiungere un nome di opzione a data-bs-, come in data-bs-animation="{value}". Assicurati di cambiare il tipo di caso del nome dell'opzione da " camelCase " a " kebab-case " quando passi le opzioni tramite attributi di dati. Ad esempio, utilizzare data-bs-custom-class="beautifier"invece di data-bs-customClass="beautifier".

A partire da Bootstrap 5.2.0, tutti i componenti supportano un attributo di dati riservato sperimentaledata-bs-config che può ospitare una semplice configurazione del componente come una stringa JSON. Quando un elemento ha data-bs-config='{"delay":0, "title":123}'e data-bs-title="456"attributi, il titlevalore finale sarà 456e gli attributi di dati separati sovrascriveranno i valori forniti su data-bs-config. Inoltre, gli attributi di dati esistenti sono in grado di ospitare valori JSON come data-bs-delay='{"show":0,"hide":150}'.

Nome	Tipo	Predefinito	Descrizione
`autoClose`	booleano, stringa	`true`	Configura il comportamento di chiusura automatica del menu a discesa: `true`- il menu a tendina verrà chiuso cliccando all'esterno o all'interno del menu a tendina. `false`- il menu a discesa verrà chiuso facendo clic sul pulsante di attivazione/disattivazione e chiamando manualmente `hide`o `toggle`metodo. (Inoltre non verrà chiuso premendo `esc`il tasto) `'inside'`- il menu a tendina verrà chiuso (solo) cliccando all'interno del menu a tendina. `'outside'`- il menu a tendina verrà chiuso (solo) cliccando fuori dal menu a tendina. Nota: la tendina si può sempre chiudere con la `ESC`chiave.
`boundary`	stringa, elemento	`'clippingParents'`	Limite del vincolo di overflow del menu a discesa (si applica solo al modificatore preventOverflow di Popper). Per impostazione predefinita è `clippingParents`e può accettare un riferimento HTMLElement (solo tramite JavaScript). Per ulteriori informazioni, fare riferimento ai documenti detectionOverflow di Popper .
`display`	corda	`'dynamic'`	Per impostazione predefinita, utilizziamo Popper per il posizionamento dinamico. Disabilita questo con `static`.
`offset`	matrice, stringa, funzione	`[0, 2]`	Offset del menu a discesa rispetto al suo target. Puoi passare una stringa negli attributi dei dati con valori separati da virgole come: `data-bs-offset="10,20"`. Quando una funzione viene utilizzata per determinare l'offset, viene chiamata con un oggetto contenente il posizionamento popper, il riferimento e popper rects come primo argomento. Il nodo DOM dell'elemento di attivazione viene passato come secondo argomento. La funzione deve restituire un array con due numeri: skidding , distance . Per ulteriori informazioni, fare riferimento ai documenti di offset di Popper .
`popperConfig`	nullo, oggetto, funzione	`null`	Per modificare la configurazione di Popper predefinita di Bootstrap, vedere Configurazione di Popper . Quando una funzione viene utilizzata per creare la configurazione Popper, viene chiamata con un oggetto che contiene la configurazione Popper predefinita di Bootstrap. Ti aiuta a utilizzare e unire l'impostazione predefinita con la tua configurazione. La funzione deve restituire un oggetto di configurazione per Popper.
`reference`	stringa, elemento, oggetto	`'toggle'`	Elemento di riferimento del menu a tendina. Accetta i valori di `'toggle'`, `'parent'`, un riferimento HTMLElement o un oggetto che fornisce `getBoundingClientRect`. Per ulteriori informazioni, fare riferimento ai documenti del costruttore di Popper e ai documenti degli elementi virtuali .

Utilizzo della funzione con`popperConfig`

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

Metodi

Metodo	Descrizione
`dispose`	Distrugge il menu a discesa di un elemento. (Rimuove i dati memorizzati sull'elemento DOM)
`getInstance`	Metodo statico che ti consente di ottenere l'istanza a discesa associata a un elemento DOM, puoi utilizzarla in questo modo: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Metodo statico che restituisce un'istanza a discesa associata a un elemento DOM o ne crea una nuova nel caso non sia stata inizializzata. Puoi usarlo in questo modo: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Nasconde il menu a discesa di una determinata barra di navigazione o navigazione a schede.
`show`	Mostra il menu a discesa di una determinata barra di navigazione o navigazione a schede.
`toggle`	Attiva o disattiva il menu a discesa di una determinata barra di navigazione o la navigazione a schede.
`update`	Aggiorna la posizione del menu a discesa di un elemento.

Eventi

Tutti gli eventi a discesa vengono attivati sull'elemento di commutazione e quindi gonfiati. Quindi puoi anche aggiungere listener di eventi .dropdown-menusull'elemento padre di . hide.bs.dropdowne hidden.bs.dropdowngli eventi hanno una clickEventproprietà (solo quando il tipo di evento originale è click) che contiene un oggetto evento per l'evento click.

Tipo di evento	Descrizione
`hide.bs.dropdown`	Si attiva immediatamente quando `hide`viene chiamato il metodo di istanza.
`hidden.bs.dropdown`	Viene attivato quando il menu a discesa ha finito di essere nascosto all'utente e le transizioni CSS sono state completate.
`show.bs.dropdown`	Si attiva immediatamente quando `show`viene chiamato il metodo di istanza.
`shown.bs.dropdown`	Viene attivato quando il menu a discesa è stato reso visibile all'utente e le transizioni CSS sono state completate.

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

Dropdown

Panoramica

Accessibilità

Esempi

Pulsante singolo

Pulsante Dividi

Dimensionamento

Tenute a discesa oscure

Indicazioni

RTL

Centrato

Ritiro

Dropup centrato

Dropend

Dropstart

Voci del menu

Attivo

Disabilitato

Allineamento menu

Allineamento reattivo

Opzioni di allineamento

Contenuto del menu

Intestazioni

Divisori

Testo

Le forme

Comportamento di chiusura automatica

CSS

Variabili

variabili Sas

Miscele

Utilizzo

Tramite attributi di dati

Tramite JavaScript

`data-bs-toggle="dropdown"`ancora richiesto

Opzioni

Utilizzo della funzione con`popperConfig`

Metodi

Eventi

Dropdown

Panoramica

Accessibilità

Esempi

Pulsante singolo

Pulsante Dividi

Dimensionamento

Tenute a discesa oscure

Indicazioni

RTL

Centrato

Ritiro

Dropup centrato

Dropend

Dropstart

Voci del menu

Attivo

Disabilitato

Allineamento menu

Allineamento reattivo

Opzioni di allineamento

Contenuto del menu

Intestazioni

Intestazione a discesa

Divisori

Testo

Le forme

Opzioni a discesa

Comportamento di chiusura automatica

CSS

Variabili

variabili Sas

Miscele

Utilizzo

Tramite attributi di dati

Tramite JavaScript

data-bs-toggle="dropdown"ancora richiesto

Opzioni

Utilizzo della funzione conpopperConfig

Metodi

Eventi

`data-bs-toggle="dropdown"`ancora richiesto

Utilizzo della funzione con`popperConfig`