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:

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.

closeOnClickHandler

protected

Handler for click events to close the dropdown

Parameters:

  • e Object

buttonComponent {String} private

closeOnMenuClick boolean public

By default, clicking on an open dropdown menu will close it. Set this property to false for the menu to stay open.

containerClass string private

A computed property to generate the suiting class for the dropdown container, either "dropdown", "dropup" or "btn-group". BS4 only: "dropleft", "dropright"

direction string public

By default, the dropdown menu will expand downwards. Other options include, 'up', 'left' and 'right'

htmlTag {string} public

The tag name used for the dropdown element.

inNav boolean private

Indicates the dropdown is being used as a navigation item dropdown.

isOpen boolean private

This property reflects the state of the dropdown, whether it is open or closed.

menuComponent {String} private

toggleComponent {String} private

toggleElement unknown private

onHide

public

Action is called when dropdown is about to be hidden Returning false will block closing the dropdown

Event Payload:

  • value

onShow

public

Action is called when dropdown is about to be shown

Event Payload:

  • value