Dropdowns
Toggle contextual overlays for displaying lists of links or other content.
Static examples
<!-- Dropdown example 1 -->
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Regular link</a>
<a href="#" class="dropdown-item">Another regular link</a>
<a href="#" class="dropdown-item active">Active link</a>
<a href="#" class="dropdown-item disabled">Disabled link</a>
</div>
<!-- Dropdown example 2 -->
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Separeted link</a>
</div>
<!-- Dropdown example 3 -->
<div class="dropdown-menu">
<a href="#" class="dropdown-item">
<i class="fe-home mr-2"></i>
Regular link
<span class="badge badge-pill badge-secondary ml-2">2</span>
</a>
<a href="#" class="dropdown-item">
<i class="fe-user mr-2"></i>
Profile
<span class="badge badge-pill badge-danger ml-2">3</span>
</a>
<a href="#" class="dropdown-item">
<i class="fe-message-square mr-2"></i>
Messages
<span class="badge badge-pill badge-success ml-2">5</span>
</a>
<a href="#" class="dropdown-item">
<i class="fe-settings mr-2"></i>
Settings
<span class="badge badge-pill badge-warning ml-2">1</span>
</a>
</div>
// Dropdown example 1
.dropdown-menu
a(href="#").dropdown-item
| Regular link
a(href="#").dropdown-item
| Another regular link
a(href="#").dropdown-item.active
| Active link
a(href="#").dropdown-item.disabled
| Disabled link
// Dropdown example 2
.dropdown-menu
h6.dropdown-header
| Dropdown header
a(href="#").dropdown-item
| Action
a(href="#").dropdown-item
| Another action
.dropdown-divider
a(href="#").dropdown-item
| Separated link
// Dropdown example 3
.dropdown-menu
a(href="#").dropdown-item
i.fe-home.mr-2
| Home
span.badge.badge-pill.badge-secondary.ml-2
| 2
a(href="#").dropdown-item
i.fe-user.mr-2
| Profile
span.badge.badge-pill.badge-danger.ml-2
| 3
a(href="#").dropdown-item
i.fe-message-square.mr-2
| Messages
span.badge.badge-pill.badge-success.ml-2
| 5
a(href="#").dropdown-item
i.fe-settings.mr-2
| Settings
span.badge.badge-pill.badge-warning.ml-2
| 1
Forms inside dropdown
<!-- Forms inside dropdown -->
<div class="dropdown-menu" style="width: 17rem;">
<form class="p-4">
<div class="form-group">
<label for="exampleDropdownFormEmail" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail" placeholder="email@example.com" required>
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword" placeholder="Password" required>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="dropdownCheck">
<label for="dropdownCheck" class="custom-control-label">Remember me</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign In</button>
</form>
</div>
// Forms inside dropdown
.dropdown-menu(style="width: 17rem;")
form.p-4
.form-group
label.form-label(for="exampleDropdownFormEmail")
| Email address
input(type="email", id="exampleDropdownFormEmail", placeholder="email@example.com", required).form-control
.form-group
label.form-label(for="exampleDropdownFormPassword")
| Password
input(type="password", id="exampleDropdownFormPassword", placeholder="Password", required).form-control
.form-group
.custom-control.custom-checkbox
input(type="checkbox", id="dropdownCheck").custom-control-input
label(for="dropdownCheck").custom-control-label
| Remember me
button(type="submit").btn.btn-primary
| Sign In
Directions
<!-- Dropdown -->
<div class="btn-group dropdown">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Something else here</a>
</div>
</div>
<!-- Dropup -->
<div class="btn-group dropup">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Something else here</a>
</div>
</div>
<!-- Dropright -->
<div class="btn-group dropright">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Something else here</a>
</div>
</div>
<!-- Dropleft -->
<div class="btn-group dropleft">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Something else here</a>
</div>
</div>
// Dropdown
.btn-group.dropdown
button(type="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false").btn.btn-outline-secondary.dropdown-toggle
| Dropdown
.dropdown-menu
a(href="#").dropdown-item
| Action
a(href="#").dropdown-item
| Another action
.dropdown-divider
a(href="#").dropdown-item
| Something else here
// Dropup
.btn-group.dropup
button(type="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false").btn.btn-outline-secondary.dropdown-toggle
| Dropup
.dropdown-menu
a(href="#").dropdown-item
| Action
a(href="#").dropdown-item
| Another action
.dropdown-divider
a(href="#").dropdown-item
| Something else here
// Dropright
.btn-group.dropright
button(type="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false").btn.btn-outline-secondary.dropdown-toggle
| Dropright
.dropdown-menu
a(href="#").dropdown-item
| Action
a(href="#").dropdown-item
| Another action
.dropdown-divider
a(href="#").dropdown-item
| Something else here
// Dropleft
.btn-group.dropleft
button(type="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false").btn.btn-outline-secondary.dropdown-toggle
| Dropleft
.dropdown-menu
a(href="#").dropdown-item
| Action
a(href="#").dropdown-item
| Another action
.dropdown-divider
a(href="#").dropdown-item
| Something else here
Menu alignment
<!-- Dropdown -->
<div class="btn-group dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Something else here</a>
</div>
</div>
// Dropdown
.btn-group.dropdown
button(type="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false").btn.btn-primary.dropdown-toggle
| Right-aligned menu
.dropdown-menu.dropdown-menu-right
a(href="#").dropdown-item
| Action
a(href="#").dropdown-item
| Another action
.dropdown-divider
a(href="#").dropdown-item
| Something else here
Split button
<!-- Solid split button -->
<div class="btn-group">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>
<!-- Outline split button -->
<div class="btn-group">
<button type="button" class="btn btn-outline-primary">Button</button>
<button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>
// Solid split button
.btn-group
button(type="button").btn.btn-primary
| Button
button(type="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false'").btn.btn-primary.dropdown-toggle.dropdown-toggle-split
span.sr-only
| Toggle dropdown
.dropdown-menu
| ...
// Outline split button
.btn-group
button(type="button").btn.btn-outline-primary
| Button
button(type="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false'").btn.btn-outline-primary.dropdown-toggle.dropdown-toggle-split
span.sr-only
| Toggle dropdown
.dropdown-menu
| ...