Bootstrap - Dropdowns



This chapter will discuss about Bootstrap dropdown menus. Dropdown menus are toggleable, contextual menus that can be enabled to show links in a list format. This can be made interactive by using dropdown JavaScript plugin.

Few points worth noting before checking examples and features of dropdowns.

  • Dropdowns are constructed using Popper, a third-party library. Popper offers dynamic placement and viewport detection.

  • Include popper.min.js before Bootstrap's JavaScript or use bootstrap.bundle.min.js or bootstrap.bundle.js, which contains Popper.

  • As dynamic positioning is not necessary, Popper is not used to placing dropdowns in navbars.

Basic dropdown

The dropdown’s toggle (button or link) and the dropdown menu needs to be wrapped within .dropdown, or another element that declares position: relative;. We can use a <button> element as the dropdown trigger, but the plugin will work with <a> elements as well. The following examples use <ul> elements where appropriate, but custom markup is supported.

Dropdown Button

The .btn class can be converted into a dropdown menu/toggle with some markup changes. Following example demonstrates how you can use it with <button> element.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown Button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>

Dropdown link

Although <button> is the preferred control for a dropdown toggle, there may be times when you must use <a>. If you do, we advise including a role="button" attribute to clearly explain the function of the control to assistive technology like screen readers.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="dropdown">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown Link
        </a>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Create Account</a></li>
            <li><a class="dropdown-item" href="#">Sign in</a></li>
            <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>
</body>
</html>

Variant

Use contextual classes to style the dropdown menu with color.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Primary Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Secondary Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group">
    <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Danger Dropdown
    </button>
    <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group">
    <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Info Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group">
    <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Success Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group">
    <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Light Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group">
    <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Warning Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>

Split button

Similar to single button dropdowns, split button dropdowns are made by using the same syntax, but with the addition of .dropdown-toggle-split for adequate space around the dropdown caret.

Use this additional class to reduce the horizontal padding on either side of the caret by 25% and remove the left margin added to regular button dropdowns. These additional changes center the caret on the split button and provide an appropriately sized hit area next to the main button.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Split Dropdown</button>
        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>
</body>
</html>

Sizing

The dropdown menus operate with buttons of all sizes, including the default and split dropdown buttons.

Large dropdown button

To get large size buttons of dropdown menus, add class .btn-lg alongwith class .btn

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="btn-group">
    <button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown - Large Button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
    <div class="btn-group">
      <button class="btn btn-secondary btn-lg" type="button">
           Dropdown - Large split button
      </button>
      <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
      </ul>
    </div>
</body>
</html>

Small dropdown button

To get small size buttons of dropdown menus, add class .btn-sm alognwith the class .btn

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown - Small Button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
    <div class="btn-group">
    <button class="btn btn-secondary btn-sm" type="button">
        Dropdown - Small split button
    </button>
    <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>

Dark dropdown

Deprecated in v5.3.0

Add the classes .dropdown-menu-dark to an existing .dropdown-menu to choose a dark dropdown to match your dark navbar or custom style. No need to change the dropdown items.

The dark variant of components has been deprecated in v5.3.0 with the introduction of color mode. Instead of adding .dropdown-menu-dark set data-bs-theme="dark" on the root element, parent wrapper, or the component itself.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Dark
    </button>
    <ul class="dropdown-menu dropdown-menu-dark">
        <li><a class="dropdown-item active" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">sign out</a></li>
    </ul>
    </div>
</body>
</html>

And place it for use in a navbar:

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <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" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
            <ul class="navbar-nav">
              <li class="nav-item dropdown">
                <button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown Dark Navbar
                </button>
                <ul class="dropdown-menu dropdown-menu-dark">
                  <li><a class="dropdown-item" href="#">Create Account</a></li>
                  <li><a class="dropdown-item" href="#">Sign in</a></li>
                  <li><a class="dropdown-item" href="#">Sign out</a></li>
                </ul>
              </li>
            </ul>
        </div>
    </div>
