Bootstrap Dropdown: Create Interactive Drop-down Menus for Your Website

In Bootstrap 5.3, the "Dropdown" component allows you to create interactive drop-down menus on your website. Drop-down menus are commonly used for navigation or displaying additional options or actions.

To use the Dropdown component in Bootstrap 5.3, follow these steps:

Set up the basic structure:

Start by creating a container element, such as a <div>, to wrap the Dropdown component. Inside the container, create a trigger element, such as a button or a link, that will toggle the visibility of the drop-down menu.

Add a drop-down menu:

Create a <div> element with the class "dropdown-menu" to represent the drop-down menu. Inside the menu, add individual items using <a> or <button> elements with the class "dropdown-item". Customize the content of each item as needed.

Associate the trigger with the menu:

Add the "data-bs-toggle" attribute to the trigger element and set its value to "dropdown". Then, set the "data-bs-target" attribute to the ID of the drop-down menu. This links the trigger element to the corresponding menu.

Customize the appearance and behavior:

Optionally, you can add additional classes, styles, or JavaScript to further customize the appearance and behavior of the drop-down component. For example, you can use the "dropdown-menu-right" class to align the menu to the right side of the trigger element.

Here's an example of how to create a simple drop-down menu in Bootstrap 5.3:

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

Dropdown Colors

In Bootstrap 5.3, you can easily customize the colors of dropdown menus to match your website's design using Bootstrap's built-in utility classes and color variants. By applying different classes, you can change the background color, text color, and other visual aspects of the dropdown menu.

Here's an example

<div class="btn-group">
    <div class="dropdown">
      <a href="#" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Primary</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu</a></li>
        <li><a class="dropdown-item" href="#">Menu</a></li>
        <li><a class="dropdown-item" href="#">Menu</a></li>
        <li><a class="dropdown-item" href="#">Menu</a></li>
      </ul>
    </div>

    <div class="dropdown ms-2">
      <a href="#" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">Secondary</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu</a></li>
        <li><a class="dropdown-item" href="#">Menu</a></li>
        <li><a class="dropdown-item" href="#">Menu</a></li>
        <li><a class="dropdown-item" href="#">Menu</a></li>
      </ul>
    </div>

    <div class="dropdown ms-2">
      <a href="#" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown">Success</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu</a></li>
        <li><a class="dropdown-item" href="#">Menu</a></li>
        <li><a class="dropdown-item" href="#">Menu</a></li>
        <li><a class="dropdown-item" href="#">Menu</a></li>
      </ul>
    </div>

    <div class="dropdown ms-2">
      <a href="#" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown">Danger</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu</a></li>
        <li><a class="dropdown-item" href="#">Menu</a></li>
        <li><a class="dropdown-item" href="#">Menu</a></li>
        <li><a class="dropdown-item" href="#">Menu</a></li>
      </ul>
    </div>

    <div class="dropdown ms-2">
      <a href="#" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown">Warning</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu</a></li>
        <li><a class="dropdown-item" href="#">Menu</a></li>
        <li><a class="dropdown-item" href="#">Menu</a></li>
        <li><a class="dropdown-item" href="#">Menu</a></li>
      </ul>
    </div>

    <div class="dropdown ms-2">
      <a href="#" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown">Info</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu</a></li>
        <li><a class="dropdown-item" href="#">Menu</a></li>
        <li><a class="dropdown-item" href="#">Menu</a></li>
        <li><a class="dropdown-item" href="#">Menu</a></li>
      </ul>
    </div>

    <div class="dropdown ms-2">
      <a href="#" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown">Dark</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu</a></li>
        <li><a class="dropdown-item" href="#">Menu</a></li>
        <li><a class="dropdown-item" href="#">Menu</a></li>
        <li><a class="dropdown-item" href="#">Menu</a></li>
      </ul>
    </div>
</div>

Dropdown Split buttons

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.

Here's an example

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

Dropdown Sizing

In Bootstrap 5.3, you can easily adjust the size of dropdowns using Bootstrap's predefined sizing classes. These sizing classes allow you to make dropdowns larger or smaller to fit your desired design and layout.

To adjust the size of a dropdown in Bootstrap 5.3, you can use the following sizing classes:

btn-lg - to make the dropdown larger.
btn-sm - to make the dropdown smaller.

Here's an example

<div class="btn-group">
    <button type="button" class="btn btn-secondary btn-sm">Button</button>
    <button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
    <ul class="dropdown-menu">
      <li><a href="#" class="dropdown-item">Menus</a></li>
      <li><a href="#" class="dropdown-item">Menus</a></li>
      <li><a href="#" class="dropdown-item">Menus</a></li>
      <li><a href="#" class="dropdown-item">Menus</a></li>
    </ul>
