"> " />
Easy Tutorial
Bootstrap4 Cards Bootstrap4 Dropdowns Bootstrap4 Popover Bootstrap4 Button Groups Bootstrap4 Collapse Bootstrap4 Badges Bootstrap4 Tables Bootstrap4 Spinners Bootstrap4 Forms Input Group Bootstrap4 Modal Bootstrap4 Utilities Bootstrap4 Progressbars Bootstrap4 Pagination Bootstrap4 Buttons Bootstrap4 Alerts Bootstrap4 Media Objects Bootstrap4 Grid Basic Bootstrap4 Tooltip Bootstrap4 Colors Bootstrap4 Forms Inputs Bootstrap4 Tutorial Bootstrap4 Flex Bootstrap4 List Groups Bootstrap4 Carousel Bootstrap4 Scrollspy Bootstrap4 Makeawebsite Bootstrap4 Navs Bootstrap4 Typography Bootstrap4 Forms Bootstrap4 Jumbotron Bootstrap4 Install Bootstrap4 Images Bootstrap4 Forms Custom Bootstrap4 Navbar Bootstrap4 Breadcrumb
❮ Bootstrap4 Cards Bootstrap4 Popover ❯

Bootstrap4 Dropdown Menu

The Bootstrap4 dropdown menu relies on popper.min.js.

The dropdown menu is toggleable, displaying links in a contextual menu format.

Example

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-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 Explanation

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

We can use a button or 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 dropdown menu, and then add the .dropdown-item class to the dropdown menu options.

We can also use it in the <a> tag:

Example

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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>

Divider in Dropdown Menu

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

Example

<div class="dropdown-divider"></div>

Header in Dropdown Menu

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

Example

<div class="dropdown-header">Dropdown header 1</div>

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 active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>

Dropdown Menu Alignment

If we want the dropdown menu to align to the right, we can add the .dropdown-menu-right class after the .dropdown-menu class on the element.

Example

<div class="dropdown-menu dropdown-menu-right">

Dropdown Menu Popup Direction Setting

The default popup direction of the dropdown menu is downwards, but we can also set different directions.

Right-popping Dropdown Menu

If you want the dropdown menu to pop out to the right, you can add the "dropright" class to the div element:

Example

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">

<!-- Dropdown menu links -->
</div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <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">
    <!-- Dropdown menu links -->
  </div>
</div>

Specifying an Upward Popping Dropup Menu

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

Example

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <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">
    <!-- Dropdown menu links -->
  </div>
</div>

Specifying a Leftward Popping Dropleft Menu

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

Example

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <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">

<!-- Dropdown menu links -->
</div>
</div>
<button type="button" class="btn btn-secondary">
  Split dropleft
</button>
</div>

Dropdown Menu Text Settings

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

Example

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

Dropdown Menu in Buttons

We can add dropdown menus within buttons:

Example

<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Tablet</a>
    <a class="dropdown-item" href="#">Smartphone</a>
  </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-toggle="dropdown">
      Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>
❮ Bootstrap4 Cards Bootstrap4 Popover ❯