# 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' } ] } ];
```