</div>

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

<div class="btn-group">
    <button type="button" class="btn btn-secondary btn-lg">Button</button>
    <button type="button" class="btn btn-secondary btn-lg dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
    <ul class="dropdown-menu">
      <li><a href="#" class="dropdown-item">Menus</a></li>
      <li><a href="#" class="dropdown-item">Menus</a></li>
      <li><a href="#" class="dropdown-item">Menus</a></li>
      <li><a href="#" class="dropdown-item">Menus</a></li>
    </ul>
</div>

Directions

In Bootstrap 5.3, the "Directions" feature allows you to control the positioning and alignment of dropdown menus. You can specify the direction in which the dropdown menu expands, ensuring it is displayed correctly in various layout scenarios and avoiding any overlap with other elements.

Bootstrap 5.3 offers several directional options for dropdown menus:

Dropdown Direction:

By default, dropdown menus expand downwards from the dropdown trigger element. This is the most common and intuitive direction.

Drop-up Direction:

To make the dropdown menu expand upwards instead of downwards, you can add the dropup class to the parent container of the dropdown component. This is useful when there is limited space below the trigger element.

Dropdown Right Alignment:

By default, dropdown menus align with the left edge of the dropdown trigger element. To align the menu with the right edge instead, you can add the dropdown-menu-end class to the dropdown menu.

Dropdown Left Alignment:

Similarly, if you want the dropdown menu to align with the right edge of the dropdown trigger element, you can add the dropdown-menu-start class to the dropdown menu.

Here's an example

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

<div class="dropdown-center mt-3">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropdown Centered Menu</button>
<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Menu</a></li>
  <li><a class="dropdown-item" href="#">Menu</a></li>
  <li><a class="dropdown-item" href="#">Menu</a></li>
  <li><a class="dropdown-item" href="#">Menu</a></li>
</ul>
</div>

<div class="dropup mt-3">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">DropUp</button>
<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Menu</a></li>
  <li><a class="dropdown-item" href="#">Menu</a></li>
  <li><a class="dropdown-item" href="#">Menu</a></li>
  <li><a class="dropdown-item" href="#">Menu</a></li>
</ul>
</div>

<div class="dropup dropup-center mt-3">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">DropUp Centered Menu</button>
<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Menu</a></li>
  <li><a class="dropdown-item" href="#">Menu</a></li>
  <li><a class="dropdown-item" href="#">Menu</a></li>
  <li><a class="dropdown-item" href="#">Menu</a></li>
</ul>
</div>

<div class="dropend mt-3">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">DropEnd</button>
<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Menu</a></li>
  <li><a class="dropdown-item" href="#">Menu</a></li>
  <li><a class="dropdown-item" href="#">Menu</a></li>
  <li><a class="dropdown-item" href="#">Menu</a></li>
</ul>
</div>

<div class="dropstart mt-3" style="margin-left: 200px">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropstart</button>
<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Menu</a></li>
  <li><a class="dropdown-item" href="#">Menu</a></li>
  <li><a class="dropdown-item" href="#">Menu</a></li>
  <li><a class="dropdown-item" href="#">Menu</a></li>
</ul>
</div>

Menu Items

In Bootstrap 5.3, you can customize the appearance and behavior of the menu items within a dropdown menu. By applying various classes and attributes, you can style the menu items and add interactive features to enhance the user experience.

To customize menu items in a dropdown in Bootstrap 5.3, you can use the following techniques:

Here's an example

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown</button>
    <ul class="dropdown-menu">
      <li><h6 class="dropdown-header">Dropdown Header</h6></li>
      <li>
        <span class="dropdown-item-text"> Sample Item Text </span>
      </li>
      <li><a href="#" class="dropdown-item">Regular Link</a></li>
      <li><a href="#" class="dropdown-item active">Active Lint</a></li>
      <li><a href="#" class="dropdown-item disabled">Disabled Link</a></li>
      <li><hr class="dropdown-divider" /></li>
      <li><a href="#" class="dropdown-item">Menu Item</a></li>
      <li><a href="#" class="dropdown-item">Menu Item</a></li>
      <li><a href="#" class="dropdown-item">Menu Item</a></li>
    </ul>
</div>

Dropdown Form

In Bootstrap 5.3, you can create Dropdown Forms, which combine the functionality of dropdown menus with form elements. This allows you to include form controls, such as input fields, checkboxes, radio buttons, and buttons, within a dropdown menu. Dropdown Forms are useful when you need to include user input options or collect data within a dropdown context.

