Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# Dropdowns

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

Bootstrap docs

## Static examples

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

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

    <!-- Dropdown with icons and badges -->
    <div class="dropdown-menu">
      <a class="dropdown-item d-flex align-items-center" href="#">
        <i class="bx bx-home-alt opacity-70 me-2"></i>
        Home
        <span class="badge rounded-pill bg-secondary ms-2">2</span>
      </a>
      <a class="dropdown-item d-flex align-items-center" href="#">
        <i class="bx bx-user opacity-70 me-2"></i>
        Profile
        <span class="badge rounded-pill bg-danger ms-2">3</span>
      </a>
      <a class="dropdown-item d-flex align-items-center" href="#">
        <i class="bx bx-message opacity-70 me-2"></i>
        Messages
        <span class="badge rounded-pill bg-success ms-2">5</span>
      </a>
      <a class="dropdown-item d-flex align-items-center" href="#">
        <i class="bx bx-cog opacity-70 me-2"></i>
        Settings
        <span class="badge rounded-pill bg-warning ms-2">1</span>
      </a>
    </div>

## Dark dropdowns

    <!-- Basic dark dropdown -->
    <div class="dropdown-menu dropdown-menu-dark">
      <a class="dropdown-item" href="#">Regular link</a>
      <a class="dropdown-item" href="#">Another regular link</a>
      <a class="dropdown-item active" href="#">Active link</a>
      <a class="dropdown-item disabled" href="#">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 class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <hr class="dropdown-divider">
      <a class="dropdown-item" href="#">Separated link</a>
    </div>

    <!-- Dark dropdown with icons and badges -->
    <div class="dropdown-menu dropdown-menu-dark">
      <a class="dropdown-item d-flex align-items-center" href="#">
        <i class="bx bx-home-alt opacity-70 me-2"></i>
        Home
        <span class="badge rounded-pill bg-secondary ms-2">2</span>
      </a>
      <a class="dropdown-item d-flex align-items-center" href="#">
        <i class="bx bx-user opacity-70 me-2"></i>
        Profile
        <span class="badge rounded-pill bg-danger ms-2">3</span>
      </a>
      <a class="dropdown-item d-flex align-items-center" href="#">
        <i class="bx bx-message opacity-70 me-2"></i>
        Messages
        <span class="badge rounded-pill bg-success ms-2">5</span>
      </a>
      <a class="dropdown-item d-flex align-items-center" href="#">
        <i class="bx bx-cog opacity-70 me-2"></i>
        Settings
        <span class="badge rounded-pill bg-warning ms-2">1</span>
      </a>
    </div>

## Forms inside dropdown

    <!-- Forms inside dropdown -->
    <div class="dropdown-menu" style="width: 20rem;">
      <form class="p-4">
        <div class="mb-4">
          <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-4">
          <label for="exampleDropdownFormPassword" class="form-label">Password</label>
          <input type="password" class="form-control" id="exampleDropdownFormPassword" placeholder="Password" required>
        </div>
        <div class="mb-4">
          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="dropdownCheck">
            <label for="dropdownCheck" class="form-check-label">Remember me</label>
          </div>
        </div>
        <button type="submit" class="btn btn-primary">Sign In</button>
      </form>
    </div>

## Directions

    <!-- 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>
        <hr class="dropdown-divider">
        <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>
        <hr class="dropdown-divider">
        <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>
        <hr class="dropdown-divider">
        <a href="#" class="dropdown-item">Something else here</a>
      </div>
    </div>

## Menu alignment

    <!-- 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>

## 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" 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>

Top