Skip to main content

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

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

Twig helper options

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

OptionTypeDescription
caretbooleanWhether to show the caret arrow after the label
directionstringThe direction to open the menu, either down (default) or up
itemsarrayAn 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.

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

Tooltips on dropdown items

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

Basic usage

{{
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'
})
]
})
}}