Skip to content
Version:

Install ​

shell
npm i @vaadin/context-menu

Import ​

javascript
import '@vaadin/context-menu';

Variants ​

Default ​

html
<vaadin-context-menu>
    <p>Rechtsklick zum Öffnen des Kontextmenüs</p>
</vaadin-context-menu>
javascript
document.querySelector('vaadin-context-menu').items = [ { text: 'Bearbeiten' }, { text: 'Kopieren' }, { text: 'Löschen' } ];

With Sub Menu ​

html
<vaadin-context-menu>
    <p>Rechtsklick für Menü mit Untermenü</p>
</vaadin-context-menu>
javascript
document.querySelector('vaadin-context-menu').items = [ { text: 'Erstellen' }, { text: 'Exportieren', children: [ { text: 'Als PDF' }, { text: 'Als Excel' } ] }, { text: 'Löschen' } ];

With Disabled Item ​

html
<vaadin-context-menu>
    <p>Rechtsklick für Menü</p>
</vaadin-context-menu>
javascript
document.querySelector('vaadin-context-menu').items = [ { text: 'Bearbeiten' }, { text: 'Löschen', disabled: true } ];