Bootstrap style dropdown menus, consisting of a toggle element, and the dropdown menu itself. See http://getbootstrap.com/components/#dropdowns

Use this component together with two sub components, a dropdown toggle (Components.DropdownToggle or Components.DropdownButton component) and a dropdown menu (Components.DropdownMenu) component:

<nav class="navbar navbar-default navbar-static">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      {{#bs-dropdown tagName="li"}}
        {{#bs-dropdown-toggle}}Dropdown <span class="caret"></span>{{/bs-dropdown-toggle}}
        {{#bs-dropdown-menu}}
          <li>{{#link-to "index"}}Something{{/link-to}}</li>
          <li>{{#link-to "index"}}Something different{{/link-to}}</li>
        {{/bs-dropdown-menu}}
      {{/bs-dropdown}}
    </ul>
  </div>
</nav>

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:

{{#bs-dropdown}}
  {{#bs-dropdown-button}}Dropdown <span class="caret"></span>{{/bs-dropdown-button}}
  {{#bs-dropdown-menu}}
    <li>{{#link-to "index"}}Something{{/link-to}}</li>
    <li>{{#link-to "index"}}Something different{{/link-to}}</li>
  {{/bs-dropdown-menu}}
{{/bs-dropdown}}

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:

{{#bs-dropdown}}
  {{#bs-button}}Dropdown{{/bs-button}}
  {{#bs-dropdown-button}}Dropdown <span class="caret"></span>{{/bs-dropdown-button}}
  {{#bs-dropdown-menu}}
    <li>{{#link-to "index"}}Something{{/link-to}}</li>
    <li>{{#link-to "index"}}Something different{{/link-to}}</li>
  {{/bs-dropdown-menu}}
{{/bs-dropdown}}

Dropup style

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

{{#bs-dropdown direction="up"}}
  ...
{{/bs-dropdown}}