Note: The planet UI design system is an extension of the bootstrap framework. Please also referer to the bootstrap documentation for best pratices while using the framework.

Dropdowns

Standard dropdown

<span class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item text-success" href="#">Action</a>
    <a class="dropdown-item text-success" href="#">Another action</a>
    <a class="dropdown-item text-success" href="#">Something else here</a>
  </div>
</span>

Split dropdown button

<div class="btn-group dropdown">
    <button type="button" class="btn btn-primary"><i class="fa function-save fa-lg"></i> Save</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item text-success" href="#"><i class="fa function-save fa-lg"></i> Save &amp; Run</a>
    <a class="dropdown-item text-success" href="#"><i class="fa function-cancel fa-lg"></i> Discard changes</a>
  </div>
</div>

<div class="btn-group dropdown">
    <button type="button" class="btn btn-outline-primary"><i class="fa function-save fa-lg"></i> Save</button>
    <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item text-success" href="#"><i class="fa function-save fa-lg"></i> Save &amp; Run</a>
    <a class="dropdown-item text-success" href="#"><i class="fa function-cancel fa-lg"></i> Discard changes</a>
  </div>
</div>

<div class="btn-group dropdown">
    <button type="button" class="btn btn-danger"><i class="fa function-save fa-lg"></i> Save</button>
    <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item text-success" href="#"><i class="fa function-save fa-lg"></i> Save &amp; Run</a>
    <a class="dropdown-item text-success" href="#"><i class="fa function-cancel fa-lg"></i> Discard changes</a>
  </div>
</div>

Disabled

<div class="btn-group dropdown">
    <button type="button" class="btn btn-primary disabled"><i class="fa function-save fa-lg"></i> Save</button>
    <button type="button" class="btn btn-primary disabled dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item text-success" href="#"><i class="fa function-save fa-lg"></i> Save &amp; Run</a>
    <a class="dropdown-item text-success" href="#"><i class="fa function-cancel fa-lg"></i> Discard changes</a>
  </div>
</div>

<div class="btn-group dropdown">
    <button type="button" class="btn btn-outline-primary disabled"><i class="fa function-save fa-lg"></i> Save</button>
    <button type="button" class="btn btn-outline-primary disabled dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item text-success" href="#"><i class="fa function-save fa-lg"></i> Save &amp; Run</a>
    <a class="dropdown-item text-success" href="#"><i class="fa function-cancel fa-lg"></i> Discard changes</a>
  </div>
</div>

<div class="btn-group dropdown disabled">
    <button type="button" class="btn btn-danger disabled"><i class="fa function-save fa-lg"></i> Save</button>
    <button type="button" class="btn btn-danger disabled dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item text-success" href="#"><i class="fa function-save fa-lg"></i> Save &amp; Run</a>
    <a class="dropdown-item text-success" href="#"><i class="fa function-cancel fa-lg"></i> Discard changes</a>
  </div>
</div>

Table item dropdown menu

Name	Contact
Company123	Joe Bloggs 0871212121	View Details Edit Delete
Company123	Joe Bloggs 0871212121	View Details Edit Delete
Company123	Joe Bloggs 0871212121	View Details Edit Delete
Company123	Joe Bloggs 0871212121	View Details Edit Delete
Company123	Joe Bloggs 0871212121	View Details Edit Delete

