Context Menu
<div class="menu-wrapper"> <vscode-icon name="menu" size="32" id="toggle-menu-button" action-icon title="Toggle Menu" class="toggle-menu-button" ></vscode-icon> <vscode-context-menu id="context-menu" class="context-menu" ></vscode-context-menu></div>
.menu-wrapper { overflow: visible; position: relative;}
.toggle-menu-button { cursor: pointer; display: block;}
.context-menu { bottom: 36px; left: 16px; position: absolute; z-index: 2;}
const menu = document.querySelector('#context-menu');const button = document.querySelector('#toggle-menu-button');
document.querySelector('#context-menu').data = [ { label: 'Command palette...', keybinding: 'Ctrl+Shift+A', value: 'menuitem1', }, { separator: true, }, { label: 'Settings', keybinding: 'Ctrl+Comma', value: 'menuitem2', }, { label: 'Extensions', keybinding: 'Ctrl+Shift+X', value: 'menuitem3', },];
button.addEventListener('click', () => { menu.show = !menu.show;});
menu.addEventListener('vsc-context-menu-select', (event) => { console.log(event);});