Dropdown button

Display a contextual list of actions presented as a drop down list when the button is pressed.

• Foo
• Bar

Basic usage

Twig

{{
  html.button_dropdown({
    'label': 'My Action',
    'items': [
      html.link({ 'label': 'Foo', 'href': '#foo' }),
      html.link({ 'label': 'Bar', 'href': '#bar' })
    ]
  })
}}

React

<div className="btn__group">
  <button className="btn">Alpha</button>
  <button className="btn">Bravo</button>
  <button className="btn">Charlie</button>
</div>

Twig helper options

You can configure this helper using the common helper options, the following options are specific to this helper.

Option	Type	Description
caret	boolean	Whether to show the caret arrow after the label
direction	string	The direction to open the menu, either down (default) or up
items	array	An array of items to display in the dropdown list, usually links

Separating items with dividers

Use the divider helper to insert a horizontal line between items. This is a useful way to visually group related actions.

• Foo
• Bar

Twig

{{
  html.button_dropdown({
    'label': 'My Action',
    'items': [
      html.link({ 'label': 'Foo', 'href': '#foo' }),
      html.divider(),
      html.link({ 'label': 'Bar', 'href': '#bar' })
    ]
  })
}}

React

<div class="btn__group dropdown">
  <button aria-haspopup="true" aria-expanded="false" aria-controls="guid-1762003808" data-toggle="dropdown" class="btn dropdown__toggle">My Action&nbsp;<span class="caret"></span></button>
  <ul id="guid-1762003808" class="dropdown__menu pull-left">
    <li><a href="#foo">Foo</a></li>
    <li><span class="divider"></span></li>
    <li><a href="#bar">Bar</a></li>
  </ul>
</div>

Tooltips on dropdown items

A tooltip may be used to provide additional context about a dropdown item.

• Foo
• Bar

Basic usage

Twig

{{
  html.button_dropdown({
    'label': 'My Action',
    'items': [
      html.link({ 'label': 'No tooltip', 'href': '#foo' }),
      html.link({
        'label': 'With tooltip',
        'href': '#bar',
        'data-tippy-content': 'My tooltip',
        'data-tippy-placement': 'right'
      })
    ]
  })
}}

React

<div class="btn__group dropdown">
  <button aria-haspopup="true" aria-expanded="false" aria-controls="guid-310366783" data-toggle="dropdown" class="btn dropdown__toggle">My Action&nbsp;<span class="caret"></span></button>
  <ul id="guid-310366783" class="dropdown__menu pull-left">
    <li><a href="#foo">No tooltip</a></li>
    <li><a href="#bar" data-tippy-content="My tooltip" data-tippy-placement="right">With tooltip</a></li>
  </ul>
</div>