Aquileo | Bootstrap 5 Dropdowns Dropleft

Bootstrap 5 Dropdowns Dropleft is used to open the dropdown on the left-hand side of the user. Dropdown menus can be set up to the left of the elements by adding .dropstart to the parent element.

Bootstrap 5 Dropdowns Dropleft Class:

dropstart: This class is used to launch dropdown menus to the right of the button.

Syntax:

<div class="btn-group dropstart">
    <button type="button"
            class="btn dropdown-toggle" 
            data-bs-toggle="dropdown">
        ...
    </button>
    <ul class="dropdown-menu">
        <li>...</li>
    </ul>
</div>

Note: In both the example we will use a float-end class so the dropstart can be easily visible.

Example 1: In this example, we will learn about a Dropdown Dropleft.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
          integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
          crossorigin="anonymous">
    </script>

</head>

<body>
    <div class="container">

        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap 5  Dropdowns Dropleft</h2>

        <div class="btn-group dropstart float-end">
            <button type="button" 
                    class="btn-success dropdown-toggle
                           dropdown-toggle-split" 
                    data-bs-toggle="dropdown"
                    data-bs-display="static"
                    aria-expanded="false">
                Select Course from GeeksforGeeks - DropStart
            </button>
            <div class="dropdown-menu dropdown-menu-end ">
                <a class="dropdown-item" href="#">
                    C Programming
                </a>
                <a class="dropdown-item" href="#">
                    C++ Programming
                </a>
                <a class="dropdown-item" href="#">
                    Java Programming
                </a>
            </div>
        </div>
    </div>
</body>
</html>

Output

Example 2: In this example, we will learn about a Dropdown Dropleft using a split button

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
    </script>

</head>

<body>
    <div class="container">

        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 Dropdowns Dropleft</h2>

        <div class="btn-group dropstart float-end" role="group">
            <button type="button" 
                    class="btn btn-success dropdown-toggle 
                           dropdown-toggle-split" 
                    data-bs-toggle="dropdown" aria-expanded="false">
            </button>
            <div class="dropdown-menu dropdown-menu-end ">
                <a class="dropdown-item" href="#">
                    C Programming
                </a>
                <a class="dropdown-item" href="#">
                    C++ Programming
                </a>
                <a class="dropdown-item" href="#">
                    Java Programming
                </a>
            </div>
            <button type="button" class="btn btn-success">
                Split Button
            </button>
        </div>
    </div>
</body>

</html>

Output

Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#dropleft

Bootstrap 5 Dropdowns Dropleft

Explore