diff --git a/dev/demo/menu.html b/dev/demo/menu.html
new file mode 100644
index 0000000..13f7ae9
--- /dev/null
+++ b/dev/demo/menu.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Menu demo</title>
+    <meta charset="utf-8" />
+    <script src="../js/src/menu.js"></script>
+    <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
+    <style type="text/css" rel="stylesheet">
+.info {
+  background-color: #ddd;
+  color: black;
+  padding: 1em;
+  font-family: mono;
+}
+body {
+  margin: 0;
+  background-color: #ddd;
+}
+    </style>
+  </head>
+  <body>
+    <div style="position: absolute; background-color: #7ba400; height: 50px; width: 100%;"></div>
+
+    <div id="menu" class="vc"></div>
+
+    <main>
+      <div>
+	<div id="pagination"><a rel="prev"><span><i class="fa fa-caret-left"></i></span></a><a rel="self"><span>1</span></a><a href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&amp;ql=poliqarp&amp;p=2"><span>2</span></a><a href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&amp;ql=poliqarp&amp;p=3"><span>3</span></a><span><i class="fa fa-ellipsis-h"></i></span><a href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&amp;ql=poliqarp&amp;p=52230"><span>52230</span></a><a rel="next" href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&amp;ql=poliqarp&amp;p=2"><span><i class="fa fa-caret-right"></i></span></a></div>
+      </div>
+    </main>
+
+    <script>
+KorAP.OwnMenuItem = {
+  create : function (params) {
+    return Object.create(KorAP.MenuItem).upgradeTo(KorAP.OwnMenuItem)._init(params);
+  },
+  content : function (content) {
+    if (arguments.length === 1) {
+      this._content = content;
+    };
+    return this._content;
+  },
+
+  // enter or click
+  onclick : function () {
+    console.log(this._name);
+  },
+
+  // right arrow
+  further : function () {
+    console.log("Further: " + this._name);
+  },
+  _init : function (params) {
+    if (params[0] === undefined)
+      throw new Error("Missing parameters");
+
+    this._name = params[0];
+    this._content = document.createTextNode(this._name);
+    this._lcField = ' ' + this.content().textContent.toLowerCase();
+
+    return this;
+  }
+};
+
+KorAP.OwnPrefix = {
+  create : function () {
+    return Object.create(KorAP.MenuPrefix)
+      .upgradeTo(KorAP.OwnPrefix)
+      ._init();
+  },
+  onclick : function () {
+    console.log('Prefix: ' + this.value());
+  }
+}
+
+KorAP.OwnMenu = {
+  create : function (params) {
+    return Object.create(KorAP.Menu)
+      .upgradeTo(KorAP.OwnMenu)
+      ._init(KorAP.OwnMenuItem, KorAP.OwnPrefix, params);
+  }
+};
+
+var menu = KorAP.OwnMenu.create([
+  ['Titel', 'title', 'string'],
+  ['Untertitel', 'subTitle', 'string'],
+  ['Veröffentlichungsdatum', 'pubDate', 'date'],
+  ['Länge', 'length', 'integer'],
+  ['Autor', 'author', 'string'],
+  ['Genre', 'genre', 'string'],
+  ['corpusID', 'corpusID', 'string'],
+  ['docID', 'docID', 'string'],
+  ['textID', 'textID', 'string']
+]);
+
+    document.getElementById('menu').appendChild(menu.element());
+
+    menu.limit(3);
+    menu.show('');
+    menu.focus();
+
+    </script>
+  </body>
+</html>