diff --git a/docs/package.json b/docs/package.json
index 12148378..0edaa542 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -22,6 +22,7 @@
     "react-dom": "^17.0.1",
     "remark-container": "^0.1.2",
     "remark-toc": "^7.0.0",
+    "remixicon": "^2.5.0",
     "vue-github-button": "^1.1.2",
     "vue-live": "^1.16.0",
     "y-indexeddb": "^9.0.5",
diff --git a/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue b/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue
new file mode 100644
index 00000000..7c8b8eb2
--- /dev/null
+++ b/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue
@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <menu-item v-for="(item, index) in items" :key="index" v-bind="item" />
+  </div>
+</template>
+
+<script>
+import MenuItem from './MenuItem.vue'
+
+export default {
+  components: {
+    MenuItem,
+  },
+
+  props: {
+    editor: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      items: [
+        {
+          icon: 'bold',
+          action: () => this.editor.chain().focus().toggleBold().run(),
+          isActive: () => this.editor.isActive('bold'),
+        },
+        {
+          icon: 'italic',
+          action: () => this.editor.chain().focus().toggleItalic().run(),
+          isActive: () => this.editor.isActive('italic'),
+        },
+        {
+          icon: 'strikethrough',
+          action: () => this.editor.chain().focus().toggleStrike().run(),
+          isActive: () => this.editor.isActive('strike'),
+        },
+        {
+          icon: 'code-view',
+          action: () => this.editor.chain().focus().toggleCode().run(),
+          isActive: () => this.editor.isActive('code'),
+        },
+        {
+          icon: 'format-clear',
+          action: () => this.editor.chain().focus().unsetAllMarks().run(),
+        },
+        {
+          icon: 'eraser-line',
+          action: () => this.editor.chain().focus().clearNodes().run(),
+        },
+        {
+          icon: 'paragraph',
+          action: () => this.editor.chain().focus().setParagraph().run(),
+          isActive: () => this.editor.isActive('paragraph'),
+        },
+        {
+          icon: 'h-1',
+          action: () => this.editor.chain().focus().toggleHeading({ level: 1 }).run(),
+          isActive: () => this.editor.isActive('heading', { level: 1 }),
+        },
+        {
+          icon: 'h-2',
+          action: () => this.editor.chain().focus().toggleHeading({ level: 2 }).run(),
+          isActive: () => this.editor.isActive('heading', { level: 2 }),
+        },
+        {
+          icon: 'h-3',
+          action: () => this.editor.chain().focus().toggleHeading({ level: 3 }).run(),
+          isActive: () => this.editor.isActive('heading', { level: 3 }),
+        },
+        {
+          icon: 'h-4',
+          action: () => this.editor.chain().focus().toggleHeading({ level: 4 }).run(),
+          isActive: () => this.editor.isActive('heading', { level: 4 }),
+        },
+        {
+          icon: 'h-5',
+          action: () => this.editor.chain().focus().toggleHeading({ level: 5 }).run(),
+          isActive: () => this.editor.isActive('heading', { level: 5 }),
+        },
+        {
+          icon: 'h-6',
+          action: () => this.editor.chain().focus().toggleHeading({ level: 6 }).run(),
+          isActive: () => this.editor.isActive('heading', { level: 6 }),
+        },
+        {
+          icon: 'list-unordered',
+          action: () => this.editor.chain().focus().toggleBulletList().run(),
+          isActive: () => this.editor.isActive('bulletList'),
+        },
+        {
+          icon: 'list-ordered',
+          action: () => this.editor.chain().focus().toggleOrderedList().run(),
+          isActive: () => this.editor.isActive('orderedList'),
+        },
+        {
+          icon: 'code-view',
+          action: () => this.editor.chain().focus().toggleCodeBlock().run(),
+          isActive: () => this.editor.isActive('codeBlock'),
+        },
+        {
+          icon: 'double-quotes-l',
+          action: () => this.editor.chain().focus().toggleBlockQuote().run(),
+          isActive: () => this.editor.isActive('blockQuote'),
+        },
+        {
+          icon: 'separator',
+          action: () => this.editor.chain().focus().setHorizontalRule().run(),
+        },
+        {
+          icon: 'text-wrap',
+          action: () => this.editor.chain().focus().setHardBreak().run(),
+        },
+        {
+          icon: 'arrow-go-back-line',
+          action: () => this.editor.chain().focus().undo().run(),
+        },
+        {
+          icon: 'arrow-go-forward-line',
+          action: () => this.editor.chain().focus().redo().run(),
+        },
+      ],
+    }
+  },
+}
+</script>
+
+<style>
+
+</style>
diff --git a/docs/src/demos/Examples/CollaborativeEditing/MenuItem.vue b/docs/src/demos/Examples/CollaborativeEditing/MenuItem.vue
new file mode 100644
index 00000000..8e27898e
--- /dev/null
+++ b/docs/src/demos/Examples/CollaborativeEditing/MenuItem.vue
@@ -0,0 +1,57 @@
+<template>
+  <button
+    class="menu-item"
+    :class="{ 'is-active': isActive ? isActive(): null }"
+    @click="action"
+  >
+    <svg class="remix">
+      <use :xlink:href="require('../../../../../node_modules/remixicon/fonts/remixicon.symbol.svg') + `#ri-${icon}`" />
+    </svg>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    icon: {
+      type: String,
+      required: true,
+    },
+
+    action: {
+      type: Function,
+      required: true,
+    },
+
+    isActive: {
+      type: Function,
+      default: null,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.menu-item {
+  width: 1.75rem;
+  height: 1.75rem;
+  color: rgba(black, 0.5);
+  border: none;
+  background-color: transparent;
+  border-radius: 0.25rem;
+  padding: 0.25rem;
+  margin-right: 0.25rem;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+  }
+
+  &.is-active,
+  &:hover {
+    color: black;
+    background-color: rgba(black, 0.05);
+  }
+}
+</style>
diff --git a/docs/src/demos/Examples/CollaborativeEditing/index.vue b/docs/src/demos/Examples/CollaborativeEditing/index.vue
index 09a9fc70..3c7f1248 100644
--- a/docs/src/demos/Examples/CollaborativeEditing/index.vue
+++ b/docs/src/demos/Examples/CollaborativeEditing/index.vue
@@ -1,71 +1,9 @@
 <template>
   <div>
     <div v-if="editor">
