Version:

Install ​

shell
npm i @vaadin/menu-bar

Import ​

javascript
import '@vaadin/menu-bar';

Variants ​

Secondary ​

html
<vaadin-menu-bar></vaadin-menu-bar>
javascript
document.querySelector('vaadin-menu-bar').items = [{text: 'Datei'}, {text: 'Bearbeiten'}, {text: 'Ansicht'}];

Primary ​

html
<vaadin-menu-bar theme="primary"></vaadin-menu-bar>
javascript
document.querySelector('vaadin-menu-bar').items = [{text: 'First'}, {text: 'Second'}, {text: 'Third'}];

Tertiary ​

html
<vaadin-menu-bar theme="tertiary"></vaadin-menu-bar>
javascript
document.querySelector('vaadin-menu-bar').items = [{text: 'First'}, {text: 'Second'}, {text: 'Third'}];

Error / Danger ​

html
<vaadin-menu-bar theme="danger"></vaadin-menu-bar>
javascript
document.querySelector('vaadin-menu-bar').items = [{text: 'First'}, {text: 'Second'}, {text: 'Third'}];

With Drop-Down ​

html
<vaadin-menu-bar></vaadin-menu-bar>
javascript
document.querySelector('vaadin-menu-bar').items = [{text: 'Exportieren', children: [{text: 'Als PDF'}, {text: 'Als Excel'}, {text: 'Als CSV'}]}];

Disabled Item ​

html
<vaadin-menu-bar></vaadin-menu-bar>
javascript
document.querySelector('vaadin-menu-bar').items = [{text: 'Bearbeiten'}, {text: 'Löschen', disabled: true}];

Split button ​

html
<vaadin-menu-bar theme="split"></vaadin-menu-bar>
javascript
document.querySelector('vaadin-menu-bar').items = [ { text: 'Main action'}, { children: [ { text: 'Second action' }, { text: 'Third action' }, { text: 'Fourth action' }, { text: 'Fifth action' } ] } ];