Bootstrap 5 — Dropdown

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to manipulate dropdowns with JavaScript and add content with Bootstrap 5.

Text

We can add any text to a dropdown menu.

For instance, we can write:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-display="static">  
    button  
  </button>  
  <div class="dropdown-menu p-4 text-muted">  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non libero congue lectus pharetra dictum quis ut eros. Nunc ac eleifend risus. In vitae arcu tincidunt, eleifend velit id, cursus nibh. Vestibulum hendrerit urna dictum, vulputate quam et, faucibus sapien. Suspendisse in mauris non diam facilisis aliquet eget ac nisi. Donec nec elit vel ex pellentesque pellentesque. Sed commodo tellus at enim vulputate ornare. Pellentesque vel elit ut libero hendrerit dictum a in dolor. Suspendisse cursus justo nulla, ac malesuada orci pretium quis. Sed sed nunc in lacus hendrerit consequat.  
  </div>  
</div>

to add text with some padding into our dropdown menu.

Forms

Forms can also be put inside the menu.

For example, we can write:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-display="static">  
    button  
  </button>  
  <div class="dropdown-menu p-1 text-muted">  
    <form class="px-4 py-3">  
      <div class="mb-3">  
        <label for="email" class="form-label">Email</label>  
        <input type="email" class="form-control" id="email" placeholder="email">  
      </div>  
      <div class="mb-3">  
        <label for="password" class="form-label">Password</label>  
        <input type="password" class="form-control" id="password" placeholder="Password">  
      </div>  
      <div class="mb-3">  
        <div class="form-check">  
          <input type="checkbox" class="form-check-input" id="check">  
          <label class="form-check-label" for="check">  
            Remember me  
          </label>  
        </div>  
      </div>  
      <button type="submit" class="btn btn-primary">Sign in</button>  
    </form>  
  </div>  
</div>

to add a form in the menu.

We just put the form straight into the dropdown menu container.

Dropdown Options

We can change the location of the dropdown with the data-offset attribute.

For example, we can write:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-offset="10,20">  
    button  
  </button>  
  <ul class="dropdown-menu dropdown-menu-lg-left">  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>        
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

to move the menu farther away from the toggle button.

The numbers are the x and y distance in pixels we want to move the menu by.

We can use the data-reference attribute to change it to the parent:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-reference="parent">  
    button  
  </button>  
  <ul class="dropdown-menu dropdown-menu-lg-left">  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>        
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

JavaScript

We can call a dropdown via JavaScript.

For instance, given the following dropdown:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">  
    button  
  </button>  
  <ul class="dropdown-menu dropdown-menu-lg-left">  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>        
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

We can show the menu by writing:

const dropdownToggleEl = document.querySelector('.dropdown-toggle')  
const dropdownList = new bootstrap.Dropdown(dropdownToggleEl);  
dropdownList.show();

We get the dropdown by the toggle by selecting the element with the .dropdown-toggle class.

Then we pass that to the bootstrap.Dropdown constructor.

Then we call show on the returned object to open the menu.

Other methods include toggle to toggle the menu.

hide to hide the menu.

update updates the position of the dropdown.

dispose destroys the dropdown.

getInstance gets the dropdown instance.

Events

The dropdown element also emits a few events.

It emits the show.bs.dropdown event when the dropdown is showing.

shown.bs.dropdown is emitted when it’s shown.

hide.bs.dropdown is emitted when it’s hiding.

hidden.bs.dropdown is emitted when it’s hidden.

We can listen to it with the addEventListener method:

const myDropdown = document.getElementById('myDropdown')  
myDropdown.addEventListener('show.bs.dropdown', () => {  
  // do something...  
})

Conclusion

We can add forms and text into a dropdown menu.

Also, we can listen to the events it emits and manipulates it with JavaScript.