diff --git a/examples/Components/Routes/Suggestions/index.vue b/examples/Components/Routes/Suggestions/index.vue
index 214f58d8..d4f28a07 100644
--- a/examples/Components/Routes/Suggestions/index.vue
+++ b/examples/Components/Routes/Suggestions/index.vue
@@ -2,6 +2,14 @@
   <div>
 
     <div class="editor">
+      <editor-menu-bar :editor="editor">
+        <div class="menubar" slot-scope="{ commands }">
+          <button class="menubar__button" @click="commands.mention({ id: 1, label: 'Philipp Kühn' })">
+            <icon name="mention" />
+            <span>Insert Mention</span>
+          </button>
+        </div>
+      </editor-menu-bar>
       <editor-content class="editor__content" :editor="editor" />
     </div>
 
@@ -28,7 +36,8 @@
 <script>
 import Fuse from 'fuse.js'
 import tippy from 'tippy.js'
-import { Editor, EditorContent } from 'tiptap'
+import Icon from 'Components/Icon'
+import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
 import {
   HardBreak,
   Heading,
@@ -41,7 +50,9 @@ import {
 export default {
 
   components: {
+    Icon,
     EditorContent,
+    EditorMenuBar,
   },
 
   data() {
diff --git a/examples/assets/images/icons/mention.svg b/examples/assets/images/icons/mention.svg
new file mode 100644
index 00000000..96460714
--- /dev/null
+++ b/examples/assets/images/icons/mention.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>read-email-at-alternate</title><path d="M12,.5A11.634,11.634,0,0,0,.262,12,11.634,11.634,0,0,0,12,23.5a11.836,11.836,0,0,0,6.624-2,1.25,1.25,0,1,0-1.393-2.076A9.34,9.34,0,0,1,12,21a9.132,9.132,0,0,1-9.238-9A9.132,9.132,0,0,1,12,3a9.132,9.132,0,0,1,9.238,9v.891a1.943,1.943,0,0,1-3.884,0V12A5.355,5.355,0,1,0,12,17.261a5.376,5.376,0,0,0,3.861-1.634,4.438,4.438,0,0,0,7.877-2.736V12A11.634,11.634,0,0,0,12,.5Zm0,14.261A2.763,2.763,0,1,1,14.854,12,2.812,2.812,0,0,1,12,14.761Z"/></svg>
\ No newline at end of file