Bootstrap 5 Dropdown

Bootstrap 5 dropdown menu is used to display the predefined links in a list format and it allows the user to select one value from the predefined list.

Steps to create dropdown:

Assign the .dropdown class to the dropdown container's base class.
Place the <button> inside the dropdown container and assign the .dropdown-toggle class & data attribute data-bs-toggle="dropdown" to the <button> element.
Place unordered list inside the dropdown container and assign the .dropdown-menu class.
Add .dropdown-item class to the unordered list item's <li> base class.

Bootstrap 5 Basic Dropdown Menu

General Syntax

      <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button"  data-bs-toggle="dropdown" >Dropdown button</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Dropdown item</a></li> 
  </ul>
</div>

Try it now

Source Code

          <div class="container my-5">
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown button</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>
    </ul>
  </div>
</div>

Try it now

Source Code : Output

Code Explanation

Please keep in mind that , assign .dropdown-menu class to the dropdown container and assign .dropdown-item class to every dropdown item base class.

Dropdown Menu Using Hyperlink

Steps to create dropdown menu using hyperlink:

Assign .dropdown to the dropdown container.
Place <a> inside dropdown container and assign .dropdown-toggle, data attribute data-bs-toggle="dropdown" to the <button>
Place unordered list inside dropdown container and assign .dropdown-menu
Add .dropdown-item to the unordered list item <li>

General Syntax

      <div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown link</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Dropdown Link </a></li>
  </ul>
</div>

Try it now

Source Code

          <div class="dropdown mt-5 text-center">
  <a class="btn btn-secondary dropdown-toggle" href=".."  data-bs-toggle="dropdown">Dropdown link</a>
  <ul class="dropdown-menu" >
    <li><a class="dropdown-item" href="..">Dropdown Link </a></li>
    <li><a class="dropdown-item" href="..>Dropdown Link 2</a></li>
    <li><a class="dropdown-item" href="..">Dropdown Link 3</a></li>
  </ul>
</div>

Try it now

Source Code : Output

Code Explanation

Please keep in mind that assign .dropdown-menu to the dropdown item container element base class and assign .dropdown-itemto every dropdown child item base class.

Dropdown: Active & Disabled Item

To make dropdown item active and disabled, use .active and .disbaled to the dropdown list item <a> base class.

General Syntax

      <ul class="dropdown-menu" >
<a class="btn btn-secondary dropdown-toggle" href="#" data-bs-toggle="dropdown" >Dropdown</a>
  <li>
    <a class="dropdown-item active" href="#">Active Link</a>
  </li>
  <li>
    <a class="dropdown-item disabled" href="#">Disabled Link</a>
  </li>
</ul>

Try it now

Source Code

          <div class="dropdown my-5 text-center">
  <a class="btn btn-secondary dropdown-toggle" href=".." data-bs-toggle="dropdown" >Dropdown Link</a>
  <ul class="dropdown-menu" >
    <li><a class="dropdown-item active" href="...">Active Link</a></li>
    <li><a class="dropdown-item disabled" href="..">Disabled Link</a></li>
  </ul>
</div>

Try it now

Source Code : Output

Code Explanation

To make dropdown item active and disabled assign .active & .disabled class to the dropdown child element base class correspondingly.

Dropdown Size:Small & Large

To make large dropdown button size add .btn-lg & .dropdown-toggle-split to the <button> having .dropdown-toggle while as to make small <button> add .btn-sm & .dropdown-toggle-split to the <button> having .dropdown-toggle

General Syntax

      <button type="button" 
 class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" >
  <span class="visually-hidden">Toggle Dropdown</span>
</button>

Try it now

Source Code

          <div class="btn-group text-center my-5">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Large button
  </button>
  <ul class="dropdown-menu">
    <a class="dropdown-item" href="..">Link 1</a>
    <a class="dropdown-item" href="..">Link 2</a>
  </ul>
</div>

Try it now

Source Code : Output

Code Explanation

To make a large button assign .btn-lg class to the <button> element base class while to make small button assign .btn-sm class to the <button > element base class.

Dark dropdowns

To make a dark dropdown, add .dropdown-menu-dark class to the dropdown item's container having .dropdown-menu class.

General Syntax

      <ul class="dropdown-menu dropdown-menu-dark" ></ul>

Try it now

Source Code

          <div class="dropdown m-5">
  <button class="btn btn-secondary dropdown-toggle" type="button"  data-bs-toggle="dropdown" >Dropdown button</button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <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>
    <li><hr class="dropdown-divider" /></li>
    <li><a class="dropdown-item" href="..">Separated link</a></li>
  </ul>
</div>

Try it now

Source Code : Output

Code Explanation

Please keep in mind that, you have to assign the .dropdown-menu-dark class to the element having .dropdown-menu class.

Navbar With Dropdown

Use navbar and dropdown concept to make a navbar with the dropdown feature.

Source Code

          <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="..">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href=".." id="navbarDarkDropdownMenuLink" data-bs-toggle="dropdown">Dropdown</a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <li><a class="dropdown-item" href="..">Action</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Try it now

Source Code : Output

Dropdown: Divider

The .dropdown-divider class is used inside dropdown menu list to separate the dropdown item with a horizontal border.

General Syntax

      <div class="dropdown-menu">
  <a class="dropdown-item" href="#">Link 1</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Try it now

Source Code

          <div class="container my-5 text-center">
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropdown button</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="..">Link 1</a>
      <a class="dropdown-item" href="..">Link 2</a>
      <a class="dropdown-item" href="..">Link 3</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="...">Another link</a>
    </div>
  </div>
</div>

Try it now

Source Code : Output

Code Explanation

To create dropdown divider inside dropdown menu, assign the .dropdown-divider class to the <div> element's base class.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Bootstrap 5 Dropdown

Bootstrap 5 Basic Dropdown Menu

Dropdown Menu Using Hyperlink

Dropdown: Active & Disabled Item

Dropdown Size:Small & Large

Dark dropdowns

Navbar With Dropdown

Dropdown: Divider

Related Tutorial

Online Test / Quiz

Web Tutorials