Cartzilla Docs | Dropdowns

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>