Bootstrap docs

# Dropdowns

Toggle contextual overlays for displaying lists of links or other content.

#### Static examples

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

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

    <!-- Dropdown with icons and badges -->
    <ul class="dropdown-menu">
      <li>
        <a class="dropdown-item" href="#">
          <i class="ci-home opacity-75 me-2"></i>
          Home
          <span class="badge bg-primary rounded-pill ms-auto">2</span>
        </a>
      </li>
      <li>
        <a class="dropdown-item" href="#">
          <i class="ci-user opacity-75 me-2"></i>
          Profile
          <span class="badge bg-warning rounded-pill ms-auto">3</span>
        </a>
      </li>
      <li>
        <a class="dropdown-item" href="#">
          <i class="ci-message-square opacity-75 me-2"></i>
          Messages
          <span class="badge bg-success rounded-pill ms-auto">5</span>
        </a>
      </li>
      <li>
        <a class="dropdown-item" href="#">
          <i class="ci-settings opacity-75 me-2"></i>
          Settings
        </a>
      </li>
    </ul>

#### Dark dropdowns

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

    <!-- Dark dropdown with header and divider -->
    <ul class="dropdown-menu" data-bs-theme="dark">
      <li><h6 class="dropdown-header">Dropdown header</h6></li>
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>

    <!-- Dark dropdown with icons and badges -->
    <ul class="dropdown-menu" data-bs-theme="dark">
      <li>
        <a class="dropdown-item" href="#">
          <i class="ci-home opacity-75 me-2"></i>
          Home
          <span class="badge bg-primary rounded-pill ms-auto">2</span>
        </a>
      </li>
      <li>
        <a class="dropdown-item" href="#">
          <i class="ci-user opacity-75 me-2"></i>
          Profile
          <span class="badge bg-warning rounded-pill ms-auto">3</span>
        </a>
      </li>
      <li>
        <a class="dropdown-item" href="#">
          <i class="ci-message-square opacity-75 me-2"></i>
          Messages
          <span class="badge bg-success rounded-pill ms-auto">5</span>
        </a>
      </li>
      <li>
        <a class="dropdown-item" href="#">
          <i class="ci-settings opacity-75 me-2"></i>
          Settings
        </a>
      </li>
    </ul>

#### Forms inside dropdown

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

#### Directions

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

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

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

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

#### Show on hover / focus

    <!-- Change data-bs-toggle attribute from "dropdown" to "dropdown-hover" to trigger dropdown menu on hover or focus. -->
    <div class="dropdown">
      <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-haspopup="true" aria-expanded="false">
        Hover or focus over me
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>

#### Menu alignment

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

    <!-- Center-aligned dropdown -->
    <div class="dropdown-center">
      <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Center-aligned dropdown
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>

#### Split button

    <!-- 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 position-relative z-1 border-0 border-start border-light" style="--cz-border-opacity: .25;" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="visually-hidden">Toggle dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>

    <!-- Solid 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>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>

Top