0
0
Bootsrapmarkup~5 mins

Dropdown directions (up, left, right) in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Dropdown menus help users pick options easily. Changing their direction makes sure they fit well on the screen and stay visible.

When a dropdown near the bottom of the page might get cut off, use dropup to show it above.
If space on the right side is limited, show the dropdown to the left.
When the dropdown is near the left edge, show it to the right to avoid clipping.
To improve user experience by adjusting dropdown direction based on layout.
When designing responsive menus that adapt to different screen sizes.
Syntax
Bootsrap
<div class="dropdown dropup">
  <button class="btn btn-secondary 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>

Use dropup class to make dropdown open upwards.

Use dropstart for left direction and dropend for right direction.

Examples
This dropdown opens upwards above the button.
Bootsrap
<div class="dropdown dropup">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Option 1</a></li>
    <li><a class="dropdown-item" href="#">Option 2</a></li>
  </ul>
</div>
This dropdown opens to the left side of the button.
Bootsrap
<div class="dropdown dropstart">
  <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Left 1</a></li>
    <li><a class="dropdown-item" href="#">Left 2</a></li>
  </ul>
</div>
This dropdown opens to the right side of the button.
Bootsrap
<div class="dropdown dropend">
  <button class="btn btn-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Right 1</a></li>
    <li><a class="dropdown-item" href="#">Right 2</a></li>
  </ul>
</div>
Sample Program

This page shows three dropdown buttons. Each opens in a different direction: up, left, and right. This helps you see how to control dropdown placement using Bootstrap classes.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Dropdown Directions</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body class="p-4">
  <h2>Dropdown Directions Example</h2>
  <div class="mb-3">
    <div class="dropdown dropup">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropup
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action 1</a></li>
        <li><a class="dropdown-item" href="#">Action 2</a></li>
      </ul>
    </div>
  </div>
  <div class="mb-3">
    <div class="dropdown dropstart">
      <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropstart
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Left 1</a></li>
        <li><a class="dropdown-item" href="#">Left 2</a></li>
      </ul>
    </div>
  </div>
  <div class="mb-3">
    <div class="dropdown dropend">
      <button class="btn btn-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropend
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Right 1</a></li>
        <li><a class="dropdown-item" href="#">Right 2</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>
OutputSuccess
Important Notes

Make sure to include Bootstrap's JavaScript bundle for dropdowns to work.

Use aria-expanded and other ARIA attributes for accessibility.

Dropdown direction classes help keep menus visible and improve user experience.

Summary

Use dropup, dropstart, and dropend classes to control dropdown direction.

Adjust dropdown direction to fit your page layout and avoid clipping.

Always include Bootstrap JS and ARIA attributes for proper functionality and accessibility.