Bootstrap dropdown
The dropdown is simply a drop-down menu embedding additional links or content. It allows you to construct much more advanced navigation and link categorization.
In case of more complicated navigations systems dropdowns are the essential elements providing you with possibility of placing all the most relevant links in our navigation bar (or other component acting as navigation - such as SideNav)
Aside from being not only highly functional, MDB dropdowns are also extraordinary visually attractive. It gives them this characteristic Material Design effects, like shadows, living colors or charming waves effect after opening a link.
They’re toggled by clicking, not by hovering; this is an intentional design decision. Why?
MDB is "mobile first" framework so, we avoid mixing functional elements and interaction by hovering because it decreases User Experience of users of mobile devices.
Google Material Design guidelines recommend the same approach.
Basic example
Add dropdown
attribute to the parent div
. If selected options need to be highlighted with color, then add class .dropdown
instead of .btn-group
.
Inside button element add attribute dropdownToggle
. Then, add the menu’s HTML.
<div class="btn-group" dropdown>
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" ripple-radius>
Basic dropdown
</button>
<div class="dropdown-menu dropdown-primary">
<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="divider dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
Material dropdowns Premium component
<!--Dropdown primary-->
<div class="dropdown" dropdown>
<!--Trigger-->
<button dropdownToggle class="btn btn-primary dropdown-toggle" type="button" ripple-radius>Dropdown primary</button>
<!--Menu-->
<div class="dropdown-menu dropdown-primary">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!--/Dropdown primary-->
<!--Dropdown danger-->
<div class="dropdown" dropdown>
<!--Trigger-->
<button dropdownToggle class="btn btn-danger dropdown-toggle" type="button" ripple-radius>Dropdown danger</button>
<!--Menu-->
<div class="dropdown-menu dropdown-danger">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!--/Dropdown danger-->
<!--Dropdown default-->
<div class="dropdown" dropdown>
<!--Trigger-->
<button dropdownToggle class="btn btn-default dropdown-toggle" type="button" ripple-radius>Dropdown default</button>
<!--Menu-->
<div class="dropdown-menu dropdown-default">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!--/Dropdown default-->
<!--Dropdown secondary-->
<div class="dropdown" dropdown>
<!--Trigger-->
<button dropdownToggle class="btn btn-secondary dropdown-toggle" type="button" ripple-radius>Dropdown secondary</button>
<!--Menu-->
<div class="dropdown-menu dropdown-secondary">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!--/Dropdown secondary-->
<!--Dropdown success-->
<div class="dropdown" dropdown>
<!--Trigger-->
<button dropdownToggle class="btn btn-success dropdown-toggle" type="button" ripple-radius>Dropdown success</button>
<!--Menu-->
<div class="dropdown-menu dropdown-success">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!--/Dropdown success-->
<!--Dropdown info-->
<div class="dropdown" dropdown>
<!--Trigger-->
<button dropdownToggle class="btn btn-info dropdown-toggle" type="button" ripple-radius>Dropdown info</button>
<!--Menu-->
<div class="dropdown-menu dropdown-info">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!--/Dropdown info-->
<!--Dropdown warning-->
<div class="dropdown" dropdown>
<!--Trigger-->
<button dropdownToggle class="btn btn-warning dropdown-toggle" type="button" ripple-radius>Dropdown warning</button>
<!--Menu-->
<div class="dropdown-menu dropdown-warning">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!--/Dropdown warning-->
<!--Dropdown ins-->
<div class="dropdown" dropdown>
<!--Trigger-->
<button dropdownToggle class="btn btn-ins dropdown-toggle" type="button" ripple-radius>Dropdown ins</button>
<!--Menu-->
<div class="dropdown-menu dropdown-ins">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!--Dropdown ins-->
<!--Dropdown dark-->
<div class="dropdown" dropdown>
<!--Trigger-->
<button dropdownToggle class="btn btn-elegant dropdown-toggle" type="button" ripple-radius>Dropdown dark</button>
<!--Menu-->
<div class="dropdown-menu dropdown-dark">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!--Dropdown dark-->
Sizing
Button dropdowns work with buttons of all sizes.
<!-- Large button group -->
<div class="btn-group" dropdown>
<button dropdownToggle class="btn btn-danger btn-lg dropdown-toggle" type="button" ripple-radius>
Large button
</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>
<!-- Small button group -->
<div class="btn-group" dropdown>
<button dropdownToggle class="btn btn-danger btn-sm dropdown-toggle" type="button" ripple-radius>
Small button
</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>
Dropup variation
Trigger dropdown menus above elements by adding [dropup]="true"
to the parent.
<div class="btn-group" dropdown [dropup]="true">
<button type="button" class="btn btn-primary" ripple-radius>Dropup</button>
<button type="button" dropdownToggle class="btn btn-primary dropdown-toggle dropdown-toggle-split" ripple-radius></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>
Alignment
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent.
Add .dropdown-menu-right
to a .dropdown-menu
to right align the dropdown menu.
<div class="dropdown" dropdown>
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" ripple-radius>
Dropdown
</button>
<div class="dropdown-menu dropdown-menu-right">
<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="divider dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
Disabled menu items
Add .disabled
to items in the dropdown to style them as disabled.
<div class="dropdown" dropdown>
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" ripple-radius>
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="divider dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
API Reference
BsDropdownDirective
Selector | [bsDropdown],[dropdown] |
Exported as | bs-dropdown |
Inputs
[autoClose] |
Type: boolean Indicates that dropdown will be closed on item or document click, and after pressing ESC |
container |
Type: string A selector specifying the element the popover should be appended to. Currently only supports "body" |
[dropup] |
Type: boolean This attribute indicates that the dropdown should be opened upwards |
[isDisabled] |
Type: boolean Disables dropdown toggle and hides dropdown menu if opened |
[isOpen] |
Type: boolean Returns whether or not the popover is currently being shown |
placement |
Type: string Placement of a popover. Accepts: "top", "bottom", "left", "right". Also .dropdown-menu-right is needed for .dropdown-menu div |
triggers |
Type: string Specifies events that should trigger. Supports a space separated list of event names |
Example:
<div class="dropdown" dropdown [autoClose]="false" container="body">
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" ripple-radius>
This dropdown has nested submenu
</button>
<ul *dropdownMenu class="dropdown-menu" role="menu">
<li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
<li role="menuitem" dropdown triggers="mouseover" placement="right" container="body">
<a dropdownToggle class="dropdown-item dropdown-toggle" href="#" (click)="false">Hover me for nested dropdown</a>
<ul *dropdownMenu class="dropdown-menu" role="menu">
<li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Action1</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Action2</a></li>
</ul>
</li>
<li role="menuitem" dropdown triggers="mouseover" placement="right" container="body">
<a dropdownToggle class="dropdown-item dropdown-toggle" href="#" (click)="false">Hover me for nested dropdown</a>
<ul *dropdownMenu class="dropdown-menu" role="menu">
<li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Action1</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Action2</a></li>
</ul>
</li>
<li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
<li class="divider dropdown-divider"></li>
<li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
Outputs
(isOpenChange)="isOpenChange()" |
Emits an event when isOpen change |
(onHidden)="onHidden()" |
Emits an event when the popover is hidden |
(onShown)="onShown()" |
Emits an event when the popover is shown |
Example:
<div class="btn-group" dropdown (onShown)="onShown()" (isOpenChange)="isOpenChange()" (onHidden)="onHidden()">
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" ripple-radius>
Dropdown
</button>
<div class="dropdown-menu dropdown-primary">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="divider dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
export class AppComponent {
public isOpenChange(): void { }
public onHidden(): void { }
public onShown(): void { }
}
Methods
To your dropdown
element add #dropdown='bs-dropdown'
. And to the trigger add below mentioned options.
(event)="name.show()" |
Return type: void Opens an element’s popover. This is considered a “manual” triggering of the popover |
(event)="name.hide()" |
Return type: void Closes an element’s popover. This is considered a “manual” triggering of the popover |
(event)="name.toggle(value: boolean)()" |
Return type: void Toggles an element’s popover. This is considered a “manual” triggering of the popover |
Example:
<button class="btn btn-primary" (mouseenter)="dropdown.toggle()">Dropdown toggle</button>
<div class="btn-group" dropdown #dropdown="bs-dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" ripple-radius>
Dropdown
</button>
<div class="dropdown-menu dropdown-primary">
<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="divider dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>