Here's an example

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false">Login Now</button>
    <div class="dropdown-menu">
      <form action="#" style="width: 400px" class="px-4 py-3">
        <div class="mb-3">
          <label for="email">Email Address</label>
          <input type="email" class="form-control" placeholder="Enter Email Address" />
        </div>
        <div class="mb-3">
          <label for="password">Password</label>
          <input type="password" class="form-control" placeholder="Enter Passowrd" />
        </div>
        <button class="btn btn-primary">Sign in</button>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">Are You new User</a>
        <a href="#" class="dropdown-item">Forget Password</a>
      </form>
    </div>
</div>

Dropdown Auto Close Behavior

In Bootstrap 5.3, you have control over the auto-close behavior of dropdown menus. By default, when you click outside the dropdown menu or toggle button, the dropdown menu automatically closes. However, you can modify this behavior to suit your specific requirements.

To control the auto-close behavior of dropdown menus in Bootstrap 5.3, you can use the following options:

Auto-Close on Outside Click:

By default, dropdown menus automatically close when you click anywhere outside the menu or the toggle button. This behavior ensures that the menu closes when the user interacts with other parts of the page. It helps maintain a clean and intuitive user experience

Manual Close:

If you want to prevent the dropdown menu from closing automatically, you can add the data-bs-auto-close="false" attribute to the dropdown container element. This keeps the dropdown open until the user explicitly closes it by clicking the toggle button or selecting an item from the menu.

Here's an example

<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="true">Dropdown Default</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Menu</a></li>
      <li><a class="dropdown-item" href="#">Menu</a></li>
      <li><a class="dropdown-item" href="#">Menu</a></li>
      <li><a class="dropdown-item" href="#">Menu</a></li>
    </ul>
</div>

<div class="dropdown mt-3">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="inside">Inside</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Menu</a></li>
      <li><a class="dropdown-item" href="#">Menu</a></li>
      <li><a class="dropdown-item" href="#">Menu</a></li>
      <li><a class="dropdown-item" href="#">Menu</a></li>
    </ul>
</div>

<div class="dropdown mt-3">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">Outside</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Menu</a></li>
      <li><a class="dropdown-item" href="#">Menu</a></li>
      <li><a class="dropdown-item" href="#">Menu</a></li>
      <li><a class="dropdown-item" href="#">Menu</a></li>
    </ul>
</div>

<div class="dropdown mt-3">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="false">Manual</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Menu</a></li>
      <li><a class="dropdown-item" href="#">Menu</a></li>
      <li><a class="dropdown-item" href="#">Menu</a></li>
      <li><a class="dropdown-item" href="#">Menu</a></li>
    </ul>
</div>

