Dropdown

Name Class HTML Result 

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton-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>
</div>
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton-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>
  </div>
</div>

Action Another action Something else here
Action Another action Something else here 

<div class="dropdown">
  <button class="btn btn-ghost-primary dropdown-toggle" type="button" id="dropdownMenuButton-sec" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton-sec">
    <h5 class="dropdown-header">Dropdown Header</h5>
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item disabled" href="#">Disabled action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <a class="dropdown-item active" href="#">Active action</a>
    <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item mdi mdi-alarm" href="#">Action with icon</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item mdi mdi-trash-can-outline text-danger" href="#">Danger action</a>
  </div>
</div>
Dropdown Header
Action Another action Disabled action Something else here Active action
Separated link
Action with icon
Danger action 

<div class="dropdown">
  <button class="btn btn-icon-only btn-square mdi mdi-dots-horizontal btn-ghost-primary dropdown-toggle" type="button" id="dropdownMenuButton-icon" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton-icon">
    <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>
<div class="dropdown">
  <button class="btn btn-outline-primary btn-icon-only btn-square mdi mdi-dots-horizontal dropdown-toggle" type="button" id="dropdownMenuButton-secicon" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton-secicon">
    <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>

Action Another action Something else here
Action Another action Something else here