Dropdowns
Extended dropdown components for organizing your menus and content
Default Bootstrap Dropdown
PUG
.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
.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
.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
.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.