Dropdown button
Supported products
- Central CMS
- Central Forms
- Central Connect
Display a contextual list of actions presented as a drop down list when the button is pressed.
Basic usage
- Twig
- React
- HTML
{{
html.button_dropdown({
'label': 'My Action',
'items': [
html.link({ 'label': 'Foo', 'href': '#foo' }),
html.link({ 'label': 'Bar', 'href': '#bar' })
]
})
}}
<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.
- Twig
- React
- HTML
{{
html.button_dropdown({
'label': 'My Action',
'items': [
html.link({ 'label': 'Foo', 'href': '#foo' }),
html.divider(),
html.link({ 'label': 'Bar', 'href': '#bar' })
]
})
}}
<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 <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.
Basic usage
- Twig
- React
- HTML
{{
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'
})
]
})
}}
<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 <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>