Bootstrap 5 Dropdowns Directions

Last Updated : 15 Dec, 2022

Bootstrap 5 Dropdowns Directions are used to change the direction in which we want the dropdown to pop up. The arrow direction is changed based on the direction set for the dropdown to appear.

Bootstrap 5 Dropdowns Directions:

Dropdown Dropleft: This is used to show dropdown menus left-side of the reader by using the .dropstart class.
Dropdowns Dropright: This is used to show dropdown menus right-side of the reader by using the .dropend class.
Dropdowns Dropup: This is used to show dropdown menus above the parent elements by using the .dropup class.

Syntax:

<div class="btn-group dropdown-direction-class">
    ...
</div>

Below examples illustrate the Bootstrap 5 Dropdowns Directions:

Example 1: In this example, we will set the direction of the dropdown to show upwards.

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 Directions 
        </h2> 
        <div class="btn-group dropup"> 
            <button type="button" 
                    class="btn-success dropdown-toggle"
                    data-bs-toggle="dropdown"> 
                Select Course from GeeksforGeeks 
            </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 set the direction of the dropdown to show on the right.

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 Directions 
        </h2> 
        <div class="btn-group dropend"> 
            <button type="button" 
                    class="btn-success dropdown-toggle" 
                    data-bs-toggle="dropdown"> 
                Select Course from GeeksforGeeks  
            </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>