Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
Open Bootstrap DocsExample
<div class="dropdown">
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</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">
<button type="button" class="btn btn-outline-danger">Split button</button>
<button type="button" class="btn btn-outline-danger 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">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-outline-primary" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-h"></i>
</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>Variations
<!-- User account -->
<div class="dropdown">
<button class="btn btn-primary btn-icon-only rounded-circle" type="button" id="dropdown_user_account" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="btn-inner--icon">
<i class="fa fa-user"></i>
</span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdown_user_account">
<h6 class="dropdown-header">User menu</h6>
<a class="dropdown-item" href="#">
<span class="float-right badge badge-primary">4</span>
<i class="fa fa-envelope text-primary"></i>Messages
</a>
<a class="dropdown-item" href="#">
<i class="fa fa-cog text-primary"></i>Settings
</a>
<div class="dropdown-divider" role="presentation"></div>
<a class="dropdown-item" href="#">
<i class="fa fa-sign-out-alt text-primary"></i>Sign out
</a>
</div>
</div>
<!-- Notifications -->
<div class="dropdown">
<button class="btn btn-secondary btn-icon dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="btn-inner--icon">
<i class="fa fa-bell"></i>
</span>
<span class="btn-inner--text">Notifications</span>
</button>
<div class="dropdown-menu dropdown-menu-xl py-0">
<div class="py-3 px-3">
<h5 class="heading h6 mb-0">Notifications</h5>
</div>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<div class="list-group-img">
<span class="avatar bg-purple">JD</span>
</div>
<div class="list-group-content">
<div class="list-group-heading">Johnyy Depp <small>10:05 PM</small></div>
<p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<div class="list-group-img">
<span class="avatar bg-pink">TC</span>
</div>
<div class="list-group-content">
<div class="list-group-heading">Tom Cruise <small>11:30 PM</small></div>
<p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<div class="list-group-img">
<span class="avatar bg-blue">WS</span>
</div>
<div class="list-group-content">
<div class="list-group-heading">Will Smith <small>15:45 PM</small></div>
<p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
</div>
</a>
</div>
<div class="py-3 text-center">
<a href="#" class="link link-sm link--style-3">View all notifications</a>
</div>
</div>
</div>
<!-- Inverse dropdown -->
<div class="dropdown">
<button class="btn btn-dark dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Inverse dropdown</button>
<div class="dropdown-menu dropdown-menu-inverse">
<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>Sizing
<!-- Large dropdown -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdown_large" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large dropdown
</button>
<div class="dropdown-menu dropdown-menu-lg" aria-labelledby="dropdown_large">
<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>
<!-- Small dropdown -->
<div class="dropdown">
<button class="btn btn-sm btn-primary dropdown-toggle" type="button" id="dropdown_small" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small dropdown
</button>
<div class="dropdown-menu dropdown-menu-sm" aria-labelledby="dropdown_small">
<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>