Dropdown

Ejemplos

Ejemplo básico


<div class="dropdown">

    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown button <span class="icon-expand-more"></span></button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">

        <a class="dropdown-item" href="#">Action</a>

        <a class="dropdown-item" href="#">Another action</a>

        <a class="dropdown-item" href="#">Something else here</a>

    </div>

</div>

Ejemplo básico usando enlace


<div class="dropdown">

    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown link <span class="icon-expand-more"></span></a>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">

        <a class="dropdown-item" href="#">Action</a>

        <a class="dropdown-item" href="#">Another action</a>

        <a class="dropdown-item" href="#">Something else here</a>

    </div>

</div>

Colores

Añadir clase semántica .btn-(primary, secundary, warning...) al elemento <button> o <a>.

Botón dividido (Split button)


<div class="btn-group mb-1">

    <button type="button" class="btn btn-secondary">Secondary</button>

    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

        <span class="icon-expand-more"></span>

    </button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">

        <a class="dropdown-item" href="#">Action</a>

        <a class="dropdown-item" href="#">Another action</a>

        <a class="dropdown-item" href="#">Something else here</a>

    </div>

</div>


<div class="btn-group mb-1">

    <button type="button" class="btn btn-outline-secondary">Secondary</button>

    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

        <span class="icon-expand-more"></span>

    </button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">

        <a class="dropdown-item" href="#">Action</a>

        <a class="dropdown-item" href="#">Another action</a>

        <a class="dropdown-item" href="#">Something else here</a>

    </div>

</div>

Tamaños

Añadir clase .btn-sm al elemento <button> o <a>

Añadir clase .btn-lg al elemento <button> o <a>

Dirección

Arriba


<div class="btn-group dropup">

    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup <span class="icon-expand-less"></span></button>

    <div class="dropdown-menu">

        <a class="dropdown-item" href="#">Action</a>

        <a class="dropdown-item" href="#">Another action</a>

        <a class="dropdown-item" href="#">Something else here</a>

    </div>

</div>


<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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

        <span class="icon-expand-less"></span>

    </button>

    <div class="dropdown-menu">

        <a class="dropdown-item" href="#">Action</a>

        <a class="dropdown-item" href="#">Another action</a>

        <a class="dropdown-item" href="#">Something else here</a>

    </div>

</div>

Derecha


<div class="btn-group dropright">

    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropright <span class="icon-chevron-right"></span></button>

    <div class="dropdown-menu">

        <a class="dropdown-item" href="#">Action</a>

        <a class="dropdown-item" href="#">Another action</a>

        <a class="dropdown-item" href="#">Something else here</a>

    </div>

</div>


<div class="btn-group dropright">

    <button type="button" class="btn btn-secondary">Split dropright</button>

    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

        <span class="icon-chevron-right"></span>

    </button>

    <div class="dropdown-menu">

        <a class="dropdown-item" href="#">Action</a>

        <a class="dropdown-item" href="#">Another action</a>

        <a class="dropdown-item" href="#">Something else here</a>

    </div>

</div>

Izquierda


<div class="btn-group dropleft">

    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="icon-chevron-left"></span> Dropleft</button>

    <div class="dropdown-menu">

        <a class="dropdown-item" href="#">Action</a>

        <a class="dropdown-item" href="#">Another action</a>

        <a class="dropdown-item" href="#">Something else here</a>

    </div>

</div>


<div class="btn-group">

    <div class="btn-group dropleft" role="group">

        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

            <span class="icon-chevron-left"></span>

        </button>

        <div class="dropdown-menu">

            <a class="dropdown-item" href="#">Action</a>

            <a class="dropdown-item" href="#">Another action</a>

            <a class="dropdown-item" href="#">Something else here</a>

        </div>

    </div>

    <button type="button" class="btn btn-secondary">Split dropleft</button>

</div>

Alineación del menú


<div class="btn-group">

    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Right-aligned menu <span class="icon-expand-more"></span></button>

    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">

        <a class="dropdown-item" href="#">Action</a>

        <a class="dropdown-item" href="#">Another action</a>

        <a class="dropdown-item" href="#">Something else here</a>

    </div>

</div>

Contenido del menú

Header


<div class="btn-group">

    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown with header <span class="icon-expand-more"></span></button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">

        <h6 class="dropdown-header">Dropdown header</h6>

        <a class="dropdown-item" href="#">Action</a>

        <a class="dropdown-item" href="#">Another action</a>

        <a class="dropdown-item" href="#">Something else here</a>

    </div>

</div>

Divisor


<div class="btn-group">

    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown with divider <span class="icon-expand-more"></span></button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">

        <a class="dropdown-item" href="#">Action</a>

        <a class="dropdown-item" href="#">Another action</a>

        <div class="dropdown-divider"></div>

        <a class="dropdown-item" href="#">Something else here</a>

    </div>

</div>

Texto


<div class="btn-group">

    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown with text <span class="icon-expand-more"></span></button>

    <div class="dropdown-menu p-4" aria-labelledby="dropdownMenuButton">

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

</div>