Dropdown

Toggleable, contextual menu for displaying lists of links.

This page shows some example usage of the <BsDropdown> component. For the full documentation please refer to the API Docs. You might also want to consult the official Bootstrap Docs for general information.
<BsDropdown @tagName="span" as |dd|>
  <dd.toggle>
    Dropdown
    <span class="caret"></span>
  </dd.toggle>
  <dd.menu as |menu|>
    <menu.item>
      <menu.link-to @route="index">Home</menu.link-to>
    </menu.item>
    <menu.divider/>
    <menu.item>
      <menu.link-to @route="demo.dropdown">Dropdowns</menu.link-to>
    </menu.item>
    <menu.divider/>
    <menu.item>
      <a href="https://example.com" class="dropdown-item">External</a>
    </menu.item>
  </dd.menu>
</BsDropdown>
<BsDropdown @direction="up" @tagName="span" as |dd|>
  <dd.toggle>
    Dropup
    <span class="caret"></span>
  </dd.toggle>
  <dd.menu @align="right" as |menu|>
    <menu.item>
      <menu.link-to @route="index">Home</menu.link-to>
    </menu.item>
    <menu.divider/>
    <menu.item>
      <menu.link-to @route="demo.dropdown">Dropdowns</menu.link-to>
    </menu.item>
  </dd.menu>
</BsDropdown>

Button dropdowns

<BsDropdown as |dd|>
  <dd.button>
    Dropdown
    <span class="caret"></span>
  </dd.button>
  <dd.menu as |menu|>
    <menu.item>
      <menu.link-to @route="index">Home</menu.link-to>
    </menu.item>
    <menu.item>
      <menu.link-to @route="demo.dropdown">Dropdowns</menu.link-to>
    </menu.item>
  </dd.menu>
</BsDropdown>
<BsDropdown as |dd|>
  <BsButton>Dropdown</BsButton>
  <dd.button>
    <span class="caret"></span>
  </dd.button>
  <dd.menu as |menu|>
    <menu.item>
      <menu.link-to @route="index">Home</menu.link-to>
    </menu.item>
    <menu.item>
      <menu.link-to @route="demo.dropdown">Dropdowns</menu.link-to>
    </menu.item>
  </dd.menu>
</BsDropdown>