Bootstrap5 Dropdown Menu

Dropdown menus are toggleable, context menus that display links in a list format.

Example

<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>
</div>

Example Analysis

The .dropdown class is used to specify a dropdown menu.

We can use a button or a link to open the dropdown menu. The button or link needs to have the .dropdown-toggle and data-toggle="dropdown" attributes.

Add the .dropdown-menu class to the <div> element to set up the actual dropdown menu, and then add the .dropdown-item class to the dropdown menu options.

Divider in Dropdown Menu

The .dropdown-divider class is used to create a horizontal divider in the dropdown menu:

Example

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

Header in Dropdown Menu

The .dropdown-header class is used to add a header in the dropdown menu:

Example

<li><h5 class="dropdown-header">Header 1</h5></li>

Active and Disabled Items in Dropdown Menu

The .active class will highlight the dropdown menu option (add a blue background).

To disable a dropdown menu option, use the .disabled class.

Example

<a class="dropdown-item" href="#">Regular Item</a>
<a class="dropdown-item active" href="#">Active Item</a>
<a class="dropdown-item disabled" href="#">Disabled Item</a>

Dropdown Menu Alignment

If we want the dropdown menu to be right-aligned, we can add the .dropend or .dropstart class after the .dropdown class on the element.

.dropend is right-aligned, and .dropstart is left-aligned.

Example

<!-- Right-aligned -->
<div class="dropdown dropend">
...
</div>

<!-- Left-aligned -->
<div class="dropdown dropstart">
...
</div>

Dropdown Menu Popup Direction Settings

The default popup direction for dropdown menus is downwards, but we can also set different directions.

Right-popping Dropdown Menu

If you want the dropdown menu to pop out to the bottom right, you can add the .dropdown-menu-end class to the div element:

Example

<!-- Bottom right dropdown menu button -->
<div class="dropdown dropdown-menu-end">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
  Dropdown Menu Bottom Right Popup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link 1</a></li>
    <li><a class="dropdown-item" href="#">Link 2</a></li>
    <li><a class="dropdown-item" href="#">Link 3</a></li>
  </ul>
</div>

Upward-popping Dropup Menu

If you want the dropup menu to pop up, you can add the "dropup" class to the div element:

Example

<!-- Upward menu -->
<div class="dropup">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Dropup Menu
  </button>
  <ul class="dropdown-menu">

<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</div>

Dropdown Menu Popping to the Left

If you want the dropdown menu to pop out to the left, you can add the dropstart class to the div element:

Example

<!-- Dropdown menu on the left -->
<div class="dropstart">
  Add some content to test the popping effect to the left. <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
  Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link 1</a></li>
    <li><a class="dropdown-item" href="#">Link 2</a></li>
    <li><a class="dropdown-item" href="#">Link 3</a></li>
  </ul>
</div>

Setting Text in Dropdown Menu

The .dropdown-item-text class can be used to set text items in the dropdown menu:

Example

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Link 1</a></li>
  <li><a class="dropdown-item" href="#">Link 2</a></li>
  <li><a class="dropdown-item" href="#">Link 3</a></li>
  <li><a class="dropdown-item-text" href="#">Text Link</a></li>
  <li><span class="dropdown-item-text">Just Text</span></li>
</ul>

Dropdown Menu in Button Group

We can add a dropdown menu within a button:

Example

<div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Tablet</a></li>
        <li><a class="dropdown-item" href="#">Smartphone</a></li>
      </ul>
    </div>
</div>

Vertical button group with dropdown menu:

Example

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Tablet</a></li>
      <li><a class="dropdown-item" href="#">Smartphone</a></li>
    </ul>
  </div>
</div>

Navigation Bar Example

``` Example