Dropdowns are components that are required to use for listing the links or any other content. The contents that are added in dropdowns can be seen only on expanding it. Bootstrap has dropdown plugins that are structured either in toggleable format or in contextual overlays to depict the list of links. These dropdowns can be converted attractive using the dropdown JavaScript program. 

 

This component of Bootstrap is accessible using various controls and you can add a menu, checkbox items, radio button icons, etc. These dropdowns can be created and designed using the above elements. 

 

Dropdowns can be wrapped inside the button, link, or toggle. You can even add it to the button and anchor tag as well. Additionally, you can align the position of dropdowns relatively using CSS. A menu can be added into the dropdown using the .dropdown-item under class. Dropdowns can be placed using methods, single button, and split button. 


 

For instance,

 

Using Single Button

<div class="dropdown">

  <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">

    Dropdown link

  </a>


  <ul class="dropdown-menu">

    <li><a class="dropdown-item" href="#">List 1</a></li>

    <li><a class="dropdown-item" href="#">List 2</a></li>

    <li><a class="dropdown-item" href="#">List 3</a></li>

  </ul>

</div>


 

Using Split Button

Split Button functionality is the same as single button functionality with a difference as it adds minor spacing clarity. 

 

For example,

<div class="btn-group">

  <button type="button" class="btn btn-danger zone">Action</button>

  <button type="button" class="btn btn-dangerzone dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">

    <span class="visually-hidden">Toggle Dropdown</span>

  </button>

  <ul class="dropdown-menu">

    <li><a class="dropdown-item" href="#">List 1</a></li>

    <li><a class="dropdown-item" href="#">List 2</a></li>

    <li><a class="dropdown-item" href="#">List 3</a></li>

    <li><hr class="dropdown-divider"></li>

    <li><a class="dropdown-item" href="#">Separated link</a></li>

  </ul>

</div>

 

Subscribe For Daily Updates