Angular 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 mdbDropdown 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 mdbDropdownToggle. Then, add the menu’s HTML.


<div class="btn-group" mdbDropdown>
    <button mdbDropdownToggle type="button" mdbBtn color="primary" class="dropdown-toggle waves-light" mdbWavesEffect>
        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 MDB Pro component


<!--Dropdown primary-->
<div class="dropdown" mdbDropdown>

    <!--Trigger-->
    <button mdbDropdownToggle mdbBtn color="primary" class="dropdown-toggle waves-light" type="button" mdbWavesEffect>
        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-->
        

To change a color of the dropdown use one of the following classes.

  • .dropdown-primary

  • .dropdown-default

  • .dropdown-secondary

  • .dropdown-success

  • .dropdown-elegant

  • .dropdown-danger

  • .dropdown-info

  • .dropdown-warning

  • .dropdown-ins


Split button dropdowns


<!-- Split button -->
<div class="btn-group" mdbDropdown>
    <button type="button" mdbBtn color="danger" class="waves-light" mdbWavesEffect>Action</button>
    <button type="button" mdbDropdownToggle mdbBtn color="danger" class="dropdown-toggle dropdown-toggle-split px-3 waves-light" mdbWavesEffect></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>
        

Sizing

Button dropdowns work with buttons of all sizes.


<!-- Large button group -->
<div class="btn-group" mdbDropdown>
    <button mdbDropdownToggle mdbBtn color="danger" size="lg" class="dropdown-toggle waves-light" type="button" mdbWavesEffect>
        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" mdbDropdown>
    <button mdbDropdownToggle mdbBtn color="danger" size="sm" class="dropdown-toggle waves-light" type="button" mdbWavesEffect>
        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" mdbDropdown [dropup]="true">
    <button type="button" mdbBtn color="primary" class="waves-light" mdbWavesEffect>Dropup</button>
    <button type="button" mdbBtn color="primary" mdbDropdownToggle class="dropdown-toggle dropdown-toggle-split px-3 waves-light" mdbWavesEffect></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="btn-group" mdbDropdown>
    <button mdbDropdownToggle type="button" mdbBtn color="primary" class="dropdown-toggle waves-light" mdbWavesEffect>
        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>
</div>
        



Disabled menu items

Add .disabled to items in the dropdown to style them as disabled.


<div class="dropdown" mdbDropdown>
    <button mdbDropdownToggle type="button" mdbBtn color="primary" class="dropdown-toggle waves-light" mdbWavesEffect>
        Dropdown
    </button>

    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Regular link</a>
        <a class="dropdown-item disabled" href="#">Disabled link</a>
        <a class="dropdown-item" href="#">Another link</a>
    </div>
</div>
        

Options

BsDropdownDirective


Selector [bsDropdown],[mdbDropdown]
Exported as bs-dropdown

Inputs

[autoClose] Type: boolean
Indicates that dropdown will be closed on item or document click, and after pressing ESC
[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

Outputs

(isOpenChange)="isOpenChange()" Emits an event when isOpen change
(hidden)="onHidden()" Emits an event when the popover is hidden
(shown)="onShown()" Emits an event when the popover is shown

Example:


<div class="btn-group" mdbDropdown (shown)="onShown()" (isOpenChange)="isOpenChange()" (hidden)="onHidden()">
    <button mdbDropdownToggle type="button" mdbBtn color="primary" class="dropdown-toggle waves-light" mdbWavesEffect>
        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>
	

import { Component } from '@angular/core';

@Component({
  selector: 'dropdown-example',
  templateUrl: 'dropdown.html',
})
export class DropdownComponent {
    public isOpenChange(): void { console.log('isOpenChange triggered!'); }
    public onHidden(): void { console.log('onHidden triggered!'); }
    public onShown(): void { console.log('OnShown triggered!'); }
}
  

Methods

To your mdbDropdown 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 mdbBtn color="primary" class="waves-light" (mouseenter)="dropdown.toggle()">Dropdown toggle</button>

<div class="btn-group" mdbDropdown #dropdown="bs-dropdown">
    <button  type="button" mdbBtn color="primary" class="dropdown-toggle waves-light" mdbWavesEffect>
        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>
        

API Reference:

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

API Reference for MDB Angular Dropdowns:
// For MDB Angular Pro
import { DropdownModule, WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'
// For MDB Angular Free
import { DropdownModule, WavesModule, ButtonsModule } from 'angular-bootstrap-md'