Dropdowns

Toggle contextual overlays for displaying lists of links and more with the aConic dropdown plugin.

Bootstrap Dropdowns documentation

Single button

Any single .btn can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <button> elements:

                                          
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
          Dropdown button
        </button>
        <div class="dropdown-menu mt-2 p-2" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item py-2 rounded-2" href="#">Action</a>
          <a class="dropdown-item py-2 rounded-2" href="#">Another action</a>
          <a class="dropdown-item py-2 rounded-2" href="#">Something else here</a>
        </div>
    </div>

And with <a> elements:

                                          
  <div class="dropdown">
      <a class="btn btn-primary dropdown-toggle" href="#" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
          Dropdown link
      </a>
      <div class="dropdown-menu mt-2 p-2" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item py-2 rounded-2" href="#">Action</a>
        <a class="dropdown-item py-2 rounded-2" href="#">Another action</a>
        <a class="dropdown-item py-2 rounded-2" href="#">Something else here</a>
      </div>
  </div>

The best part is you can do this with any button variant, too:

                                        
    <div class="btn-group">
        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        Primary
        </button>
        <div class="dropdown-menu mt-2 p-2" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item py-2 rounded-2" href="#">Action</a>
        <a class="dropdown-item py-2 rounded-2" href="#">Another action</a>
        <a class="dropdown-item py-2 rounded-2" href="#">Something else here</a>
        </div>
    </div>

    <div class="btn-group">
        <button class="btn btn-white dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        White
        </button>
        <div class="dropdown-menu mt-2 p-2" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item py-2 rounded-2" href="#">Action</a>
        <a class="dropdown-item py-2 rounded-2" href="#">Another action</a>
        <a class="dropdown-item py-2 rounded-2" href="#">Something else here</a>
        </div>
    </div>

    <div class="btn-group">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        Secondary
        </button>
        <div class="dropdown-menu mt-2 p-2" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item py-2 rounded-2" href="#">Action</a>
        <a class="dropdown-item py-2 rounded-2" href="#">Another action</a>
        <a class="dropdown-item py-2 rounded-2" href="#">Something else here</a>
        </div>
    </div>

    <div class="btn-group">
        <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        Success
        </button>
        <div class="dropdown-menu mt-2 p-2" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item py-2 rounded-2" href="#">Action</a>
        <a class="dropdown-item py-2 rounded-2" href="#">Another action</a>
        <a class="dropdown-item py-2 rounded-2" href="#">Something else here</a>
        </div>
    </div>

    <div class="btn-group">
        <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        Info
        </button>
        <div class="dropdown-menu mt-2 p-2" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item py-2 rounded-2" href="#">Action</a>
        <a class="dropdown-item py-2 rounded-2" href="#">Another action</a>
        <a class="dropdown-item py-2 rounded-2" href="#">Something else here</a>
        </div>
    </div>

    <div class="btn-group">
        <button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        Warning
        </button>
        <div class="dropdown-menu mt-2 p-2" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item py-2 rounded-2" href="#">Action</a>
        <a class="dropdown-item py-2 rounded-2" href="#">Another action</a>
        <a class="dropdown-item py-2 rounded-2" href="#">Something else here</a>
        </div>
    </div>

    <div class="btn-group">
        <button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        Danger
        </button>
        <div class="dropdown-menu mt-2 p-2" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item py-2 rounded-2" href="#">Action</a>
        <a class="dropdown-item py-2 rounded-2" href="#">Another action</a>
        <a class="dropdown-item py-2 rounded-2" href="#">Something else here</a>
        </div>
    </div>

    <div class="btn-group">
        <button class="btn btn-dark dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        Dark
        </button>
        <div class="dropdown-menu mt-2 p-2" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item py-2 rounded-2" href="#">Action</a>
        <a class="dropdown-item py-2 rounded-2" href="#">Another action</a>
        <a class="dropdown-item py-2 rounded-2" href="#">Something else here</a>
        </div>
    </div>

    <div class="btn-group">
        <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        Light
        </button>
        <div class="dropdown-menu mt-2 p-2" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item py-2 rounded-2" href="#">Action</a>
        <a class="dropdown-item py-2 rounded-2" href="#">Another action</a>
        <a class="dropdown-item py-2 rounded-2" href="#">Something else here</a>
        </div>
    </div>

Sizing

Button dropdowns work with buttons of all sizes.

                                            
    <div class="btn-group">
        <button class="btn btn-lg btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonLg" data-bs-toggle="dropdown" aria-expanded="false">
          Large button
        </button>
        <div class="dropdown-menu p-2 mt-1" aria-labelledby="dropdownMenuButtonLg">
          <a class="dropdown-item py-2 rounded-2" href="#">Action</a>
          <a class="dropdown-item py-2 rounded-2" href="#">Another action</a>
          <a class="dropdown-item py-2 rounded-2" href="#">Something else here</a>
        </div>
    </div>
      
    <div class="btn-group">
        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonDefault" data-bs-toggle="dropdown" aria-expanded="false">
            Default button
        </button>
        <div class="dropdown-menu p-2 mt-1" aria-labelledby="dropdownMenuButtonLg">
            <a class="dropdown-item py-2 rounded-2" href="#">Action</a>
            <a class="dropdown-item py-2 rounded-2" href="#">Another action</a>
            <a class="dropdown-item py-2 rounded-2" href="#">Something else here</a>
        </div>
    </div>
      
    <div class="btn-group">
        <button class="btn btn-sm btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonSm" data-bs-toggle="dropdown" aria-expanded="false">
          Small button
        </button>
        <div class="dropdown-menu p-2 mt-1" aria-labelledby="dropdownMenuButtonLg">
          <a class="dropdown-item py-2 rounded-2" href="#">Action</a>
          <a class="dropdown-item py-2 rounded-2" href="#">Another action</a>
          <a class="dropdown-item py-2 rounded-2" href="#">Something else here</a>
        </div>
    </div>

With icon

Use .dropdown-item-icon for icons.

                                            
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonWithIcon" data-bs-toggle="dropdown" aria-expanded="false">
          With icon
        </button>
        <div class="dropdown-menu mt-1 p-2" aria-labelledby="dropdownMenuButtonWithIcon">
          <a class="dropdown-item py-2 rounded-2" href="#">
            <i class="bi-house dropdown-item-icon me-2"></i> Dashboard
          </a>
          <a class="dropdown-item py-2 rounded-2" href="#">
            <i class="bi-person dropdown-item-icon me-2"></i> Profile
          </a>
          <a class="dropdown-item py-2 rounded-2" href="#">
            <i class="bi-bell dropdown-item-icon me-2"></i> Settings
          </a>
        </div>
    </div>

Dropup

Trigger dropdown menus above elements by adding .dropup to the parent element.

                                            
    <div class="btn-group dropup">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Dropup
        </button>
        <div class="dropdown-menu p-2 mb-1">
          <a class="dropdown-item py-2 rounded-2" href="#">Action</a>
          <a class="dropdown-item py-2 rounded-2" href="#">Another action</a>
          <a class="dropdown-item py-2 rounded-2" href="#">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item py-2 rounded-2" href="#">Separated link</a>
        </div>
    </div>

    <div class="btn-group dropup">
        <button type="button" class="btn btn-primary">
          Split dropup
        </button>
        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu p-2 mb-1">
          <a class="dropdown-item py-2 rounded-2" href="#">Action</a>
          <a class="dropdown-item py-2 rounded-2" href="#">Another action</a>
          <a class="dropdown-item py-2 rounded-2" href="#">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item py-2 rounded-2" href="#">Separated link</a>
        </div>
    </div>

Collapse

List Group