Arrow

Adds a directional pointer (caret) to the menu container for clearer spatial association with the trigger.

Down

<div class="btn-group me-2 dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Down</button>
  <div class="dropdown-menu">
    <div class="menu-arrow"></div>
    <li><a class="dropdown-item" href="#">Menu item 1</a></li>
    <li><a class="dropdown-item" href="#">Menu item 2</a></li>
    <li><a class="dropdown-item" href="#">Menu item 3</a></li>
  </div>
</div>

Up

<div class="btn-group me-2 dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Up</button>
  <div class="dropdown-menu">
    <div class="menu-arrow"></div>
    <li><a class="dropdown-item" href="#">Menu item 1</a></li>
    <li><a class="dropdown-item" href="#">Menu item 2</a></li>
    <li><a class="dropdown-item" href="#">Menu item 3</a></li>
  </div>
</div>

Left

<div class="btn-group me-2 dropstart">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Left</button>
  <div class="dropdown-menu">
    <div class="menu-arrow"></div>
    <li><a class="dropdown-item" href="#">Menu item 1</a></li>
    <li><a class="dropdown-item" href="#">Menu item 2</a></li>
    <li><a class="dropdown-item" href="#">Menu item 3</a></li>
  </div>
</div>

Right

<div class="btn-group me-2 dropend">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Right</button>
  <div class="dropdown-menu">
    <div class="menu-arrow"></div>
    <li><a class="dropdown-item" href="#">Menu item 1</a></li>
    <li><a class="dropdown-item" href="#">Menu item 2</a></li>
    <li><a class="dropdown-item" href="#">Menu item 3</a></li>
  </div>
</div>