Divider

Used to visually group or separate links in html.button_dropdown elements.

See the Pen dGVOZg by Paul Stanton (@stanton) on CodePen.

Basic usage

{{ html.divider() }}

Results in

<span class="divider"></span>

Dropdown buttons

You'll mainly use this when building html.button_dropdown elements.

{{
    html.button_dropdown({
        'label': 'Drop Down',
        'items': [
            html.link({ 
                'label': 'Save', 
                'href': '/save',
                'icon': 'save'
            }),
            html.link({ 
                'label': 'Edit', 
                'href': '/edit',
                'icon': 'pencil'
            }),
            html.divider(),
            html.link({ 
                'label': 'Delete', 
                'href': '/delete',
                'icon': 'remove'
            }),
        ]
    })
}}

Actions menu

The actions menu helper will automatically add dividers based on the way items are grouped. The divider will still be placed between 'Edit' and 'Delete' because they exist in separate arrays.

{{
    html.actions_menu({
        'items': [
            [
                {
                    'label': 'Save',
                    'href': '/save',
                    'icon': 'save'
                },
                {
                    'label': 'Edit',
                    'href': '/edit',
                    'icon': 'pencil'
                }
            ],
            [
                {
                    'label': 'Delete',
                    'href': '/delete',
                    'icon': 'remove'
                }
            ]
        ]
    })
}}

When to use

Dropdown buttons should group related links together based on their function, there are no hard and fast rules here and you should use your own judgement/common sense.

An example might be to separate actions relating to publishing from those which affect the status of a content item.

Delete actions should ideally be placed as the last item, and be separated with a divider. Multiple delete actions should be grouped (delete / delete all).

See the Pen XXeNXM by Paul Stanton (@stanton) on CodePen.