Skip to content
STYLESCAPE

Context Menu

Examples for the ss-c-context-menu module. The menu is a floating role="menu" that ContextMenuManager opens on a right click, or on Shift + F10 and the ContextMenu key while its target has focus. Arrow keys, Home, End and typing a letter move through the items; Esc closes it and returns focus to the target.

Static

ss-c-context-menu--static renders the menu in the page flow, for documentation.

HTML 
<div class="ss-c-context-menu ss-c-context-menu--static" role="menu" aria-label="Layer actions (static example)">
            <div class="ss-c-context-menu__heading" role="presentation">Layer</div>
            <button class="ss-c-context-menu__item" role="menuitem" type="button" tabindex="-1">
                <span class="ss-c-context-menu__label">Copy</span>
                <span class="ss-c-context-menu__shortcut">Ctrl C</span>
            </button>
            <button class="ss-c-context-menu__item" role="menuitem" type="button" tabindex="-1" aria-disabled="true">
                <span class="ss-c-context-menu__label">Paste</span>
                <span class="ss-c-context-menu__shortcut">Ctrl V</span>
            </button>
            <button class="ss-c-context-menu__item" role="menuitemcheckbox" aria-checked="true" type="button" tabindex="-1">
                <span class="ss-c-context-menu__label">Snap to grid</span>
            </button>
            <div class="ss-c-context-menu__separator" role="separator"></div>
            <button class="ss-c-context-menu__item ss-c-context-menu__item--danger" role="menuitem" type="button" tabindex="-1">
                <span class="ss-c-context-menu__label">Delete layer</span>
                <span class="ss-c-context-menu__shortcut">Del</span>
            </button>
        </div>

With a target

Give the target data-ss="context-menu" and the menu's id in data-ss-context-menu-menu. The target needs a tabindex so keyboard users can reach it. The menu starts hidden; the manager sets role on items that lack one and dispatches ss:context-menu:select.

Right-click here, or focus and press Shift+F10.
HTML 
<div class="ss-c-card ss-c-card__body" tabindex="0" data-ss="context-menu" data-ss-context-menu-menu="demo-context-menu">
            Right-click here, or focus and press Shift+F10.
        </div>
        <div class="ss-c-context-menu" id="demo-context-menu" role="menu" aria-label="Canvas actions" hidden>
            <button class="ss-c-context-menu__item" role="menuitem" type="button" data-action="zoom-fit">
                <span class="ss-c-context-menu__label">Zoom to fit</span>
            </button>
            <button class="ss-c-context-menu__item" role="menuitem" type="button" data-action="reset">
                <span class="ss-c-context-menu__label">Reset view</span>
            </button>
        </div>