Actions bar

The actions bar is a component within a tab which is split into left/right sides and contains important controls for a given user interface.

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

The actions bar is optional and can be omitted if the UI doesn't require an actions menu or primary actions.

Blocks

There are two blocks that you can populate with actions: actions_left and actions_right. You probably guessed these are normally on either side of the screen but on mobile devices they're stacked vertically, with the left block appearing above the right and buttons expanding to take up the full width of the screen.

The actions_left block will typically contain only the html.actions_menu dropdown helper, detailed below.

The actions_right block will typically contain buttons illustrating the primary action(s) for a given UI, but may also use button_groups and/or dropdowns if suitable.

Example tab view

{% extends '@pulsar/pulsar/components/tab.html.twig' %}

{%- block actions_left -%}
    {{
        html.actions_menu({
            'items': [ ... ]
        })
    }}
{%- endblock -%}

{%- block actions_right -%}
    {{
        html.button({
            'label': 'Primary Action',
            'class': 'btn--primary'
        })
    }}
{%- endblock -%}

{# rest of the tab content #}
{% block tab_content %} ... {% endblock tab_content %}
{% block tab_sidebar %} ... {% endblock tab_sidebar %}

Actions menu

The actions menu is a contextual element that provides a useful place to gather together the main actions that can be performed within a given UI, even if they occur in a tab not currently active. Think of this as similar to the 'File' menu that appears in most desktop software.

The actions menu items should relate to the main user interface a user is in, not necessarily the specific tab they're in at the time.

If a UI has multiple tabs, the actions menu should provide links to the primary actions within each tab, without the need for the user to navigate to that tab first.

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

Adding actions menu items

The actions menu helper accepts a nested array of Twig hashes which contain the options normally available to the html.link helper. Use icons as much as possible to further illustrate the action performed by each option.

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

Options available for items

Example

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

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