</body>
</html>

Directions

The directions are reversed in RTL mode. You will see .dropstart on the right.

Centered dropdowns

Use the class .dropdown-center on the parent to center the dropdown menu under the toggle.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap - Dropdowns</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
        <title>Bootstrap - Dropdowns</title>
    </head>
    <body>
        <div class="dropdown-center">
        <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            Centered Dropdown
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Create Account</a></li>
            <li><a class="dropdown-item" href="#">Sign in</a></li>
            <li><a class="dropdown-item" href="#">Sign out<a></li>
        </ul>
        </div>
    </body>
    </html>

Dropup

By adding the class .dropup to the parent class, you get the trigger dropdown menus above the elements.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group dropup" style="padding-top: 200px;">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropup Button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group dropup" style="padding-top: 200px;">
    <button type="button" class="btn btn-secondary">
        Split Dropup Button
    </button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"
        aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
    </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Create Account</a></li>
            <li><a class="dropdown-item" href="#">Sign in</a></li>
            <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>
</body>
 </html>

Dropup centered

By adding the class .dropup-center to the .dropup class, you get the trigger dropdown menus centered above the elements.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="dropup dropup-center"  style="padding-top: 200px;">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Centered Dropup Button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>

Dropend

By adding the class .dropend to the parent class, you get the trigger dropdown menus at the right of the elements.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group dropend">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropend Button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group dropend">
    <button type="button" class="btn btn-secondary">
        Split Dropend Button
    </button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"
        aria-expanded="false">
    <span class="visually-hidden">Toggle Dropend</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>

Dropstart

By adding the class .dropstart to the parent class, you get the trigger dropdown menus at the left of the elements.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group dropstart" style="padding-left: 200px;">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropstart Button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group dropstart">
        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"
          aria-expanded="false">
        <span class="visually-hidden">Toggle Dropstart</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
        <button type="button" class="btn btn-secondary">
          Split Dropstart Button
        </button>
    </div>
</body>
</html>

Menu items

You can display the dropdown items by using elements <a> and <button>

Following example demonstrates dropdown items using <button> element:

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Dropdowns</title>
</head>
<body>
    <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Menu Using Button
    </button>
    <ul class="dropdown-menu">
        <li><button class="dropdown-item" type="button">Create Account</button></li>
        <li><button class="dropdown-item" type="button">Sign in</button></li>
        <li><button class="dropdown-item" type="button">Sign out</button></li>
    </ul>
    </div>
</body>
</html>

Following example demonstrates dropdown items using <a> element:

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Menu Using a
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>

Active

To add style the dropdown menu as active add .active class. To communicate the active state to assistive technology, use the aria-current attribute with the page value of the existing page, or true for the current item in the set.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html>
    <head>
      <title>Bootstrap - Dropdowns</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
          Dropdown Menu
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item active" href="#" aria-current="true">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </div>
    </body>
    </html>

Disabled

To make the dropdown menu disabled add .disabled class.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Menu
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item disabled">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>

Menu alignment

  • Dropdowns are positioned by default 100% from the top and along the left side of its parent.

  • By using .drop* classes, you can change the direction of the dropdown menu. You can also handle them with some other modifier classes.

  • Get the dropdown menu right aligned by adding class .dropdown-menu-end to .dropdown-menu.

  • .dropdown-menu-end will appear on the left side when using Bootstrap in RTL.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Right-aligned Dropdown Menu
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
        <li><button class="dropdown-item" type="button">Create Account</button></li>
        <li><button class="dropdown-item" type="button"> Sign in</button></li>
        <li><button class="dropdown-item" type="button">Sign out</button></li>
    </ul>
    </div>
</body>
</html>

Responsive alignment

For responsive alignment, add the data-bs-display="static" attribute to disable dynamic positioning and use responsive variation classes.

