<li>
  <div class="btn-group nav-item dropdown" dropdown>
    <a dropdownToggle class="nav-link dropdown-toggle waves-light">
      Button dropdown
      <span class="caret"></span>
    </a>
    <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>
</li>

<li>
  <div class="btn-group nav-item dropdown"dropdown>
    <a dropdownToggle class="nav-link dropdown-toggle waves-light">
      Button dropdown
      <span class="caret"></span>
    </a>

    <div *dropdownMenu class="dropdown-menu dropdown-secondary dropdown"role="menu">
      <li role="menuitem">
        <a class="dropdown-item" href="#">Action</a>
      </li>
      <li role="menuitem">
        <a class="dropdown-item" href="#">Another action</a>
      </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>
    </div>

  </div>
</li>