Components.Dropdown public

Bootstrap style dropdown menus, consisting of a toggle element, and the dropdown menu itself.

Usage

Use this component together with the yielded contextual components:

• Components.DropdownToggle
• Components.DropdownButton
• Components.DropdownMenu
  • Components.DropdownMenuItem
  • Components.DropdownMenuDivider
  • Components.DropdownMenuLinkTo

Furthermore references to the following actions are yielded:

• toggleDropdown
• openDropdown
• closeDropdown

<BsDropdown as |dd|>
  <dd.toggle>Dropdown <span class="caret"></span></dd.toggle>
  <dd.menu as |ddm|>
    <ddm.item>
      <ddm.linkTo @route="index">Something</ddm.linkTo>
    </ddm.item>
    <ddm.item>
      <ddm.linkTo @route="index">Something different</ddm.linkTo>
    </ddm.item>
  </dd.menu>
</BsDropdown>

If you need to use dropdowns in a nav, use the bs-nav.dropdown contextual component rather than a standalone dropdown to ensure the correct styling regardless of your Bootstrap version.

Note: the use of angle brackets <ddm.linkTo> as shown above is only supported for Ember >= 3.10, as it relies on its Ember's native implementation of the LinkComponent. For older Ember versions please use the legacy syntax with positional arguments: {{#ddm.link-to "bar" this.model}}Bar{{/ddm.link-to}}

Button dropdowns

To use a button as the dropdown toggle element (see http://getbootstrap.com/components/#btn-dropdowns), use the Components.DropdownButton component as the toggle:

<BsDropdown as |dd|>
  <dd.button>Dropdown <span class="caret"></span></dd.button>
  <dd.menu as |ddm|>
    <ddm.item>
      <ddm.linkTo @route="index">Something</ddm.linkTo>
    </ddm.item>
    <ddm.item>
      <ddm.linkTo @route="index">Something different</ddm.linkTo>
    </ddm.item>
  </dd.menu>
</BsDropdown>

It has all the functionality of a Components.Button with additional dropdown support.

Split button dropdowns

To have a regular button with a dropdown button as in http://getbootstrap.com/components/#btn-dropdowns-split, use a Components.Button component and a Components.DropdownButton:

<BsDropdown as |dd|>
  <BsButton>Dropdown</BsButton>
  <dd.button>Dropdown <span class="caret"></span></dd.button>
  <dd.menu as |ddm|>
    <ddm.item>
      <ddm.linkTo @route="index">Something</ddm.linkTo>
    </ddm.item>
    <ddm.item>
      <ddm.linkTo @route="index">Something different</ddm.linkTo>
    </ddm.item>
  </dd.menu>
</BsDropdown>

Dropup style

Set the direction property to "up" to switch to a "dropup" style:

<BsDropdown @direction="up" as |dd|>
  ...
</BsDropdown>

Open, close or toggle the dropdown programmatically

If you wanted to control when the dropdown opens and closes programmatically, the bs-dropdown component yields the openDropdown, closeDropdown and toggleDropdown actions which you can then pass to your own handlers. For example:

<BsDropdown @closeOnMenuClick={{false}} as |dd|>
  <BsButton>Dropdown</BsButton>
  <dd.button>Dropdown <span class="caret"></span></dd.button>
  <dd.menu as |ddm|>
    {{#each this.items as |item|}}
      <ddm.item>
        <a href onclick={{action "changeItems" item dd.closeDropdown}}>
          {{item.text}}
        </a>
      </ddm.item>
    {{/each}}
  </dd.menu>
</BsDropdown>

Then in your controller or component, optionally close the dropdown:

...
actions: {
  handleDropdownClicked(item, closeDropdown) {
    if(item.isTheRightOne) {
      this.chosenItems.pushObject(item);
      closeDropdown();
    } else {
      this.set('item', this.getRandomItems());
    }
  },
}

Bootstrap 3/4 Notes

If you need to use dropdowns in a nav, use the bs-nav.dropdown contextual component rather than a standalone dropdown to ensure the correct styling regardless of your Bootstrap version.

If you use the dropdown divider, you don't have to worry about differences in the markup between versions.

Be sure to use the dropdown menu link-to, for in-application links as dropdown menu items. This is essential for proper styling regardless of Bootstrap version and will also provide automatic active highlighting on dropdown menu items. If you wish to have a dropdown menu item refer to an external link, be sure to apply the dropdown-item class to the <a> tag for Bootstrap 4 compatibility.

The dropdown menu will be positioned using the popper.js library, just as the original Bootstrap version does. This also allows you to set renderInPlace=false on the menu component to render it in a wormhole, which you might want to do if you experience clipping issues by an outer overflow: hidden element.

Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.