Add .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end to position the dropdown menu to the right of the specified breakpoint.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
        Left-aligned but right aligned for large screen
    </button>
    <ul class="dropdown-menu dropdown-menu-lg-end">
        <li><button class="dropdown-item" type="button">Create Account</button></li>
        <li><button class="dropdown-item" type="button">Sign in</button></li>
        <li><button class="dropdown-item" type="button">Sign out</button></li>
    </ul>
    </div>
</body>
</html>

Add .dropdown-menu-end and .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start to align the dropdown menu to the left of the specified breakpoint or beyond to do.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
        Right-aligned but left aligned for large screen
    </button>
    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
        <li><button class="dropdown-item" type="button">Create Account</button></li>
        <li><button class="dropdown-item" type="button">Sign in</button></li>
        <li><button class="dropdown-item" type="button">Sign out</button></li>
    </ul>
    </div>
</body>
</html>

Alignment options

Put most of the options shown in the above examples in one place.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button class="btn btn-Primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Menu
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Right-aligned Menu
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item" href="#">Create Account </a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>

    <div class="btn-group">
        <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
          Left-aligned, right-aligned lg Dropdown
        </button>
        <ul class="dropdown-menu dropdown-menu-lg-end">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>

    <div class="btn-group">
        <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
          Right-aligned, left-aligned lg Dropdown
        </button>
        <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>

    <div class="btn-group dropstart">
        <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Dropstart Dropdown
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>

    <div class="btn-group dropend">
        <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Dropend Dropdown
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>

    <div class="btn-group dropup">
        <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Dropup Dropdown
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>
</body>
</html>

Menu content

Headers

Add the class .dropdown-header to add a header to label sections of the dropdown menu.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><h6 class="dropdown-header">Dropdown Header</h6></li>
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>
 

Dividers

Add the class .dropdown-divider to separate groups of related menu elements with a divider.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Dropdown
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Others</a></li>
        </ul>
    </div>
</body>
</html>

Text

Place free-form text in drop-down menus with text and use the spacing utilities. Note that additional size styles may be required to limit the width of the menu.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Menu With Text
    </button>
    <div class="dropdown-menu p-4 text-body-secondary" style="max-width: 200px;">
    <p>
        example of dropdown menu with text.
    </p>
    <p class="mb-0">
            more examples of text.
    </p>
    </div>
    </div>
</body>
</html>

Forms

Add or create a form for the dropdown menu and use any margin or padding utility to provide the necessary negative space.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Menu Form
    </button>
    <div class="dropdown-menu">
        <form class="px-4 py-3">
            <div class="mb-3">
              <label for="exampleDropdownFormEmail1" class="form-label">Email Id</label>
              <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="example123@gmail.com">
            </div>
            <div class="mb-3">
              <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
              <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
            </div>
            <button type="submit" class="btn btn-primary">Log in</button>
        </form>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Forgot password?</a>
        <a class="dropdown-item" href="#">Create new account</a>
    </div>
    </div>
</body>
</html>

Dropdown options

To change the location of the dropdown menu add the classes data-bs-offset or data-bs-reference.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="d-flex">
    <div class="dropdown me-1">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
            Offset Dropdown
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-secondary">Reference Dropdown</button>
        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
          <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Others</a></li>
        </ul>
    </div>
    </div>
</body>
</html>

Auto close behavior

When you click inside or outside the dropdown menu the dropdown menu is automatically closed. By using the autoClose option you can change this behavior of the dropdown.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html>
    <head>
      <title>Bootstrap - Dropdowns</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="btn-group">
        <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
          Basic Dropdown
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </div>

      <div class="btn-group">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
          Menu Close Clickable Inside
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </div>

      <div class="btn-group">
        <button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
          Menu Close Clickable Outside
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </div>

      <div class="btn-group">
        <button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
          Manual Close
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </div>
    </body>
    </html>
Advertisements