By utilizing the auto-close behavior options in Bootstrap 5.3, you can determine whether dropdown menus should automatically close on outside clicks or remain open until explicitly closed, providing flexibility and control over the interaction with your dropdown components.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dropdown</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" />
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <p class="fw-semibold text-primary mt-3">Basic Dropdown with Button</p>

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

          <hr />
          <p class="fw-semibold text-primary mt-3">Basic Dropdown With Anchor</p>
          <div class="dropdown">
            <a href="#" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropdown Link</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
            </ul>
          </div>
          <p class="fw-semibold text-primary mt-3">Dropdown Colors</p>

          <div class="btn-group">
            <div class="dropdown">
              <a href="#" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Primary</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Menu</a></li>
                <li><a class="dropdown-item" href="#">Menu</a></li>
                <li><a class="dropdown-item" href="#">Menu</a></li>
                <li><a class="dropdown-item" href="#">Menu</a></li>
              </ul>
            </div>

            <div class="dropdown ms-2">
              <a href="#" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">Secondary</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Menu</a></li>
                <li><a class="dropdown-item" href="#">Menu</a></li>
                <li><a class="dropdown-item" href="#">Menu</a></li>
                <li><a class="dropdown-item" href="#">Menu</a></li>
              </ul>
            </div>

            <div class="dropdown ms-2">
              <a href="#" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown">Success</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Menu</a></li>
                <li><a class="dropdown-item" href="#">Menu</a></li>
                <li><a class="dropdown-item" href="#">Menu</a></li>
                <li><a class="dropdown-item" href="#">Menu</a></li>
              </ul>
            </div>

            <div class="dropdown ms-2">
              <a href="#" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown">Danger</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Menu</a></li>
                <li><a class="dropdown-item" href="#">Menu</a></li>
                <li><a class="dropdown-item" href="#">Menu</a></li>
                <li><a class="dropdown-item" href="#">Menu</a></li>
              </ul>
            </div>

            <div class="dropdown ms-2">
              <a href="#" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown">Warning</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Menu</a></li>
                <li><a class="dropdown-item" href="#">Menu</a></li>
                <li><a class="dropdown-item" href="#">Menu</a></li>
                <li><a class="dropdown-item" href="#">Menu</a></li>
              </ul>
            </div>

            <div class="dropdown ms-2">
              <a href="#" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown">Info</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Menu</a></li>
                <li><a class="dropdown-item" href="#">Menu</a></li>
                <li><a class="dropdown-item" href="#">Menu</a></li>
                <li><a class="dropdown-item" href="#">Menu</a></li>
              </ul>
            </div>

            <div class="dropdown ms-2">
              <a href="#" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown">Dark</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Menu</a></li>
                <li><a class="dropdown-item" href="#">Menu</a></li>
                <li><a class="dropdown-item" href="#">Menu</a></li>
                <li><a class="dropdown-item" href="#">Menu</a></li>
              </ul>
            </div>
          </div>

          <p class="fw-semibold text-primary mt-3">Dropdown Split buttons</p>

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

          <p class="fw-semibold text-primary mt-3">Dropdown Sizing</p>

          <div class="btn-group">
            <button type="button" class="btn btn-secondary btn-sm">Button</button>
            <button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
            <ul class="dropdown-menu">
              <li><a href="#" class="dropdown-item">Menus</a></li>
              <li><a href="#" class="dropdown-item">Menus</a></li>
              <li><a href="#" class="dropdown-item">Menus</a></li>
              <li><a href="#" class="dropdown-item">Menus</a></li>
            </ul>
          </div>

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

          <div class="btn-group">
            <button type="button" class="btn btn-secondary btn-lg">Button</button>
            <button type="button" class="btn btn-secondary btn-lg dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
            <ul class="dropdown-menu">
              <li><a href="#" class="dropdown-item">Menus</a></li>
              <li><a href="#" class="dropdown-item">Menus</a></li>
              <li><a href="#" class="dropdown-item">Menus</a></li>
              <li><a href="#" class="dropdown-item">Menus</a></li>
            </ul>
          </div>

          <p class="fw-semibold text-primary mt-3">Directions</p>

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

          <div class="dropdown-center mt-3">
            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropdown Centered Menu</button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
            </ul>
          </div>

          <div class="dropup mt-3">
            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">DropUp</button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
            </ul>
          </div>

          <div class="dropup dropup-center mt-3">
            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">DropUp Centered Menu</button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
            </ul>
          </div>

          <div class="dropend mt-3">
            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">DropEnd</button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
            </ul>
          </div>

          <div class="dropstart mt-3" style="margin-left: 200px">
            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropstart</button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
            </ul>
          </div>

          <p class="fw-semibold text-primary mt-3">Menu Items</p>
          <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown</button>
            <ul class="dropdown-menu">
              <li><h6 class="dropdown-header">Dropdown Header</h6></li>
              <li>
                <span class="dropdown-item-text"> Sample Item Text </span>
              </li>
              <li><a href="#" class="dropdown-item">Regular Link</a></li>
              <li><a href="#" class="dropdown-item active">Active Lint</a></li>
              <li><a href="#" class="dropdown-item disabled">Disabled Link</a></li>
              <li><hr class="dropdown-divider" /></li>
              <li><a href="#" class="dropdown-item">Menu Item</a></li>
              <li><a href="#" class="dropdown-item">Menu Item</a></li>
              <li><a href="#" class="dropdown-item">Menu Item</a></li>
            </ul>
          </div>

          <p class="fw-semibold text-primary mt-3">Dropdown Form</p>
          <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false">Login Now</button>
            <div class="dropdown-menu">
              <form action="#" style="width: 400px" class="px-4 py-3">
                <div class="mb-3">
                  <label for="email">Email Address</label>
                  <input type="email" class="form-control" placeholder="Enter Email Address" />
                </div>
                <div class="mb-3">
                  <label for="password">Password</label>
                  <input type="password" class="form-control" placeholder="Enter Passowrd" />
                </div>
                <button class="btn btn-primary">Sign in</button>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Are You new User</a>
                <a href="#" class="dropdown-item">Forget Password</a>
              </form>
            </div>
          </div>

          <p class="fw-semibold text-primary mt-3">Dropdown Auto Close Behavior</p>

          <div class="dropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="true">Dropdown Default</button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
            </ul>
          </div>

          <div class="dropdown mt-3">
            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="inside">Inside</button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
            </ul>
          </div>

          <div class="dropdown mt-3">
            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">Outside</button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
            </ul>
          </div>

          <div class="dropdown mt-3">
            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="false">Manual</button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
              <li><a class="dropdown-item" href="#">Menu</a></li>
            </ul>
          </div>
          <!--col End-->
        </div>
      </div>
      <!--Container End-->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Live Preview

By utilizing these directional classes, you can control the expansion direction and alignment of dropdown menus in Bootstrap 5.3, ensuring they are displayed correctly in your layout and providing a better user experience.