Action Menu

Icon trigger: the actions on a row

The default. A quiet more_horiz button named by the label (“Actions for Quarterly planning offsite”), which also names the menu. Delete opens its confirmation dialog.

<?= ws_menu('Actions for ' . $plan['name'], [
    ['label' => 'Open in Planner', 'href' => $planUrl, 'icon' => 'edit_note'],
    ['label' => 'Run in Facilitator', 'href' => $runUrl, 'icon' => 'play_arrow'],
    ['type' => 'separator'],
    ['label' => 'Duplicate', 'action' => 'duplicate', 'icon' => 'content_copy'],
    ['label' => 'Copy share link', 'action' => 'share', 'icon' => 'link'],
    ['type' => 'separator'],
    ['label' => 'Delete', 'action' => 'delete', 'icon' => 'delete', 'danger' => true, 'modal' => 'confirm-delete'],
], ['id' => 'plan-' . $id . '-menu', 'attrs' => ['data-plan-id' => $id]]) ?>

A disabled item names its reason in description: here 'disabled' => !$hasAgenda, 'description' => 'Add an agenda first' on Save as template.

Button trigger

'trigger' => 'button' shows the label with a chevron that turns while the menu is open. Here the items are links, so a middle click opens a new tab.

<?= ws_menu('Export', [
    ['label' => 'PDF', 'href' => $pdfUrl, 'icon' => 'picture_as_pdf'],
    ['label' => 'Slide deck', 'href' => $deckUrl, 'icon' => 'slideshow'],
    ['label' => 'Run-of-show', 'href' => $runUrl, 'icon' => 'format_list_numbered'],
], ['trigger' => 'button', 'variant' => 'secondary', 'align' => 'start']) ?>

Headings, descriptions and the current item

A heading starts a group that runs to the next heading or separator. description is a muted second line, and current marks where the reader already is. Create workspace opens a dialog, and closing the dialog brings focus back to this trigger.

Disclosure: a few links

'mode' => 'disclosure' is for navigation. The panel is a plain list of links in the Tab order, with no menu roles, so a screen reader keeps its reading mode. Items that open a dialog are dropped in this mode. Known limitation: the panel is hidden until components.js opens it, so without script these links cannot be reached; link the same places elsewhere on the page too.

<?= ws_menu('Get the book', [
    ['label' => 'Buy on Kindle', 'href' => $buyHref, 'icon' => 'shopping_bag'],
    ['label' => 'Read online', 'href' => '#about', 'icon' => 'auto_stories'],
], ['mode' => 'disclosure', 'trigger' => 'button', 'variant' => 'primary']) ?>

A long list

Past the room on the page the list scrolls inside the panel. Type a letter to jump: S goes to Silent timer, S again to Sketch.

One panel for a whole list

When every row of a list has the same menu, render the entries once with ws_menu_panel(), and give each row's ws_menu the panel option naming it. The row draws only its trigger; the panel is cloned in after it when it opens and removed when it closes, and ws-menu-open lets the page drop the entries that row lacks and fill in its ids. A page of forty rows then carries one set of entries, not forty. The workshop list's card menu works this way.

<?= ws_menu_panel($rowItems, ['id' => 'plans-menu']) ?>   // once, in the list

<?php foreach ($plans as $plan): ?>
    <?= ws_menu('Actions for ' . $plan['name'], [], [
        'id'    => 'plan-' . $plan['id'] . '-menu',
        'panel' => 'plans-menu',
        'attrs' => ['data-plan-id' => $plan['id']],
    ]) ?>
<?php endforeach; ?>

On a card that lifts on hover

A hovered card moves with a transform, which would carry a fixed panel with it. The panel sits in the top layer instead, so it stays put and nothing on the card clips it.

In a scrolling table

The table below scrolls and clips its overflow. The open panel is not cut off; scroll the table and the panel follows its trigger, and closes once the trigger has scrolled out of view.