Dropdowns

<!-- Basic dropdown -->
<div class="dropdown-menu">
  <a href="#" class="dropdown-item">Regular link</a>
  <a href="#" class="dropdown-item">Another regular link</a>
  <a href="#" class="dropdown-item active">Active link</a>
  <a href="#" class="dropdown-item disabled">Disabled link</a>
</div>

<!-- Dropdown with header and divider -->
<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a href="#" class="dropdown-item">Action</a>
  <a href="#" class="dropdown-item">Another action</a>
  <div class="dropdown-divider"></div>
  <a href="#" class="dropdown-item">Separeted link</a>
</div>

<!-- Dropdown with icons and badges -->
<div class="dropdown-menu">
  <a href="#" class="dropdown-item">
    <i class="ai-home me-2"></i>
    Regular link
    <span class="badge bg-secondary ms-2">2</span>
  </a>
  <a href="#" class="dropdown-item">
    <i class="ai-user me-2"></i>
    Profile
    <span class="badge bg-danger ms-2">3</span>
  </a>
  <a href="#" class="dropdown-item">
    <i class="ai-messages me-2"></i>
    Messages
    <span class="badge bg-success ms-2">5</span>
  </a>
  <a href="#" class="dropdown-item">
    <i class="ai-settings me-2"></i>
    Settings
  </a>
</div>

<!-- Basic dark dropdown -->
<div class="dropdown-menu dropdown-menu-dark">
  <a href="#" class="dropdown-item">Regular link</a>
  <a href="#" class="dropdown-item">Another regular link</a>
  <a href="#" class="dropdown-item active">Active link</a>
  <a href="#" class="dropdown-item disabled">Disabled link</a>
</div>

<!-- Dark dropdown with header and divider -->
<div class="dropdown-menu dropdown-menu-dark">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a href="#" class="dropdown-item">Action</a>
  <a href="#" class="dropdown-item">Another action</a>
  <div class="dropdown-divider"></div>
  <a href="#" class="dropdown-item">Separeted link</a>
</div>

<!-- Dark dropdown with icons and badges -->
<div class="dropdown-menu dropdown-menu-dark">
  <a href="#" class="dropdown-item">
    <i class="ai-home me-2"></i>
    Regular link
    <span class="badge bg-secondary ms-2">2</span>
  </a>
  <a href="#" class="dropdown-item">
    <i class="ai-user me-2"></i>
    Profile
    <span class="badge bg-danger ms-2">3</span>
  </a>
  <a href="#" class="dropdown-item">
    <i class="ai-messages me-2"></i>
    Messages
    <span class="badge bg-success ms-2">5</span>
  </a>
  <a href="#" class="dropdown-item">
    <i class="ai-settings me-2"></i>
    Settings
  </a>
</div>

<!-- Forms inside dropdown -->
<div class="dropdown-menu" style="width: 19rem;">
  <form class="p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail" placeholder="email@example.com" required>
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword" placeholder="Password" required>
    </div>
    <div class="mb-3">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="dropdownCheck">
        <label for="dropdownCheck" class="custom-control-label">Remember me</label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign In</button>
  </form>
</div>

<!-- Dropdown -->
<div class="btn-group dropdown">
  <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu my-1">
    <a href="#" class="dropdown-item">Action</a>
    <a href="#" class="dropdown-item">Another action</a>
    <div class="dropdown-divider"></div>
    <a href="#" class="dropdown-item">Something else here</a>
  </div>
</div>

<!-- Dropup -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu my-1">
    <a href="#" class="dropdown-item">Action</a>
    <a href="#" class="dropdown-item">Another action</a>
    <div class="dropdown-divider"></div>
    <a href="#" class="dropdown-item">Something else here</a>
  </div>
</div>

<!-- Dropend -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropend
  </button>
  <div class="dropdown-menu mx-1">
    <a href="#" class="dropdown-item">Action</a>
    <a href="#" class="dropdown-item">Another action</a>
    <div class="dropdown-divider"></div>
    <a href="#" class="dropdown-item">Something else here</a>
  </div>
</div>

<!-- Dropstart -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropstart
  </button>
  <div class="dropdown-menu mx-1">
    <a href="#" class="dropdown-item">Action</a>
    <a href="#" class="dropdown-item">Another action</a>
    <div class="dropdown-divider"></div>
    <a href="#" class="dropdown-item">Something else here</a>
  </div>
</div>

<!-- Right-aligned dropdown -->
<div class="btn-group dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu example
  </button>
  <div class="dropdown-menu dropdown-menu-end my-1">
    <a href="#" class="dropdown-item">Action</a>
    <a href="#" class="dropdown-item">Another action</a>
    <div class="dropdown-divider"></div>
    <a href="#" class="dropdown-item">Something else here</a>
  </div>
</div>

<!-- Solid split button -->
<div class="btn-group">
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="visually-hidden">Toggle dropdown</span>
  </button>
  <div class="dropdown-menu my-1">
    ...
  </div>
</div>

<!-- Outline split button -->
<div class="btn-group">
  <button type="button" class="btn btn-outline-primary">Button</button>
  <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="visually-hidden">Toggle dropdown</span>
  </button>
  <div class="dropdown-menu my-1">
    ...
  </div>
</div>