Bootstrap Dropdowns

devika varshney
Last Updated: May 13, 2022

 

Introduction

Bootstrap dropdowns menus are considered togglable(when clicked, not hover), displaying links in a list format and from which users can choose an item. For developing bootstrap dropdowns, we use class .dropdown. Alternatively, they can be made interactive with the bootstrap JavaScript plugin. We use Poper.js to create dropdowns that provide dynamic positioning and viewport detection; we include  bootstrap.bundle.min.js / bootstrap.bundle.js before js. We can also have form controls like login form and search engines inside dropdown menus. Moreover, we can go through the items through the keyboard too.

Basic example with explanation

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

 

Here .dropdown class has wrapped the dropdown toggles and menus. we have used .dropdown-toggle to open and close dropdown menu, .dropdown-menu and .dropdown-item for containing dropdown items. Furthermore, for building it we use <ul> and <li> elements and can be triggered from <a> and <button> tag. Using the class .caret to create caret arrow icon.

Output 

Types of dropdown buttons

  • Regular Button

With simple markup, any single .btn can be transformed into a dropdown toggle. It is also known as a single button.

  • Split Button

Using the .dropdown-toggle-split class, we can split dropdown text and caret with proper spacing, and it is used to reduce horizontal padding by 25% around the caret arrow icon and keep the caret centered.

  • Link Button

These buttons are the same as regular buttons except that they use <a> tag instead of <button> tag for caret.

Sizing

Different sizes are possible for bootstrap dropdowns buttons, including split and default bootstrap dropdowns buttons. This includes a large button, large spit button, small button, and small split button.
Colors

Button variants are available for bootstrap dropdowns. foe example we use .btn-primary , .btn-secondary, .btn-sucess, .btn-danger for blue, grey,green and red color buttons and more.

<!-- Primary -->
<div class="btn-group" style="margin-top:100px; margin-left:100px">
  <button
    type="button"
    class="btn btn-primary dropdown-toggle"
    data-mdb-toggle="dropdown"
    aria-expanded="false"
  >
    Primary
  </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>
    <li>
      <hr class="dropdown-divider" />
    </li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>


<!-- Secondary -->
<div class="btn-group" style="margin-top:100px">
  <button
    type="button"
    class="btn btn-secondary dropdown-toggle"
    data-mdb-toggle="dropdown"
    aria-expanded="false"
  >
    Secondary
  </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>
    <li>
      <hr class="dropdown-divider" />
    </li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>


<!-- Success -->
<div class="btn-group" style="margin-top:100px">
  <button
    type="button"
    class="btn btn-success dropdown-toggle"
    data-mdb-toggle="dropdown"
    aria-expanded="false"
  >
    Success
  </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>
    <li>
      <hr class="dropdown-divider" />
    </li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>



<!-- Danger -->
<div class="btn-group" style="margin-top:100px">
  <button
    type="button"
    class="btn btn-danger dropdown-toggle"
    data-mdb-toggle="dropdown"
    aria-expanded="false"
  >
    Danger
  </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>
    <li>
      <hr class="dropdown-divider" />
    </li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>


Output

State of dropdown items

  • Active 

The .active class is used for dropdown items to style them as active.

<div class="dropdown" style="margin:100px">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item active" 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>


Output

  • Disable 

.disabled class is used to style bootstrap dropdowns items as disabled, which means the user can not select that particular item from the list.

<div class="dropdown" style="margin:100px">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Active</a></li>
    <li><a class="dropdown-item disabled" href="#">Disabled</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>


Output

Menu alignment

A dropdown menu is 100% positioned from the top automatically by default, and to align it towards the right side, we use class .dropdown-menu-right to a .dropdown-menu or by adding .pull-right to .dropdown-menu.

Now let's look at Responsive alignment. We add the data-mdb-display="static" attribute and use responsive variation classes to disable dynamic positioning and make it responsive. add .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end to right align the dropdown menu and .dropdown-menu-end and .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start to left align the dropdown menu with the given breakpoint or larger.

Directions

  • Dropup

Change the class of the <div> parent element if you want the dropdown menu to expand upwards from .dropdown to .dropup.

<!-- Default dropup button -->
<div class="btn-group dropup" style="margin:100px">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
     <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>


<!-- Split dropup button -->
<div class="btn-group dropup"  style="margin:100px">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
     <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>


Output

  • Dropright

Change the class of the <div> parent element if you want bootstrap dropdowns menu to expand towards right from .dropdown to .dropend or .dropright.

<!-- Default dropright button -->
<div class="btn-group dropright" style="margin:100px">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
       <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>


<!-- Split dropright button -->
<div class="btn-group dropright" style="margin:100px">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>


Output

  • Dropleft

Change the class of the <div> parent element if you want dropdown menu to expand towards left from .dropdown to .dropstart or .dropleft.


<!-- Default dropleft button -->
<div class="btn-group dropleft" style="margin:100px">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
   <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>


<!-- Split dropleft button -->
<div class="btn-group" style="margin:100px">
  <div class="btn-group dropleft" role="group" >
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
     <a class="dropdown-item" href="#">Another action</a>
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>


 Output

Menu content

  • Header

We can label sections of actions in any dropdown menu by adding the header by using class dropdown-header.

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> Topics <span class="caret"></span>
    </button>
    <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>
    </ul>
</div>


Output

  • Text

By using spacing utilities and text, we can place freeform text within dropdown menus, and to constrain menu width; we can ass sizing styles.

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> Topics <span class="caret"></span>
    </button>
    <div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
        <p> Some example text that's free-flowing within the dropdown menu. </p>
        <p class="mb-0"> And this is more example text. </p>
    </div>
</div>


Output

  • Divider

Related menu items can be separated using dividers in bootstrap dropdowns.

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> Topics <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>


Output

  • Forms

Furthermore, there is also a facility to add forms within the dropdown menu and give required negative space, and we use margin or padding utilities.

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> Topics <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
        <form class="px-4 py-3">
            <div class="form-group">
                <label for="exampleDropdownFormEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
            </div>
            <div class="form-group">
                <label for="exampleDropdownFormPassword1">Password</label>
                <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
            </div>
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="dropdownCheck">
                <label class="form-check-label" for="dropdownCheck"> Remember me </label>
            </div>
            <button type="submit" class="btn btn-primary">Sign in</button>
        </form>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">New around here? Sign up</a>
        <a class="dropdown-item" href="#">Forgot password?</a>
    </div>
</div>


Output

Frequently Asked Questions

  1. How can we remove animations from bootstrap dropdowns?
    With dropdown button add data-mdb-dropdown-animation="off" attribute to remove fade animation on click.
     
  2. How to make the dropdown menu in the dark theme?
    By adding .dropdown-menu-dark onto existing .dropdown-menu to add dark variant and match dark navbar.

Key Takeaways

In this blog, we enlisted the bootstrap dropdowns, their different buttons, their stylizing with different colors and sizes, and the state of dropdown items.

Don't come to a halt here. Check out our Importance of JavaScript to web programming. You can also check out the blog on the JavaScript Interview Questions. Check out some JavaScript certifications by clicking on Javascript certifications.

Was this article helpful ?
1 upvote

Comments

No comments yet

Be the first to share what you think