• Action
  • Another action
  • Something else here
  • Separated link
  • Action
  • Another action
  • Something else here
  • Separated link
  • <mk-dropdown toggleText="Basic Toggle" buttonStyleClass="btn btn-success dropdown-toggle">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </mk-dropdown>
    <button #separatedToggleElement type="button" class="btn btn-warning dropdown-toggle">
      Separated Toggle <span class="fa fa-info-circle"></span>
    </button>

    Then, somewere else...

    <mk-dropdown [toggleElement]="separatedToggleElement">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </mk-dropdown>
    <div class="input-group">
      <div mk-dropdown class="input-group-btn" [isWrapper]="false">
        <mk-dropdown-toggle>
          <button #toggleElement type="button" class="btn btn-default dropdown-toggle">
            Input Toggle
            <span class="fa fa-caret-down"></span>
          </button>
        </mk-dropdown-toggle>
        <mk-dropdown-menu>
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </mk-dropdown-menu>
      </div>
      <input type="text" class="form-control">
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-default">1</button>
      <button type="button" class="btn btn-default">2</button>
      <div mk-dropdown class="btn-group" [isWrapper]="false">
        <mk-dropdown-toggle>
          <button #toggleElement type="button" class="btn btn-default dropdown-toggle">
            <span class="fa fa-caret-down"></span>
          </button>
        </mk-dropdown-toggle>
        <mk-dropdown-menu>
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </mk-dropdown-menu>
      </div>
    </div>
    Name Type Default Description
    buttonStyleClass string btn btn-default dropdown-toggle Defines the toggle button classes.
    contentStyleClass string null Defines the content list classes.
    isCollapsed boolean true Defines if dropdown is collapsed.
    isWrapper boolean true Defines if dropdown component is wrapped by a div.
    styleClass string dropdown The dropdown style classes.
    toggleElement Element null Set the toggle dropdown element if outside of the component or within mk-dropdown-toggle.
    toggleText string null The dropdown toggle text if default button used.
    Name Parameters Description
    onCollapseStart event: browser event Callback to invoke before dropdown toggle
    onCollapseDone event: browser event Callback to invoke after dropdown toggle