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)

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

results matching ""

    No results matching ""