Despregables
Alterna as superposicións contextuais para mostrar listas de ligazóns e moito máis co complemento despregable Bootstrap.
Visión xeral
Os menús despregables son superposicións contextuais alternables para mostrar listas de ligazóns e moito máis. Fanse interactivos co complemento de JavaScript Bootstrap incluído. Alternanse facendo clic, non pasando o rato; esta é unha decisión de deseño intencionada .
Os menús desplegables están construídos nunha biblioteca de terceiros, Popper , que proporciona un posicionamento dinámico e detección de vistas. Asegúrate de incluír popper.min.js antes do JavaScript de Bootstrap ou usa bootstrap.bundle.min.js
/ bootstrap.bundle.js
que contén Popper. Popper non se usa para colocar menús despregables nas barras de navegación, aínda que non é necesario o posicionamento dinámico.
Accesibilidade
O estándar WAI ARIArole="menu"
define un widget real , pero este é específico para menús tipo aplicación que activan accións ou funcións. Os menús de ARIA só poden conter elementos de menú, elementos de menú de caixa de verificación, elementos de menú de botóns de opción, grupos de botóns de opción e submenús.
Os menús despregables de Bootstrap, por outra banda, están deseñados para ser xenéricos e aplicables a unha variedade de situacións e estruturas de marcado. Por exemplo, é posible crear menús despregables que conteñan entradas adicionais e controis de formulario, como campos de busca ou formularios de inicio de sesión. Por este motivo, Bootstrap non espera (nin engade automaticamente) ningún dos atributos role
e aria-
necesarios para os verdadeiros menús ARIA . Os autores terán que incluír estes atributos máis específicos.
Non obstante, Bootstrap engade soporte integrado para a maioría das interaccións estándar do menú do teclado, como a posibilidade de moverse por .dropdown-item
elementos individuais usando as teclas do cursor e pechar o menú coa ESCtecla.
Exemplos
Envolve o selector do menú despregable (o teu botón ou ligazón) e o menú despregable dentro .dropdown
de , ou noutro elemento que declare position: relative;
. Os menús desplegables pódense activar desde <a>
ou <button>
elementos que se axusten mellor ás túas necesidades potenciais. Os exemplos mostrados aquí usan <ul>
elementos semánticos cando corresponda, pero admítese o marcado personalizado.
Botón único
Calquera .btn
elemento pode converterse nun menú despregable con algúns cambios de marcado. Vexa como pode facelos funcionar con calquera dos <button>
elementos:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<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>
elementos:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<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 mellor parte é que tamén podes facelo con calquera variante de botón:
<!-- 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>
Botón de división
Do mesmo xeito, cree menús despregables de botóns divididos practicamente co mesmo marcado que os menús despregábeis de botóns únicos, pero coa adición de .dropdown-toggle-split
para un espazo adecuado ao redor do cursor do menú despregable.
Usamos esta clase adicional para reducir a horizontal padding
a cada lado do cursor nun 25 % e eliminar o margin-left
que se engade para os menús despregables de botóns habituais. Eses cambios adicionais manteñen o cursor centrado no botón dividido e proporcionan unha área de golpe de tamaño máis axeitado xunto ao botón principal.
<!-- 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>
Talla
Os menús despregables de botóns funcionan con botóns de todos os tamaños, incluídos os botóns predeterminados e divididos.
<!-- 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>
Menú despregable escuro
Opta por menús despregables máis escuros para combinar cunha barra de navegación escura ou un estilo personalizado engadindo .dropdown-menu-dark
a un existente .dropdown-menu
. Non se requiren cambios nos elementos do menú despregable.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<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 poñéndoo en uso nunha barra de navegación:
<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="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<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>
Direccións
RTL
As indicacións replícanse cando se usa Bootstrap en RTL, o que significa .dropstart
que aparecerá no lado dereito.
Dropup
Activa os menús despregables enriba dos elementos engadindo .dropup
ao elemento principal.
<!-- 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>
Dropright
Activa os menús despregables á dereita dos elementos engadindo .dropend
ao elemento principal.
<!-- Default dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropright
</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 Dropright</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Dropleft
Activa os menús despregables á esquerda dos elementos engadindo .dropstart
ao elemento pai.
<!-- 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">
<div class="btn-group dropstart" role="group">
<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>
</div>
<button type="button" class="btn btn-secondary">
Split dropstart
</button>
</div>
Elementos do menú
Podes usar <a>
ou <button>
elementos como elementos desplegables.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<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>
Tamén podes crear elementos do menú despregable non interactivos con .dropdown-item-text
. Non dubides en facer máis estilo con CSS personalizados ou utilidades de texto.
<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>
Activo
Engade .active
aos elementos no menú despregable para darlles un estilo como activos . Para transmitir o estado activo ás tecnoloxías de asistencia, use o aria-current
atributo, utilizando o page
valor da páxina actual ou true
do elemento actual dun conxunto.
<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>
Desactivado
Engadir .disabled
aos elementos no menú despregable para darlles un estilo desactivado .
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
Aliñación do menú
De xeito predeterminado, un menú despregable sitúase automaticamente ao 100 % desde a parte superior e ao lado esquerdo do seu pai. Podes cambialo coas .drop*
clases direccionais, pero tamén podes controlalas con clases modificadoras adicionais.
Engadir .dropdown-menu-end
ao .dropdown-menu
aliñar á dereita o menú despregable. As indicacións replícanse cando se usa Bootstrap en RTL, o que significa .dropdown-menu-end
que aparecerá no lado esquerdo.
<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>
Aliñación sensible
Se queres usar o aliñamento receptivo, desactiva o posicionamento dinámico engadindo o data-bs-display="static"
atributo e utiliza as clases de variación sensible.
Para aliñar á dereita o menú despregable co punto de interrupción indicado ou máis grande, engade .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end
.
<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>
Para aliñar o menú despregable á esquerda co punto de interrupción indicado ou máis grande, engade .dropdown-menu-end
e .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start
.
<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>
Teña en conta que non é preciso engadir un data-bs-display="static"
atributo aos botóns despregables nas barras de navegación, xa que Popper non se usa nas barras de navegación.
Opcións de aliñamento
Tomando a maioría das opcións mostradas arriba, aquí tes unha pequena demostración da pía da cociña de varias opcións de aliñamento do menú despregable nun só lugar.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
Contido do menú
Cabeceiras
Engade unha cabeceira para etiquetar seccións de accións en calquera menú despregable.
<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>
Separadores
Separe os grupos de elementos de menú relacionados cun divisor.
<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>
Texto
Coloque calquera texto de forma libre nun menú despregable con texto e use as utilidades de espazado . Teña en conta que probablemente necesitará estilos de tamaño adicionais para limitar o ancho do menú.
<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>
Formularios
Coloca un formulario nun menú despregable ou convérteo nun menú despregable e usa as utilidades de marxe ou de recheo para darlle o espazo negativo que necesitas.
<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>
<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>
Opcións desplegables
Use data-bs-offset
ou data-bs-reference
para cambiar a localización do menú despregable.
<div class="d-flex">
<div class="dropdown me-1">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
Offset
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<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" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
<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 de peche automático
Por defecto, o menú despregable está pechado ao facer clic dentro ou fóra do menú despregable. Podes usar a autoClose
opción para cambiar este comportamento do menú despregable.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="defaultDropdown">
<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" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
Clickable outside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
<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" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<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" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
Manual close
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<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>
Sass
Variables
Variables para todos os menús despregables:
$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: rgba($black, .15);
$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($gray-900, 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: $dropdown-padding-y $dropdown-item-padding-x;
Variables para o menú despregable escuro :
$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;
Variables para os cursores baseados en CSS que indican a interactividade dun menú despregable:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
Mixins
Os mixins úsanse para xerar os cursores baseados en CSS e pódense atopar en 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;
}
}
}
Uso
A través de atributos de datos ou JavaScript, o complemento despregable alterna o contido oculto (menús despregables) ao alternar a .show
clase no pai .dropdown-menu
. Confíase data-bs-toggle="dropdown"
no atributo para pechar os menús despregables a nivel de aplicación, polo que é unha boa idea usalo sempre.
mouseover
controladores baleiros aos fillos inmediatos do
<body>
elemento. Este truco feo é necesario para evitar unha
peculiaridade na delegación de eventos de iOS , que doutro xeito evitaría que un toque en calquera lugar fóra do menú despregable active o código que pecha o menú despregable. mouseover
Unha vez que se pecha o menú despregable, elimínanse
estes controladores baleiros adicionais
.A través de atributos de datos
Engadir data-bs-toggle="dropdown"
a unha ligazón ou botón para alternar un menú despregable.
<div class="dropdown">
<button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>
Vía JavaScript
Chame aos menús despregables mediante JavaScript:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"
aínda necesario
Independentemente de se chamas ao teu menú despregable mediante JavaScript ou usas a API de datos, data-bs-toggle="dropdown"
sempre é necesario que estea presente no elemento de activación do menú despregable.
Opcións
As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-bs-
, como en data-bs-offset=""
. Asegúrate de cambiar o tipo de maiúsculas e minúsculas do nome da opción de camelCase a kebab-case ao pasar as opcións a través dos atributos de datos. Por exemplo, en lugar de usar data-bs-autoClose="false"
, use data-bs-auto-close="false"
.
Nome | Tipo | Por defecto | Descrición |
---|---|---|---|
boundary |
cadea | elemento | 'clippingParents' |
Límite de restricción de desbordamento do menú despregable (aplícase só ao modificador preventOverflow de Popper). Por defecto é 'clippingParents' e pode aceptar unha referencia HTMLElement (só a través de JavaScript). Para obter máis información, consulte os documentos detectOverflow de Popper . |
reference |
cadea | elemento | obxecto | 'toggle' |
Elemento de referencia do menú despregable. Acepta os valores de 'toggle' , 'parent' , unha referencia HTMLElement ou un obxecto que proporciona getBoundingClientRect . Para obter máis información, consulte os documentos do constructor de Popper e os documentos de elementos virtuais . |
display |
corda | 'dynamic' |
Por defecto, usamos Popper para o posicionamento dinámico. Desactiva isto con static . |
offset |
matriz | cadea | función | [0, 2] |
Compensación do menú despregable en relación ao seu obxectivo. Podes pasar unha cadea en atributos de datos con valores separados por comas como: Cando se usa unha función para determinar a compensación, chámase cun obxecto que contén a posición do popper, a referencia e os rectos do popper como primeiro argumento. O nodo DOM do elemento desencadeante pásase como segundo argumento. A función debe devolver unha matriz con dous números: . Para obter máis información, consulte os documentos de offset de Popper . |
autoClose |
booleano | corda | true |
Configure o comportamento de peche automático do menú despregable:
|
popperConfig |
nulo | obxecto | función | null |
Para cambiar a configuración de Popper predeterminada de Bootstrap, consulte Configuración de Popper . Cando se usa unha función para crear a configuración de Popper, chámase cun obxecto que contén a configuración de Popper predeterminada de Bootstrap. Axúdache a usar e combinar a configuración predeterminada coa túa propia configuración. A función debe devolver un obxecto de configuración para Popper. |
Usando a función conpopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Métodos
Método | Descrición |
---|---|
toggle |
Alterna o menú despregable dunha determinada barra de navegación ou navegación por pestanas. |
show |
Mostra o menú despregable dunha determinada barra de navegación ou navegación por pestanas. |
hide |
Oculta o menú despregable dunha determinada barra de navegación ou navegación por pestanas. |
update |
Actualiza a posición do menú despregable dun elemento. |
dispose |
Destrúe o menú despregable dun elemento. (Elimina os datos almacenados no elemento DOM) |
getInstance |
Método estático que che permite obter a instancia despregable asociada a un elemento DOM, podes usalo así:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
Método estático que devolve unha instancia despregable asociada a un elemento DOM ou crea unha nova no caso de que non se iniciou. Podes usalo así:bootstrap.Dropdown.getOrCreateInstance(element) |
Eventos
Todos os eventos do menú despregable desenvólvense no elemento de alternancia e, a continuación, burbullan. Así, tamén podes engadir oíntes de eventos no .dropdown-menu
elemento principal de '. hide.bs.dropdown
e hidden.bs.dropdown
os eventos teñen unha clickEvent
propiedade (só cando o tipo de evento orixinal é click
) que contén un obxecto de evento para o evento de clic.
Método | Descrición |
---|---|
show.bs.dropdown |
Disénciase inmediatamente cando se chama ao método show instance. |
shown.bs.dropdown |
Activado cando o menú despregable se fixo visible para o usuario e se completaron as transicións CSS. |
hide.bs.dropdown |
Disénciase inmediatamente cando se chamou ao método de ocultar instancia. |
hidden.bs.dropdown |
Despediuse cando o menú despregable rematou de ocultarse ao usuario e se completaron as transicións CSS. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})