Dropdowns

Simple Dropdowns

Button Dropdown
Link Dropdown
Button Dropdown
<div class="dropdown d-inline-block">
<!-- Dropdown Button -->
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<!-- /dropdown button -->
<!-- Dropdown Menu -->
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
</div>
<!-- /dropdown menu -->
</div>
Link Dropdown
<div class="dropdown d-inline-block">
<!-- Dropdown Link -->
<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown
link</a>
<!-- /dropdown link -->
<!-- Dropdown Menu -->
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
</div>
<!-- /dropdown menu -->
</div>

Various Color Dropdowns

Primary
Secondary
Success
Warning
Danger
Light
Dark
Primary
<div class="btn-group dropdown">
<!-- Dropdown Button -->
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Primary
</button>
<!-- /dropdown button -->
<!-- Dropdown Menu -->
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
<!-- /dropdown menu -->
</div>
Secondary
<div class="btn-group dropdown">
<!-- Dropdown Button -->
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Secondary
</button>
<!-- /dropdown button -->
<!-- Dropdown Menu -->
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
<!-- /dropdown menu -->
</div>
Success
<div class="btn-group dropdown">
<!-- Dropdown Button -->
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Success
</button>
<!-- /dropdown button -->
<!-- Dropdown Menu -->
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
<!-- /dropdown menu -->
</div>
Warning
<div class="btn-group dropdown">
<!-- Dropdown Button -->
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Warning
</button>
<!-- /dropdown button -->
<!-- Dropdown Menu -->
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
<!-- /dropdown menu -->
</div>
Danger
<div class="btn-group dropdown">
<!-- Dropdown Button -->
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Danger
</button>
<!-- /dropdown button -->
<!-- Dropdown Menu -->
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
<!-- /dropdown menu -->
</div>
Light
<div class="btn-group dropdown">
<!-- Dropdown Button -->
<button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Light
</button>
<!-- /dropdown button -->
<!-- Dropdown Menu -->
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
<!-- /dropdown menu -->
</div>
Dark
<div class="btn-group dropdown">
<!-- Dropdown Button -->
<button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dark
</button>
<!-- /dropdown button -->
<!-- Dropdown Menu -->
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
<!-- /dropdown menu -->
</div>

Sizes

Default
Large
Small
Default
<div class="btn-group dropdown">
<!-- Dropdown Button -->
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Primary
</button>
<!-- /dropdown button -->
<!-- Dropdown Menu -->
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
<!-- /dropdown menu -->
</div>
Large
<div class="btn-group dropdown">
<!-- Dropdown Button -->
<button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Primary
</button>
<!-- /dropdown button -->
<!-- Dropdown Menu -->
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
<!-- /dropdown menu -->
</div>
Small
<div class="btn-group dropdown">
<!-- Dropdown Button -->
<button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Primary
</button>
<!-- /dropdown button -->
<!-- Dropdown Menu -->
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
<!-- /dropdown menu -->
</div>

Directions

Up
Down
Right
Left
Up
<div class="btn-group dropup">
<!-- Dropdown Button -->
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup button
</button>
<!-- /dropdown button -->
<!-- Dropdown Menu -->
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
</div>
<!-- /dropdown menu -->
</div>
Down
<div class="btn-group dropdown">
<!-- Dropdown Button -->
<button type="button" class="btn btn-primary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
Offset
</button>
<!-- /dropdown button -->
<!-- Dropdown Menu -->
<div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
</div>
<!-- /dropdown menu -->
</div>
Right
<div class="btn-group dropright">
<!-- Dropdown Button -->
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup button
</button>
<!-- /dropdown button -->
<!-- Dropdown Menu -->
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
</div>
<!-- /dropdown menu -->
</div>
Left
<div class="btn-group dropleft">
<!-- Dropdown Button -->
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft button
</button>
<!-- /dropdown button -->
<!-- Dropdown Menu -->
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
</div>
<!-- /dropdown menu -->
</div>