Version:

Install ​

shell
npm i @mate-vue/menu-bar

Import ​

vue
<script setup>
import { MateMenuBar } from '@mate-vue/menu-bar';
</script>

Variants ​

Secondary ​

vue
<template>
  <MateMenuBar :items="[{text: 'Datei'}, {text: 'Bearbeiten'}, {text: 'Ansicht'}]"></MateMenuBar>
</template>

Primary ​

vue
<template>
  <MateMenuBar theme="primary" :items="[{text: 'First'}, {text: 'Second'}, {text: 'Third'}]"></MateMenuBar>
</template>

Tertiary ​

vue
<template>
  <MateMenuBar theme="tertiary" :items="[{text: 'First'}, {text: 'Second'}, {text: 'Third'}]"></MateMenuBar>
</template>

Error / Danger ​

vue
<template>
  <MateMenuBar theme="danger" :items="[{text: 'First'}, {text: 'Second'}, {text: 'Third'}]"></MateMenuBar>
</template>

With Drop-Down ​

vue
<template>
  <MateMenuBar :items="[{text: 'Exportieren', children: [{text: 'Als PDF'}, {text: 'Als Excel'}, {text: 'Als CSV'}]}]"></MateMenuBar>
</template>

Disabled Item ​

vue
<template>
  <MateMenuBar :items="[{text: 'Bearbeiten'}, {text: 'Löschen', disabled: true}]"></MateMenuBar>
</template>

Split button ​

vue
<template>
  <MateMenuBar theme="split" :items="[ { text: 'Main action'}, { children: [ { text: 'Second action' }, { text: 'Third action' }, { text: 'Fourth action' }, { text: 'Fifth action' } ] } ]"></MateMenuBar>
</template>

Vue native ​

vue
<template>
  <MateMenuBar>
    <MateMenuBarItem @click="e => console.log(e)" :tooltipText="'Mein Tooltip'">Vue test</MateMenuBarItem>
    <MateMenuBarItem>
      <span theme="icon">person</span>
      <span>Person</span>
    </MateMenuBarItem>
    <MateMenuBarItem>
      <template #default>Vue test with menu</template>
      <template #items>
        <MateMenuBarItem>Vue test 1</MateMenuBarItem>
        <MateMenuBarItem>Vue test 2</MateMenuBarItem>
      </template>
    </MateMenuBarItem>
  </MateMenuBar>
  <MateMenuBar >
    <MateMenuBarItem v-for="(item, index) in items" :key="index" @click="_e => item.clickCallback()">
      <template v-if="item.text === 'Zurück'">
        <span theme="icon">arrow_back</span>
      </template>
      <span>{{ item.text }}</span>
      <template v-if="item.text === 'Weiter'">
        <span theme="icon">arrow_forward</span>
      </template>
    </MateMenuBarItem>
  </MateMenuBar>
</template>