Prev Next

BS5 Dropdowns

Bootstrap 5 Dropdowns provide a stylish way to toggle contextual overlays for displaying menus or additional actions.

Key Topics

Basic Dropdown

Create a dropdown using the .dropdown class with a toggle button.

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown button
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <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>

Explanation: The .dropdown container holds the toggle button and the .dropdown-menu. Items inside the dropdown menu use the .dropdown-item class.

Add .dropdown-divider to separate groups of menu items.

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownDividerButton" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown with Dividers
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownDividerButton">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>

Explanation: Use .dropdown-divider to create visual separation between menu groups.

Change dropdown direction using classes like .dropup, .dropend, and .dropstart.

<div class="dropup">
    <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropup
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
    </ul>
</div>

Explanation: The direction of dropdowns can be controlled with specific classes, making them open above, to the left, or to the right.

Complete Dropdown Example

Here is a complete example demonstrating dropdowns with various features.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Dropdowns Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2>Bootstrap Dropdowns</h2>

        <h3>Basic Dropdown</h3>
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown button
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <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>

        <h3>Dropdown with Dividers</h3>
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownDividerButton" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown with Dividers
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownDividerButton">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
        </div>

        <h3>Dropup Example</h3>
        <div class="dropup">
            <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                Dropup
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
            </ul>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example combines different dropdown features, including dividers and directionality.

Key Takeaways

  • Dropdowns are built with .dropdown and .dropdown-menu.
  • Add .dropdown-divider for separators.
  • Use classes like .dropup to control dropdown direction.
Prev Next