<table class="table">
  <thead class="thead">
      <tr>
          <th scope="col" class="d-table-cell">
              <span>Name</span>
          </th>
          <th scope="col" class="d-table-cell">
              <span>Contact</span>
          </th>
          <th scope="col" class="d-table-cell">
              <span></span>
          </th>
      </tr>
  </thead>
  <tbody>

    <tr>
        <td class="d-table-cell">
            <span class="text-primary"><a href="#">Company123</a></span>
        </td>
        <td class="d-table-cell  py-0">
            <span class="text-primary">Joe Bloggs</span><br />
            <span class="text-muted">0871212121</span>
        </td>
        <td class="d-table-cell align-end text-end">
            <div class="btn-group">
              <a href="" placement="bottom-end" data-bs-toggle="dropdown" 
                  data-bs-display="static" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-lg planet-ds-icon-ellipsis-vertical"></i>
              </a>
              <div class="dropdown-menu dropdown-menu-lg-end">
                <a class="dropdown-item text-primary"><i class="fa function-preview"></i> View Details </a>
                <a class="dropdown-item text-primary"><i class="fa function-edit"></i> Edit </a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item text-danger"><i class="fa function-delete"></i> Delete </a>
              </div>
            </div>
        </td>
    </tr>
    <tr>
        <td class="d-table-cell">
            <span class="text-primary"><a href="#">Company123</a></span>
        </td>
        <td class="d-table-cell  py-0">
            <span class="text-primary">Joe Bloggs</span><br />
            <span class="text-muted">0871212121</span>
        </td>
        <td class="d-table-cell align-end text-end">
            <div class="btn-group">
              <a href="" placement="bottom-end" data-bs-toggle="dropdown" 
                  data-bs-display="static" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-lg planet-ds-icon-ellipsis-vertical"></i>
              </a>
              <div class="dropdown-menu dropdown-menu-lg-end">
                <a class="dropdown-item text-primary"><i class="fa function-preview"></i> View Details </a>
                <a class="dropdown-item text-primary"><i class="fa function-edit"></i> Edit </a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item text-danger"><i class="fa function-delete"></i> Delete </a>
              </div>
            </div>
        </td>
    </tr>
    <tr>
        <td class="d-table-cell">
            <span class="text-primary"><a href="#">Company123</a></span>
        </td>
        <td class="d-table-cell  py-0">
            <span class="text-primary">Joe Bloggs</span><br />
            <span class="text-muted">0871212121</span>
        </td>
        <td class="d-table-cell align-end text-end">
            <div class="btn-group">
              <a href="" placement="bottom-end" data-bs-toggle="dropdown" 
                  data-bs-display="static" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-lg planet-ds-icon-ellipsis-vertical"></i>
              </a>
              <div class="dropdown-menu dropdown-menu-lg-end">
                <a class="dropdown-item text-primary"><i class="fa function-preview"></i> View Details </a>
                <a class="dropdown-item text-primary"><i class="fa function-edit"></i> Edit </a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item text-danger"><i class="fa function-delete"></i> Delete </a>
              </div>
            </div>
        </td>
    </tr>
    <tr>
        <td class="d-table-cell">
            <span class="text-primary"><a href="#">Company123</a></span>
        </td>
        <td class="d-table-cell  py-0">
            <span class="text-primary">Joe Bloggs</span><br />
            <span class="text-muted">0871212121</span>
        </td>
        <td class="d-table-cell align-end text-end">
            <div class="btn-group">
              <a href="" placement="bottom-end" data-bs-toggle="dropdown" 
                  data-bs-display="static" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-lg planet-ds-icon-ellipsis-vertical"></i>
              </a>
              <div class="dropdown-menu dropdown-menu-lg-end">
                <a class="dropdown-item text-primary"><i class="fa function-preview"></i> View Details </a>
                <a class="dropdown-item text-primary"><i class="fa function-edit"></i> Edit </a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item text-danger"><i class="fa function-delete"></i> Delete </a>
              </div>
            </div>
        </td>
    </tr>
    <tr>
        <td class="d-table-cell">
            <span class="text-primary"><a href="#">Company123</a></span>
        </td>
        <td class="d-table-cell  py-0">
            <span class="text-primary">Joe Bloggs</span><br />
            <span class="text-muted">0871212121</span>
        </td>
        <td class="d-table-cell align-end text-end">
            <div class="btn-group">
              <a href="" placement="bottom-end" data-bs-toggle="dropdown" 
                  data-bs-display="static" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-lg planet-ds-icon-ellipsis-vertical"></i>
              </a>
              <div class="dropdown-menu dropdown-menu-lg-end">
                <a class="dropdown-item text-primary"><i class="fa function-preview"></i> View Details </a>
                <a class="dropdown-item text-primary"><i class="fa function-edit"></i> Edit </a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item text-danger"><i class="fa function-delete"></i> Delete </a>
              </div>
            </div>
        </td>
    </tr>
  </tbody>
</table>