-      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
-        bold
-      </button>
-      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
-        italic
-      </button>
-      <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
-        strike
-      </button>
-      <button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
-        code
-      </button>
-      <button @click="editor.chain().focus().unsetAllMarks().run()">
-        clear marks
-      </button>
-      <button @click="editor.chain().focus().clearNodes().run()">
-        clear nodes
-      </button>
-      <button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
-        paragraph
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
-        h1
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
-        h2
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
-        h3
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
-        h4
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
-        h5
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
-        h6
-      </button>
-      <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
-        bullet list
-      </button>
-      <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
-        ordered list
-      </button>
-      <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
-        code block
-      </button>
-      <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
-        blockquote
-      </button>
-      <button @click="editor.chain().focus().setHorizontalRule().run()">
-        horizontal rule
-      </button>
-      <button @click="editor.chain().focus().setHardBreak().run()">
-        hard break
-      </button>
-      <button @click="editor.chain().focus().undo().run()">
-        undo
-      </button>
-      <button @click="editor.chain().focus().redo().run()">
-        redo
-      </button>
+      <menu-bar :editor="editor" />
+      <editor-content :editor="editor" />
 
-      <br>
       <br>
 
       <button @click="setName">
@@ -90,8 +28,6 @@
       </div>
     </div>
 
-    <editor-content :editor="editor" />
-
     <div :class="`collaboration-status collaboration-status--${status}`">
       <template v-if="status">
         {{ status }},
@@ -109,6 +45,7 @@ import * as Y from 'yjs'
 import { WebrtcProvider } from 'y-webrtc'
 // import { WebsocketProvider } from 'y-websocket'
 import { IndexeddbPersistence } from 'y-indexeddb'
+import MenuBar from './MenuBar.vue'
 
 const getRandomElement = list => {
   return list[Math.floor(Math.random() * list.length)]
@@ -117,6 +54,7 @@ const getRandomElement = list => {
 export default {
   components: {
     EditorContent,
+    MenuBar,
   },
 
   data() {
diff --git a/yarn.lock b/yarn.lock
index 6f6e9932..268312bf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12096,6 +12096,11 @@ remark-toc@^7.0.0:
     "@types/unist" "^2.0.3"
     mdast-util-toc "^5.0.0"
 
+remixicon@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/remixicon/-/remixicon-2.5.0.tgz#b5e245894a1550aa23793f95daceadbf96ad1a41"
+  integrity sha512-q54ra2QutYDZpuSnFjmeagmEiN9IMo56/zz5dDNitzKD23oFRw77cWo4TsrAdmdkPiEn8mxlrTqxnkujDbEGww==
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"