← All elements
<ul class="cm"><li>Copy<kbd>⌘C</kbd></li><li>Paste<kbd>⌘V</kbd></li><li>Duplicate<kbd>⌘D</kbd></li><li class="dg">Delete<kbd>⌫</kbd></li></ul>About this menu
A right-click style menu card with icons, a keyboard shortcut column and a destructive item set apart by a divider.
How it works
A list with a white card style shows the menu body. Each row is flex with a label and a keyboard shortcut, and the destructive row is separated by a border and turns red on hover.
Ways to customise it
- Edit the items and shortcuts.
- Change the hover colour.
- Add icons before the labels.
Good to know
This is only the visual part; showing it on right-click needs script or the popover attribute. Use role menu and menuitem when it works as a real menu.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.