Dropdowns
Extended dropdown components for organizing your menus and content
Default Bootstrap Dropdown
PUG
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="dropdownMenuButton" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown Button</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
</div>.dropdown
button#dropdownMenuButton.btn.btn-primary.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
| Dropdown Button
.dropdown-menu(aria-labelledby='dropdownMenuButton')
a.dropdown-item(href='javascript:void(0);') Action
a.dropdown-item(href='javascript:void(0);') Another action
a.dropdown-item(href='javascript:void(0);') Something else hereThe default Bootstrap dropdown has been extended and modified within the SB Admin Pro theme. Click on the dropdown button above to see a demo.
Menu Item Icons
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">
<div class="dropdown-item-icon">
<i data-feather="user"></i>
</div>
Profile
</a><a class="dropdown-item" href="javascript:void(0);">
<div class="dropdown-item-icon">
<i data-feather="settings"></i>
</div>
Settings
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">
<div class="dropdown-item-icon">
<i data-feather="log-out"></i>
</div>
Logout
</a>
</div>.dropdown-menu
a.dropdown-item(href='javascript:void(0);')
.dropdown-item-icon
i(data-feather='user')
| Profile
a.dropdown-item(href='javascript:void(0);')
.dropdown-item-icon
i(data-feather='settings')
| Settings
.dropdown-divider
a.dropdown-item(href='javascript:void(0);')
.dropdown-item-icon
i(data-feather='log-out')
| Logout
Use the
.dropdown-item-icon
wrapper around any icon within any
.dropdown-item
to see a pre-styled icon to accompany the dropdown item content.
Animated Dropdown Menu
<!-- Default Behavior -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="dropdownNoAnimation" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">No Animation</button>
<div class="dropdown-menu" aria-labelledby="dropdownNoAnimation">
<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>
</div>
<!-- Fade In Animation -->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" id="dropdownFadeIn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Fade In</button>
<div class="dropdown-menu animated--fade-in" aria-labelledby="dropdownFadeIn">
<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>
</div>
<!-- Fade In Up Animation -->
<div class="dropdown">
<button class="btn btn-teal dropdown-toggle" id="dropdownFadeInUp" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Fade In Up</button>
<div class="dropdown-menu animated--fade-in-up" aria-labelledby="dropdownFadeInUp">
<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>
</div>//- Default Behavior
.dropdown
button#dropdownNoAnimation.btn.btn-primary.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
| No Animation
.dropdown-menu(aria-labelledby='dropdownNoAnimation')
a.dropdown-item(href='javascript:void(0);') Action
a.dropdown-item(href='javascript:void(0);') Another action
a.dropdown-item(href='javascript:void(0);') Something else here
//- Fade In Animation
.dropdown
button#dropdownFadeIn.btn.btn-secondary.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
| Fade In
.dropdown-menu.animated--fade-in(aria-labelledby='dropdownFadeIn')
a.dropdown-item(href='javascript:void(0);') Action
a.dropdown-item(href='javascript:void(0);') Another action
a.dropdown-item(href='javascript:void(0);') Something else here
//- Fade In Up Animation
.dropdown
button#dropdownFadeInUp.btn.btn-teal.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
| Fade In Up
.dropdown-menu.animated--fade-in-up(aria-labelledby='dropdownFadeInUp')
a.dropdown-item(href='javascript:void(0);') Action
a.dropdown-item(href='javascript:void(0);') Another action
a.dropdown-item(href='javascript:void(0);') Something else here
The
.animated--fade-in
and
.animted--fade-in-up
utility classes can be used in order to add animations to any dropdown menu.
Custom Notification Dropdown
<div class="dropdown-notifications">
<div class="dropdown-menu dropdown-menu-right border-0 shadow" aria-labelledby="navbarDropdownAlerts">
<h6 class="dropdown-header dropdown-notifications-header">
<i data-feather="bell"></i>
Dropdown Header
</h6>
<!-- Example Item 1-->
<a class="dropdown-item dropdown-notifications-item" href="javascript:void(0);">
<div class="dropdown-notifications-item-icon bg-warning"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg></div>
<div class="dropdown-notifications-item-content">
<div class="dropdown-notifications-item-content-details">Dropdown Item Details</div>
<div class="dropdown-notifications-item-content-text">This is the dropdown item text. It will truncate after a fixed width.</div>
</div>
</a>
<!-- Example Item 2-->
<a class="dropdown-item dropdown-notifications-item" href="javascript:void(0);">
<div class="dropdown-notifications-item-icon bg-info">
<i data-feather="bar-chart"></i>
</div>
<div class="dropdown-notifications-item-content">
<div class="dropdown-notifications-item-content-details">Dropdown Item Details</div>
<div class="dropdown-notifications-item-content-text">This is the dropdown item text. It will truncate after a fixed width.</div>
</div>
</a>
<!-- Example Item 3-->
<a class="dropdown-item dropdown-notifications-item" href="javascript:void(0);">
<div class="dropdown-notifications-item-icon bg-danger">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-notifications-item-content">
<div class="dropdown-notifications-item-content-details">Dropdown Item Details</div>
<div class="dropdown-notifications-item-content-text">This is the dropdown item text. It will truncate after a fixed width.</div>
</div>
</a>
<!-- Example Item 4-->
<a class="dropdown-item dropdown-notifications-item" href="javascript:void(0);">
<div class="dropdown-notifications-item-icon bg-success">
<i data-feather="user-plus"></i>
</div>
<div class="dropdown-notifications-item-content">
<div class="dropdown-notifications-item-content-details">Dropdown Item Details</div>
<div class="dropdown-notifications-item-content-text">This is the dropdown item text. It will truncate after a fixed width.</div>
</div>
</a>
<a class="dropdown-item dropdown-notifications-footer" href="javascript:void(0);">Dropdown Footer</a>
</div>
</div>.dropdown-notifications
.dropdown-menu.dropdown-menu-right.border-0.shadow(aria-labelledby='navbarDropdownAlerts')
h6.dropdown-header.dropdown-notifications-header
i.mr-2(data-feather='bell')
| Dropdown Header
// Example Item 1
a.dropdown-item.dropdown-notifications-item(href='javascript:void(0);')
.dropdown-notifications-item-icon.bg-warning
i(data-feather='activity')
.dropdown-notifications-item-content
.dropdown-notifications-item-content-details
| Dropdown Item Details
.dropdown-notifications-item-content-text
| This is the dropdown item text. It will truncate after a fixed width.
// Example Item 2
a.dropdown-item.dropdown-notifications-item(href='javascript:void(0);')
.dropdown-notifications-item-icon.bg-info
i(data-feather='bar-chart')
.dropdown-notifications-item-content
.dropdown-notifications-item-content-details
| Dropdown Item Details
.dropdown-notifications-item-content-text
| This is the dropdown item text. It will truncate after a fixed width.
// Example Item 3
a.dropdown-item.dropdown-notifications-item(href='javascript:void(0);')
.dropdown-notifications-item-icon.bg-danger
i.fas.fa-exclamation-triangle
.dropdown-notifications-item-content
.dropdown-notifications-item-content-details
| Dropdown Item Details
.dropdown-notifications-item-content-text
| This is the dropdown item text. It will truncate after a fixed width.
// Example Item 4
a.dropdown-item.dropdown-notifications-item(href='javascript:void(0);')
div.dropdown-notifications-item-icon.bg-success
i(data-feather='user-plus')
div.dropdown-notifications-item-content
div.dropdown-notifications-item-content-details
| Dropdown Item Details
div.dropdown-notifications-item-content-text
| This is the dropdown item text. It will truncate after a fixed width.
a.dropdown-item.dropdown-notifications-footer(href='javascript:void(0);') Dropdown FooterThe notifications dropdown is a custom component built into SB Admin Pro. You can see two examples of the component in action on the topnav when you click on the alerts and message center icons.
A max height is set to the dropdown itself, which enables a custom scrollbar if the content within the dropdown exceeds a certain height.
This component is well suited for dropdowns that contain large amounts of content that you wish to display in a flush format. The icons are replacable with images, or you can remove them.