Button dropdown
Show a dropdown/dropup menu when the button is clicked.
Example usage
{{
html.button_dropdown({
'label': 'Drop Down',
'items': [
html.link({ 'label': 'foo', 'href': '#foo' }),
html.link({ 'label': 'bar', 'href': '#bar' })
]
})
}}
See the Pen docs - html - button dropdown by Pulsar (@pulsar) on CodePen.
Options
Option | Type | Description |
---|---|---|
caret | bool | Whether to show the caret arrow in the label (default true) |
class | string | A space separated list of class names (applied to the button) |
direction | string | down (default) or up |
id | string | A unique identifier, if required (applied to the button) |
items | array | An array of items to put in the dropdown list (usually links) |
label | string | The button label |
data-* | string | Data attributes, eg: 'data-foo': 'bar' (applied to the button) |
Menu items
Pass a list of html.link
items to the menu_items
parameter to be used as the dropdown/up menu, remember you can chain together icons, labels and badges in the link label too.
{{
html.button_dropdown({
'label': 'Drop Down',
'items': [
html.link({ 'label': 'foo', 'href': '#foo' }),
html.link({ 'label': 'bar', 'href': '#bar' })
]
})
}}
See the Pen docs - html - button dropdown items by Pulsar (@pulsar) on CodePen.
Dropup
Change the placement of the menu with the direction
option.
{{
html.button_dropdown({
'direction': 'up',
'label': 'Drop Up',
'items': [
html.link({ 'label': 'foo', 'href': '#foo' }),
html.link({ 'label': 'bar', 'href': '#bar' })
]
})
}}
See the Pen docs - html - button dropup by Pulsar (@pulsar) on CodePen.
Divider
Separate menu items with a horizontal line.
{{
html.button_dropdown({
'label': 'Drop Down',
'items': [
html.link({ 'label': 'foo' }),
html.divider(),
html.link({ 'label': 'bar' })
]
})
}}
See the Pen docs - html - button dropdown divider by Pulsar (@pulsar) on CodePen.