Merge "Experimentation for using this with the always entry"
diff --git a/Changes b/Changes
index 6c0a899..83de611 100755
--- a/Changes
+++ b/Changes
@@ -1,7 +1,24 @@
-0.43 2021-06-29
+0.43 2021-07-28
         - New menu class that has an entry at the very end,
           similar to the input text prefix,
           that is always available (lerepp).
+        - Fix error message in case of server error (500)
+          response.
+        - Added utility funcition to menu that gets all direct
+          childNodes by a tag. Used in menu-style specs. (lerepp)
+        - Remove 'X-Frame-Options' in favor of 'frame-ancestors'
+          as a CSP rule.
+        - Fix CSS compression for new SASS compiler.
+        - Support dynamic menu extensions.
+        - Dynamically extend buttongroup menus.
+        - Update to menu.js's removeItems function to only delete
+          direct childNodes aswell as a specification to test for it (lerepp)
+        - Make actions private in panels and views.
+        - Move pagination out of resultinfo.
+        - Add support for "adopted" button groups and anchor children
+          to prepend to.
+        - New menu class that has a container for further
+          entries at the very end that is always available (lerepp).
 
 0.42 2021-06-18
         - Added GitHub based CI for perl.
diff --git a/Gruntfile.js b/Gruntfile.js
index dd59ac3..51965ac 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -79,6 +79,7 @@
         options: {
           implementation: sass,
           style: 'compressed',
+          outputStyle: 'compressed',
           sourceMap: true
         },
         files: {
diff --git a/dev/demo/all.html b/dev/demo/all.html
index 0d0fee3..d8eec7e 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -91,16 +91,16 @@
     </aside>
 
     <main>
+      <div id="pagination" class="button-group button-panel">
+	<a rel="prev"><span><span>&lt;</span></span></a>
+	<a rel="self"><span>1</span></a>
+	<a href="#2" tabindex="4"><span>2</span></a>
+	<a href="#3" tabindex="4"><span>3</span></a>
+	<a class="ellipsis"><span><span>...</span></span></a>
+	<a href="#52230" tabindex="4"><span>52230</span></a>
+	<a rel="next" href="#2" tabindex="4"><span><span>&gt;</span></span></a>
+      </div>
       <div id="resultinfo" class="found">
-	<div id="pagination">
-	  <a rel="prev"><span><span>&lt;</span></span></a>
-	  <a rel="self"><span>1</span></a>
-	  <a href="#2" tabindex="4"><span>2</span></a>
-	  <a href="#3" tabindex="4"><span>3</span></a>
-	  <a class="ellipsis"><span><span>...</span></span></a>
-	  <a href="#52230" tabindex="4"><span>52230</span></a>
-	  <a rel="next" href="#2" tabindex="4"><span><span>&gt;</span></span></a>
-	</div>
 	<p class="found">Found <span id="total-results">unknown amount of matches</span> in 59.93ms</p>
       </div>
 
diff --git a/dev/demo/containermenu.html b/dev/demo/containermenu.html
new file mode 100644
index 0000000..cfff976
--- /dev/null
+++ b/dev/demo/containermenu.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>ContainerMenu demo</title>
+    <meta charset="utf-8" />
+
+    <!-- Load remote -->
+    <script data-main="/demo/containermenudemo.js" src="/js/lib/require.js" async="async"></script>
+    <link type="text/css" rel="stylesheet" href="/css/kalamar.css" />
+    
+
+    <!-- Load local -->
+    <script data-main="containermenudemo.js" src="../js/lib/require.js" async="async"></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" style="padding-top: 80px; padding-left: 80px;"></div>
+    <div id="largemenu" style="padding-top: 0px; padding-left: 500px;"></div>
+     <div id="multisortmenu" style="padding-top: 0px; padding-left: 550px;"></div>
+    
+    <span id="choose-ql" class="menu select" style="position: absolute; right: 100px; top: 90px;">
+      <select name="ql">
+	      <option value="poliqarp">Poliqarp</option>
+	      <option value="cosmas2">Cosmas 2</option>
+	      <option value="annis" selected>Annis QL</option>
+	      <option value="cql">CQL</option>
+      </select>
+    </span>
+   
+    
+    <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>
+  </body>
+</html>
diff --git a/dev/demo/containermenudemo.js b/dev/demo/containermenudemo.js
new file mode 100644
index 0000000..9c81bf0
--- /dev/null
+++ b/dev/demo/containermenudemo.js
@@ -0,0 +1,225 @@
+requirejs.config({
+  baseUrl: '../js/src'
+});
+          // here alwaysmenu instead of normal menu, then + alwaysEntry
+require(['containermenu','menu/item', 'menu/prefix', 'menu/lengthField', 'selectMenu', 'hint/item', 'hint/lengthField',
+'container/container', 'container/containeritem'
+  ],
+function (containerMenuClass, itemClass, prefixClass, lengthFieldClass, selectMenuClass, hintItemClass, hintLengthField, containerClass, containerItemClass) {
+
+  /**
+   * Create own menu item class.
+   */
+  var OwnMenuItemClass = {
+    create : function (params) {
+      return Object.create(itemClass).upgradeTo(this)._init(params);
+    },
+
+    // content function
+    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);
+    },
+
+    // initialize item
+    _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();
+      this._i=0;
+      return this;
+    }
+  };
+
+
+  /**
+   * Create own conainerItem class.
+   */
+  var OwnContainerItemClass = {
+    create : function () {
+      var obj = containerItemClass.create()
+        .upgradeTo(this);
+        //._init();
+      obj.value="";
+      return obj;
+    },
+    add : function (letter) {
+      this.value+=letter;
+    },
+    clear : function () {
+      this.value = "";
+    },
+    further : function () {
+      this.value = this.value + this.value;
+    },
+    onclick : function () {
+      console.log('ContainerItem' + this.value);
+      console.log(this._i);
+      this._menu.limit(this._i);
+      this._menu.show();
+    },
+    element : function () {
+      // already defined
+      if (this._el !== undefined) return this._el;
+      
+      // Create list item
+      const li = document.createElement("li");
+      li.innerHTML="CI";
+  
+      // Connect action
+      if (this["onclick"] !== undefined) {
+        li["onclick"] = this.onclick.bind(this);
+      };    
+      return this._el = li;
+    }
+  };
+  //List of items.
+  var ExampleItemList = new Array;
+  ExampleItemList.push(OwnContainerItemClass.create());
+  ExampleItemList.push(OwnContainerItemClass.create());
+  ExampleItemList[0].value = "Example Item 1";
+  ExampleItemList[0]._i = 3;
+  ExampleItemList[1]._i = 4;
+
+  //Own container class.
+  var OwnContainerClass = {
+    create : function (listOfContainerItems, params) {
+      console.log(containerClass);
+      return containerClass.create(listOfContainerItems, params)
+        .upgradeTo(this);
+    }
+    //Dont know what you would want to add though
+    // You could add the containerItemClass parameter here *if* you really wanted to.
+  };
+
+  /**
+   * Create own menu class.
+   */
+  
+  var OwnMenu = {
+    create : function (list) {
+      const params = {
+        itemClass : OwnMenuItemClass,
+        prefixClass : prefixClass,
+        lengthFieldClass : lengthFieldClass,
+        containerClass : OwnContainerClass,
+        containerItemClass : OwnContainerItemClass
+      };
+      console.log("Am now in OwnMenu create",containerMenuClass);
+      console.log(ExampleItemList); // we learn, that it definetly has all the functions defined in alwaysmenu.js
+      var obj = containerMenuClass.create(list,params,ExampleItemList)
+          .upgradeTo(this);
+          //._init(list, params);
+      obj._firstActive = true;
+      console.log("OwnMenu Element",obj._el);
+      return obj;
+    }
+  };
+
+  var list = [
+    ["Constituency"],
+    ["Lemma"],
+    ["Morphology"],
+    ["Part-of-Speech"],
+    ["Syntax"]
+  ];
+
+  /**
+  var list = [
+    ['Titel', 'title', 'string'],
+    ['Untertitel', 'subTitle', 'string'],
+    ['Beschreibung', 'desc', 'string'],
+    ['Veröffentlichungsdatum', 'pubDate', 'date'],
+    ['Länge', 'length', 'integer'],
+    ['Autor', 'author', 'string'],
+    ['Genre', 'genre', 'string'],
+    ['corpusID', 'corpusID', 'string'],
+    ['docID', 'docID', 'string'],
+    ['textID', 'textID', 'string']
+  ];
+  */
+
+  var menu = OwnMenu.create(list);
+
+  /** 
+  var largeMenu = OwnMenu.create([
+    // http://www.ids-mannheim.de/cosmas2/projekt/referenz/stts/morph.html
+    // http://nachhalt.sfb632.uni-potsdam.de/owl-docu/stts.html
+    // "$.", "$(", "$,"
+    ["ADJA","ADJA ", "Attributive Adjective"],
+    ["ADJD","ADJD ", "Predicative Adjective"],
+    ["ADV","ADV ", "Adverb"],
+    ["APPO","APPO ", "Postposition"],
+    ["APPR","APPR ", "Preposition"],
+    ["APPRART","APPRART ", "Preposition with Determiner"],
+    ["APZR","APZR ","Right Circumposition"],
+    ["ART","ART ", "Determiner"],
+    ["CARD","CARD ", "Cardinal Number"],
+    ["FM","FM ", "Foreign Material"],
+    ["ITJ","ITJ ", "Interjection"],
+    ["KOKOM","KOKOM ", "Comparison Particle"],
+    ["KON","KON ", "Coordinating Conjuncion"],
+    ["KOUI","KOUI ", "Subordinating Conjunction with 'zu'"],
+    ["KOUS","KOUS ", "Subordinating Conjunction with Sentence"],
+    ["NE","NE ", "Named Entity"],
+    ["NN","NN ", "Normal Nomina"],
+    ["PAV", "PAV ", "Pronominal Adverb"],
+    ["PDAT","PDAT ","Attributive Demonstrative Pronoun"],
+    ["PDS","PDS ", "Substitutive Demonstrative Pronoun"],
+    ["PIAT","PIAT ", "Attributive Indefinite Pronoun without Determiner"],
+    ["PIDAT","PIDAT ", "Attributive Indefinite Pronoun with Determiner"],
+    ["PIS","PIS ", "Substitutive Indefinite Pronoun"],
+    ["PPER","PPER ", "Personal Pronoun"],
+    ["PPOSAT","PPOSAT ", "Attributive Possessive Pronoun"],
+    ["PPOSS","PPOSS ", "Substitutive Possessive Pronoun"],
+    ["PRELAT","PRELAT ", "Attributive Relative Pronoun"],
+    ["PRELS","PRELS ", "Substitutive Relative Pronoun"],
+    ["PRF","PRF ", "Reflexive Pronoun"],
+    ["PROAV","PROAV ", "Pronominal Adverb"],
+    ["PTKA","PTKA ","Particle with Adjective"],
+    ["PTKANT","PTKANT ", "Answering Particle"],
+    ["PTKNEG","PTKNEG ", "Negation Particle"],
+    ["PTKVZ","PTKVZ ", "Separated Verbal Particle"],
+    ["PTKZU","PTKZU ", "'zu' Particle"],
+    ["PWAT","PWAT ", "Attributive Interrogative Pronoun"],
+    ["PWAV","PWAV ", "Adverbial Interrogative Pronoun"],
+    ["PWS","PWS ", "Substitutive Interrogative Pronoun"],
+    ["TRUNC","TRUNC ","Truncated"],
+    ["VAFIN","VAFIN ", "Auxiliary Finite Verb"],
+    ["VAIMP","VAIMP ", "Auxiliary Finite Imperative Verb"],
+    ["VAINF","VAINF ", "Auxiliary Infinite Verb"],
+    ["VAPP","VAPP ", "Auxiliary Perfect Participle"],
+    ["VMFIN","VMFIN ", "Modal Finite Verb"],
+    ["VMINF","VMINF ", "Modal Infinite Verb"],
+    ["VMPP","VMPP ", "Modal Perfect Participle"],
+    ["VVFIN","VVFIN ","Finite Verb"],
+    ["VVIMP","VVIMP ", "Finite Imperative Verb"],
+    ["VVINF","VVINF ", "Infinite Verb"],
+    ["VVIZU","VVIZU ", "Infinite Verb with 'zu'"],
+    ["VVPP","VVPP ", "Perfect Participle"],
+    ["XY", "XY ", "Non-Word"]
+  ]);
+  */
+  document.getElementById('menu').appendChild(menu.element());
+  //document.getElementById('largemenu').appendChild(largeMenu.element());
+
+  menu.limit(3).show(3);
+  menu.focus();
+  
+  //largeMenu.limit(8).show(3);
+});
diff --git a/dev/demo/plugin-serverdemo.js b/dev/demo/plugin-serverdemo.js
index d606cff..9b05ce0 100644
--- a/dev/demo/plugin-serverdemo.js
+++ b/dev/demo/plugin-serverdemo.js
@@ -44,4 +44,14 @@
 }]; 
 
 
-require(['app/en','init']);
+define(['plugin/server', 'lib/domReady', 'app/en', 'init'], function(pluginClass, domReady) {
+    domReady(function (event) {
+        if (KorAP.Plugin === undefined) {
+            // Load Plugin Server first
+            KorAP.Plugin = pluginClass.create();
+            // Add services container to head
+            document.head.appendChild(KorAP.Plugin.element());
+        };
+        KorAP.Plugins.forEach(i => KorAP.Plugin.register(i));
+    });
+});
diff --git a/dev/js/runner/all.html b/dev/js/runner/all.html
index 52f996f..c1fc29c 100644
--- a/dev/js/runner/all.html
+++ b/dev/js/runner/all.html
@@ -40,6 +40,7 @@
         'spec/datepickerSpec',
         'spec/menuSpec',
         'spec/alwaysMenuSpec',
+        'spec/containerMenuSpec',
         'spec/selectMenuSpec',
         'spec/panelSpec',
         'spec/viewSpec',
diff --git a/dev/js/runner/containerMenu.html b/dev/js/runner/containerMenu.html
new file mode 100644
index 0000000..91b67a9
--- /dev/null
+++ b/dev/js/runner/containerMenu.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Spec Runner for Menu Helper</title>
+  <link rel="shortcut icon" type="image/png" href="../lib/jasmine-2.1.1/jasmine_favicon.png">
+  <link rel="stylesheet" href="../lib/jasmine-2.1.1/jasmine.css">
+  <script src="../lib/require.js"></script>
+  <script>
+    require.config({
+      baseUrl: "../src",
+      paths: {
+        "lib" : "../lib",
+        "spec" : "../spec",
+        "jlib" : "lib/jasmine-2.1.1",
+        "jasmine" : ['../lib/jasmine-2.1.1/jasmine'],
+        "jasmine-html": ['../lib/jasmine-2.1.1/jasmine-html'],
+        "jasmine-boot": ['../lib/jasmine-2.1.1/boot']
+      },
+      shim : {
+        'jasmine-html' : {
+          deps : ['jasmine']
+        },
+        'jasmine-boot' : {
+          deps : ['jasmine','jasmine-html']
+        }
+      }
+    });
+    require(['jasmine-boot'], function () {
+      require([
+        'spec/containerMenuSpec'
+     ],
+      function () {
+        window.onload();
+      });
+    });
+    </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/dev/js/spec/alwaysMenuSpec.js b/dev/js/spec/alwaysMenuSpec.js
index de7a5a0..5fc7b03 100644
--- a/dev/js/spec/alwaysMenuSpec.js
+++ b/dev/js/spec/alwaysMenuSpec.js
@@ -221,16 +221,16 @@
 
         expect(menu.show()).toBe(true);
 
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
-        expect(menu.element().getElementsByTagName("li")[1].getAttribute("data-action")).toEqual("l=");
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].getAttribute("data-action")).toEqual("l=");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
 
         // Check boundaries
-        expect(menu.element().getElementsByTagName("li")[0].classList.contains("no-more")).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[1].classList.contains("no-more")).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[2].classList.contains("no-more")).toBe(false);
+        expect(menu.directElementChildrenByTagName("li")[0].classList.contains("no-more")).toBe(true);
+        expect(menu.directElementChildrenByTagName("li")[1].classList.contains("no-more")).toBe(false);
+        expect(menu.directElementChildrenByTagName("li")[2].classList.contains("no-more")).toBe(false);
       });
 
       it('should be filterable', function () {
@@ -240,15 +240,15 @@
         expect(menu.alwaysEntryValue("o").alwaysEntryValue()).toEqual("o");
         expect(menu.element().getElementsByClassName("pref")[0].innerHTML).toEqual("o");
         expect(menu.alwaysEntry().element().innerHTML).toEqual("Speichern");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
 
         // Check boundaries
-        expect(menu.element().getElementsByTagName("li")[0].classList.contains("no-more")).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[1].classList.contains("no-more")).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[2].classList.contains("no-more")).toBe(true);
+        expect(menu.directElementChildrenByTagName("li")[0].classList.contains("no-more")).toBe(true);
+        expect(menu.directElementChildrenByTagName("li")[1].classList.contains("no-more")).toBe(false);
+        expect(menu.directElementChildrenByTagName("li")[2].classList.contains("no-more")).toBe(true);
 
         menu.limit(2);
 
@@ -256,34 +256,34 @@
         expect(menu.alwaysEntryValue("o").alwaysEntryValue()).toEqual("o");
         expect(menu.element().getElementsByClassName("pref")[0].innerHTML).toEqual("o");
         expect(menu.alwaysEntry().element().innerHTML).toEqual("Speichern");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
-        expect(menu.element().getElementsByTagName("li")[2]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[2]).toBe(undefined);
 
         // Check boundaries
-        expect(menu.element().getElementsByTagName("li")[0].classList.contains("no-more")).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[1].classList.contains("no-more")).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[2]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[0].classList.contains("no-more")).toBe(true);
+        expect(menu.directElementChildrenByTagName("li")[1].classList.contains("no-more")).toBe(false);
+        expect(menu.directElementChildrenByTagName("li")[2]).toBe(undefined);
 
         expect(menu.prefix("e").show()).toBe(true);
         expect(menu.alwaysEntryValue("e").alwaysEntryValue()).toEqual("e");
         expect(menu.element().getElementsByClassName("pref")[0].innerHTML).toEqual("e");        
         expect(menu.alwaysEntry().element().innerHTML).toEqual("Speichern");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
-        expect(menu.element().getElementsByTagName("li")[2]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[2]).toBe(undefined);
 
         menu.limit(5);
         expect(menu.prefix("a").show()).toBe(true);
         expect(menu.alwaysEntryValue("a").alwaysEntryValue()).toEqual("a");
         expect(menu.element().getElementsByClassName("pref")[0].innerHTML).toEqual("a");        
         expect(menu.alwaysEntry().element().innerHTML).toEqual("Speichern");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Ex<mark>a</mark>mple 1</span>");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemm<mark>a</mark></strong>");
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Ex<mark>a</mark>mple 2</span>");
-        expect(menu.element().getElementsByTagName("li")[3].innerHTML).toEqual("<strong>P<mark>a</mark>rt-of-Speech</strong>");
-        expect(menu.element().getElementsByTagName("li")[4].innerHTML).toEqual("<strong>Synt<mark>a</mark>x</strong>");
-        expect(menu.element().getElementsByTagName("li")[5]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Ex<mark>a</mark>mple 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Lemm<mark>a</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Ex<mark>a</mark>mple 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[3].innerHTML).toEqual("<strong>P<mark>a</mark>rt-of-Speech</strong>");
+        expect(menu.directElementChildrenByTagName("li")[4].innerHTML).toEqual("<strong>Synt<mark>a</mark>x</strong>");
+        expect(menu.directElementChildrenByTagName("li")[5]).toBe(undefined);
       });
 
 
@@ -296,91 +296,91 @@
         // Show only 3 items
         menu.limit(3);
         expect(menu.show()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
         expect(menu.alwaysEntry().active()).toBe(false);
 
         // Activate next (1)
         menu.next();
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
         expect(menu.shownItem(1).active()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
         expect(menu.alwaysEntry().active()).toBe(false);
 
         // Activate next (2)
         menu.next();
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(2).active()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
         expect(menu.alwaysEntry().active()).toBe(false);
 
         // Activate next (3)
         // scroll!
         menu.next();
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Lemma</strong>");
         expect(menu.shownItem(0).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
         expect(menu.shownItem(2).active()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
         expect(menu.alwaysEntry().active()).toBe(false);
 
         // Activate next (4)
         menu.next();
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(0).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Syntax</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Syntax</strong>");
         expect(menu.shownItem(2).active()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
         expect(menu.alwaysEntry().active()).toBe(false);
 
         // Activate next (5) - Entry / Speichern
         menu.next();
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(0).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Syntax</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Syntax</strong>");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
         expect(menu.alwaysEntry().active()).toBe(true);
 
         // Activate next (6) - ROLL
         menu.next();
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
         expect(menu.alwaysEntry().active()).toBe(false);
 
         // Active next (7)
         menu.next();
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
         expect(menu.shownItem(1).active()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
         expect(menu.alwaysEntry().active()).toBe(false);
 
         expect(menu._prefix.active()).toBe(false);
@@ -403,47 +403,47 @@
         expect(menu._prefix.active()).toBe(false);
         expect(menu.alwaysEntryValue()).toBe("");
 
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
         expect(menu.alwaysEntry().active()).toBe(false);
 
 
         // Activate prev (1) - roll to bottom
         menu.prev();
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
         expect(menu.alwaysEntry().active()).toBe(true);
 
         // Activate prev (2)
         menu.prev();
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(0).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Syntax</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Syntax</strong>");
         expect(menu.shownItem(2).active()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
         expect(menu.alwaysEntry().active()).toBe(false);
 
         // Activate prev (3)
         menu.prev();
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(0).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
         expect(menu.shownItem(1).active()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Syntax</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Syntax</strong>");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
         expect(menu.alwaysEntry().active()).toBe(false);
 
         // Activate prev (4)
@@ -454,7 +454,7 @@
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Syntax");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
         expect(menu.alwaysEntry().active()).toBe(false);
 
         // Activate prev (5)
@@ -465,7 +465,7 @@
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Part-of-Speech");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
         expect(menu.alwaysEntry().active()).toBe(false);
 
         // Activate prev (6)
@@ -476,7 +476,7 @@
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Morphology");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
         expect(menu.alwaysEntry().active()).toBe(false);
 
         // Activate next (7)
@@ -487,7 +487,7 @@
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2).name()).toEqual("Morphology");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
         expect(menu.alwaysEntry().active()).toBe(false);
 
         // Activate prev (8)
@@ -501,7 +501,7 @@
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Morphology");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
         expect(menu.alwaysEntry().active()).toBe(true);
 
         // Activate prev (10)
@@ -512,7 +512,7 @@
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Syntax");
         expect(menu.shownItem(2).active()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
         expect(menu.alwaysEntry().active()).toBe(false);
         expect(menu._prefix.active()).toBe(false);
         expect(menu.alwaysEntryValue()).toBe("");
@@ -544,40 +544,40 @@
         expect(menu.alwaysEntry().active()).toBe(false);
 
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
         // Next (1)
         menu.next();
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2)).toBe(undefined);
 
         // Next (2)
         menu.next();
         expect(menu.shownItem(0).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Part-of-Speech");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2)).toBe(undefined);
 
         // Next (3) - to prefix
         menu.next();
         expect(menu.shownItem(0).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Part-of-Speech");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
         expect(menu._prefix.active()).toBe(true);
@@ -586,10 +586,10 @@
          // Next (4) - to entry
          menu.next();
          expect(menu.shownItem(0).name()).toEqual("Morphology");
-         expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+         expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
          expect(menu.shownItem(0).active()).toBe(false);
          expect(menu.shownItem(1).name()).toEqual("Part-of-Speech");
-         expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
+         expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
          expect(menu.shownItem(1).active()).toBe(false);
          expect(menu.shownItem(2)).toBe(undefined);
          expect(menu._prefix.active()).toBe(false);
@@ -597,10 +597,10 @@
 
         menu.next();
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -622,20 +622,20 @@
         expect(menu.alwaysEntry().active()).toBe(false);
 
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
         // Next (1)
         menu.next();
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2)).toBe(undefined);
         expect(menu.alwaysEntryValue()).toBe("ex");
@@ -647,11 +647,11 @@
 
         expect(menu.prefix()).toEqual('ex');
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
 
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
         expect(menu.alwaysEntryValue()).toBe("ex");
@@ -667,10 +667,10 @@
         expect(menu._prefix.active()).toBe(false);
         expect(menu.alwaysEntry().active()).toBe(false);
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -679,10 +679,10 @@
         expect(menu._prefix.active()).toBe(false);
         expect(menu.prefix()).toEqual('e');
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2)).toBe(undefined);
         expect(menu._prefix.active()).toBe(false);
@@ -692,10 +692,10 @@
         menu.next();
         expect(menu._prefix.active()).toBe(true);
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
         expect(menu._prefix.active()).toBe(true);
@@ -705,10 +705,10 @@
         menu.next();
         expect(menu._prefix.active()).toBe(false);
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
         expect(menu._prefix.active()).toBe(false);
@@ -718,10 +718,10 @@
         menu.next();
         expect(menu._prefix.active()).toBe(false);
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -740,13 +740,13 @@
         expect(menu._prefix.active()).toBe(false);
         expect(menu.alwaysEntry().active()).toBe(false);
         expect(menu.shownItem(0).name()).toEqual("PPS");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual(
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual(
           "<strong>PPS</strong><span>Personal <mark>Pro</mark>noun, <mark>Sin</mark>gular</span>"
         );
 
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("PPSA");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>PPSA</strong><span>Personal <mark>Pro</mark>noun, <mark>Sin</mark>gular, Accusative</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>PPSA</strong><span>Personal <mark>Pro</mark>noun, <mark>Sin</mark>gular, Accusative</span>");
         expect(menu.shownItem(1).active()).toBe(false);
 
         expect(menu.shownItem(2)).toBe(undefined);
@@ -766,7 +766,7 @@
         expect(menu.alwaysEntryValue()).toBe(" p");
         expect(menu.show()).toBe(true);
         expect(menu.shownItem(0).name()).toEqual("PP");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual(
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual(
           "<strong><mark>P</mark><mark>P</mark></strong>"+
             "<span><mark>P</mark>ersonal <mark>P</mark>ronoun</span>"
         );
@@ -817,13 +817,13 @@
         expect(menu._entry.active()).toEqual(false);
 
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(2).active()).toBe(false);
         expect(menu.shownItem(3)).toBe(undefined);
         expect(menu._prefix.active()).toEqual(false);
@@ -837,7 +837,7 @@
         expect(menu.prefix()).toEqual("a");
         expect(menu.alwaysEntryValue()).toEqual("a");
         expect(menu.shownItem(0).name()).toEqual("Autor");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong><mark>A</mark>utor</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong><mark>A</mark>utor</strong>");
 
         menu._prefix.add('u');
         menu._entry.add('u');
@@ -847,7 +847,7 @@
         expect(menu.shownItem(0).name()).toEqual("Autor");
         expect(menu._prefix.active()).toEqual(false);
         expect(menu._entry.active()).toEqual(false);
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong><mark>Au</mark>tor</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong><mark>Au</mark>tor</strong>");
 
         menu._prefix.chop();
         menu._entry.chop();
@@ -855,7 +855,7 @@
         expect(menu.prefix()).toEqual("a");
         expect(menu.alwaysEntryValue()).toEqual("a");
         expect(menu.shownItem(0).name()).toEqual("Autor");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong><mark>A</mark>utor</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong><mark>A</mark>utor</strong>");
 
         menu._prefix.chop();
         menu._entry.chop();
@@ -865,13 +865,13 @@
         expect(menu._prefix.active()).toEqual(false);
         expect(menu._entry.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(2).active()).toBe(false);
         expect(menu.shownItem(3)).toBe(undefined);
 
@@ -884,13 +884,13 @@
         expect(menu._entry.active()).toEqual(false);
         expect(menu.alwaysEntryValue()).toEqual("");
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(2).active()).toBe(false);
 
         // Forward
@@ -900,13 +900,13 @@
         expect(menu._prefix.active()).toEqual(false);
         expect(menu._entry.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(2).active()).toBe(false);
         expect(menu.shownItem(3)).toBe(undefined);
 
@@ -917,13 +917,13 @@
         expect(menu._prefix.active()).toEqual(false);
         expect(menu._entry.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(2).active()).toBe(true);
         expect(menu.shownItem(3)).toBe(undefined);
 
@@ -932,13 +932,13 @@
         expect(menu.prefix()).toEqual("");
         expect(menu.alwaysEntryValue()).toEqual("");
         expect(menu.shownItem(0).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Untertitel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Untertitel</strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Länge");
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Länge</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Länge</strong>");
         expect(menu.shownItem(2).active()).toBe(true);
         expect(menu.shownItem(3)).toBe(undefined);
         expect(menu._prefix.active()).toEqual(false);
@@ -949,13 +949,13 @@
         expect(menu.prefix()).toEqual("");
         expect(menu.alwaysEntryValue()).toEqual("");
         expect(menu.shownItem(0).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Länge");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Länge</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Länge</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Autor");
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Autor</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Autor</strong>");
         expect(menu.shownItem(2).active()).toBe(true);
         expect(menu.shownItem(3)).toBe(undefined);
         expect(menu._prefix.active()).toEqual(false);
@@ -966,13 +966,13 @@
         expect(menu.prefix()).toEqual("");
         expect(menu.alwaysEntryValue()).toEqual("");
         expect(menu.shownItem(0).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Länge");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Länge</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Länge</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Autor");
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Autor</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Autor</strong>");
         expect(menu.shownItem(2).active()).toBe(false);
         expect(menu.shownItem(3)).toBe(undefined);
         expect(menu._prefix.active()).toEqual(false);
@@ -983,13 +983,13 @@
         expect(menu.prefix()).toEqual("");
         expect(menu.alwaysEntryValue()).toEqual("");
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(2).active()).toBe(false);
       });
 
@@ -1014,10 +1014,10 @@
         expect(menu.alwaysEntryValue()).toEqual("El");
         expect(menu._entry.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1028,10 +1028,10 @@
         expect(menu.alwaysEntryValue()).toEqual("El");
         expect(menu._entry.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1042,10 +1042,10 @@
         expect(menu.alwaysEntryValue()).toEqual("El");
         expect(menu._entry.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1056,10 +1056,10 @@
         expect(menu.alwaysEntryValue()).toEqual("El");
         expect(menu._entry.active()).toEqual(true);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1069,10 +1069,10 @@
         expect(menu.alwaysEntryValue()).toEqual("El");
         expect(menu._entry.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1083,11 +1083,11 @@
         expect(menu.alwaysEntryValue()).toEqual("El");
         expect(menu._entry.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(false);
 
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2)).toBe(undefined);
       });
@@ -1110,10 +1110,10 @@
         expect(menu.alwaysEntryValue()).toEqual("el");
         expect(menu._entry.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1123,11 +1123,11 @@
         expect(menu._entry.active()).toEqual(true);
 
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(false);
 
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1138,11 +1138,11 @@
         expect(menu._entry.active()).toEqual(false);
 
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(false);
 
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1151,10 +1151,10 @@
         expect(menu._prefix.active()).toEqual(false);
         expect(menu._entry.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2)).toBe(undefined);
       });
@@ -1176,10 +1176,10 @@
         expect(menu.alwaysEntry().value()).toEqual("el");
         expect(menu._entry.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1188,10 +1188,10 @@
         expect(menu._prefix.active()).toEqual(false);
         expect(menu._entry.active()).toEqual(true);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1200,10 +1200,10 @@
         expect(menu._prefix.active()).toEqual(true);
         expect(menu._entry.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1214,10 +1214,10 @@
         expect(menu._prefix.active()).toEqual(false);
         expect(menu._entry.active()).toEqual(true);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1227,10 +1227,10 @@
         expect(menu._prefix.active()).toEqual(false);
         expect(menu._entry.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
       });
diff --git a/dev/js/spec/buttongroupSpec.js b/dev/js/spec/buttongroupSpec.js
index bf7eafb..80a9e8f 100644
--- a/dev/js/spec/buttongroupSpec.js
+++ b/dev/js/spec/buttongroupSpec.js
@@ -119,7 +119,6 @@
       expect(btn.innerText).toEqual('Meta');
     });
 
-    
     it('should open lists', function () {
       var group = buttonGroupClass.create();
       expect(group.element().classList.contains('button-group')).toBeTruthy();
@@ -149,6 +148,56 @@
       document.body.removeChild(list.element());
     });
 
+    it('should add to lists', function () {
+      var group = buttonGroupClass.create();
+      expect(group.element().classList.contains('button-group')).toBeTruthy();
+
+      var list = group.addList('More', {'cls':['more']});
+
+      let x = 'empty';
+      list.add('Meta1', {'cls':['meta'], 'icon': 'metaicon'}, function (e) {
+        x = 'meta1';
+      });
+      list.add('Meta2', {'cls':['meta'], 'icon': 'metaicon'}, function (e) {
+        x = 'meta2'
+      });
+
+      var btn = group.element().firstChild;
+      expect(btn.tagName).toEqual('SPAN');
+      expect(btn.classList.contains('more')).toBeTruthy();
+      expect(btn.innerText).toEqual('More');
+
+      expect(list.element().classList.contains('visible')).toBeFalsy();
+      
+      // Click to show menu
+      btn.click();
+
+      expect(list.element().classList.contains('visible')).toBeTruthy();
+      expect(list.directElementChildrenByTagName("li")[0].innerHTML).toEqual('Meta1');
+      expect(list.directElementChildrenByTagName("li")[1].innerHTML).toEqual('Meta2');
+
+      expect(x).toEqual('empty');
+      list.directElementChildrenByTagName("li")[0].click();
+      expect(x).toEqual('meta1');
+
+      expect(list.element().classList.contains('visible')).toBeFalsy();
+
+      // Click to show menu
+      btn.click();
+
+      expect(list.element().classList.contains('visible')).toBeTruthy();
+      list.directElementChildrenByTagName("li")[1].click();
+      expect(x).toEqual('meta2');
+
+      expect(list.element().classList.contains('visible')).toBeFalsy();
+
+      expect(list.element().children[1].children[0].innerText).toEqual('Meta1--');
+      expect(list.element().children[1].children[1].innerText).toEqual('Meta2--');
+
+      document.body.removeChild(list.element());
+    });
+
+    
     it('should support toggle buttons', function () {
       var group = buttonGroupClass.create();
 
@@ -178,5 +227,62 @@
       expect(s.get()).toBeTruthy();
       expect(e.firstChild.firstChild.classList.contains("checked")).toBeTruthy();
     });
+
+    it('should allow adoption', function () {
+
+      const el = document.createElement('div');
+      
+      const group = buttonGroupClass.adopt(el);
+
+      group.add('Meta', {'cls':['meta', 'top']}, function (e) {});
+      group.add('Mate', {'cls':['mate']}, function (e) {});
+
+      var btn = group.element().children[0];
+      expect(btn.tagName).toEqual('SPAN');
+      expect(btn.classList.contains('meta')).toBeTruthy();
+      expect(btn.classList.contains('top')).toBeTruthy();
+      expect(btn.innerText).toEqual('Meta');
+
+      btn = group.element().children[1];
+      expect(btn.tagName).toEqual('SPAN');
+      expect(btn.classList.contains('mate')).toBeTruthy();
+      expect(btn.classList.contains('top')).toBeFalsy();
+      expect(btn.innerText).toEqual('Mate');
+    });
+
+    it('should make anchor element definable', function () {
+
+      const el = document.createElement('div');
+      const c1 = el.appendChild(document.createElement('c1'));
+      const c2 = el.appendChild(document.createElement('c2'));
+      const c3 = el.appendChild(document.createElement('c3'));
+      
+      const group = buttonGroupClass.adopt(el);
+      expect(group.anchor(c3)).toBeTruthy();
+
+      group.add('Meta', {'cls':['meta', 'top']}, function (e) {});
+      group.add('Mate', {'cls':['mate']}, function (e) {});
+
+      let btn = group.element().children[0];
+      expect(btn.tagName).toEqual('C1');
+
+      btn = group.element().children[1];
+      expect(btn.tagName).toEqual('C2');
+      
+      btn = group.element().children[2];
+      expect(btn.tagName).toEqual('SPAN');
+      expect(btn.classList.contains('meta')).toBeTruthy();
+      expect(btn.classList.contains('top')).toBeTruthy();
+      expect(btn.innerText).toEqual('Meta');
+
+      btn = group.element().children[3];
+      expect(btn.tagName).toEqual('SPAN');
+      expect(btn.classList.contains('mate')).toBeTruthy();
+      expect(btn.classList.contains('top')).toBeFalsy();
+      expect(btn.innerText).toEqual('Mate');
+
+      btn = group.element().children[4];
+      expect(btn.tagName).toEqual('C3');
+    });
   });
 });
diff --git a/dev/js/spec/containerMenuSpec.js b/dev/js/spec/containerMenuSpec.js
new file mode 100644
index 0000000..81eafc7
--- /dev/null
+++ b/dev/js/spec/containerMenuSpec.js
@@ -0,0 +1,2049 @@
+define(
+  ['containermenu', 'menu/item', 'menu/prefix', 'menu/lengthField','container/containeritem','container/container'],
+  function (containerMenuClass, menuItemClass, prefixClass, lengthFieldClass, containerItemClass, containerClass) {
+
+    // The OwnMenu item
+    const OwnMenuItem = {
+      create : function (params) {
+        return Object.create(menuItemClass).upgradeTo(OwnMenuItem)._init(params);
+      },
+      content : function (content) {
+        if (arguments.length === 1) {
+          this._content = content;
+        };
+        return this._content;
+      },
+      _init : function (params) {
+        if (params[0] === undefined)
+          throw new Error("Missing parameters");
+
+        this._content = document.createTextNode(params[0]);
+        this._lcField = ' ' + this.content().textContent.toLowerCase();
+
+        return this;
+      }
+    };
+
+    /**
+     * Create own conainerItem class.
+     */
+    const OwnContainerItemClass = {
+      create : function () {
+        var obj = containerItemClass.create()
+          .upgradeTo(OwnContainerItemClass);
+          //._init();
+        obj.value="";
+        return obj;
+      },
+      add : function (letter) {
+        this.value+=letter;
+      },
+      clear : function () {
+        this.value = "";
+      },
+      further : function () {
+        this.value = this.value + this.value;
+      },
+      onclick : function () {
+      },
+      element : function () {
+        // already defined
+        if (this._el !== undefined) return this._el;
+        
+        // Create list item
+        const li = document.createElement("li");
+        li.innerHTML="CI";
+    
+        // Connect action
+        if (this["onclick"] !== undefined) {
+          li["onclick"] = this.onclick.bind(this);
+        };    
+        return this._el = li;
+      }
+    };
+
+    //List of items.
+    var ExampleItemList = new Array;
+    ExampleItemList.push(OwnContainerItemClass.create());
+    ExampleItemList.push(OwnContainerItemClass.create());
+    ExampleItemList[0].value = "CIValue1 ";
+    ExampleItemList[1].value = "CIValue2 ";
+    ExampleItemList[0].element().innerHTML = "CIText1 ";
+    ExampleItemList[1].element().innerHTML = "CIText2 ";
+
+    //Own container class.
+    const OwnContainerClass = {
+      create : function (listOfContainerItems, params) {
+        //console.log(containerClass);
+        return containerClass.create(listOfContainerItems, params)
+          .upgradeTo(OwnContainerClass);
+      }
+    };
+
+    const OwnContainerMenu = {
+      create : function (list, containerList) {
+        const params = {
+          itemClass : OwnMenuItem,
+          prefixClass : prefixClass,
+          lengthFieldClass : lengthFieldClass,
+          containerClass : OwnContainerClass,
+          containerItemClass : OwnContainerItemClass
+        };
+        var obj = containerMenuClass.create(list,params,containerList)
+            .upgradeTo(OwnContainerMenu);
+            //._init(list, params);
+        return obj;
+      }
+    };
+
+    describe('OwnContainerMenu', function () {
+
+      var list = [
+        ["Constituency"],
+        ["Lemma"],
+        ["Morphology"],
+        ["Part-of-Speech"],
+        ["Syntax"]
+      ];
+      
+      var listWithEX = [
+        ["example 1 Constituency"],
+        ["Lemma"],
+        ["example 2 Morphology"],
+        ["Part-of_Speech"],
+        ["Syntax"]
+      ];
+
+      var listMultiPrefix = [
+        ["Personal Pronoun"],
+        ["Personal Pronoun, Plural"],
+        ["Personal Pronoun, Plural, Acc."],
+        ["Personal Pronoun, Plural, Dative"],
+        ["Personal Pronoun, Plural, Direct"],
+        ["Personal Pronoun, Plural, Oblique"],
+        ["Personal Pronoun, Singular"],
+        ["Personal Pronoun, Singular, Accusative"],
+        ["Personal Pronoun, Singular, Dative"],
+        ["Personal Pronoun, Singular, Direct"],
+        ["Personal Pronoun, Singular, Nominative"],
+        ["Personal Pronoun, Singular, Oblique"]
+      ];
+      
+      var demolist = [
+        ['Titel'],
+        ['Untertitel'],
+        ['Veröffentlichungsdatum'],
+        ['Länge'],
+        ['Autor']
+      ];
+
+      var demolonglist = [
+        ['Titel'],
+        ['Untertitel'],
+        ['Veröffentlichungsdatum'],
+        ['Länge'],
+        ['Autor'],
+        ['Genre'],
+        ['corpusID'],
+        ['docID'],
+        ['textID'],
+      ];
+
+      it('should be initializable', function () {
+        /**var list = [
+	        ["Constituency"],
+	        ["Lemma"],
+	        ["Morphology"],
+	        ["Part-of-Speech"],
+	        ["Syntax"]
+        ];
+        */
+
+        var menu = OwnContainerMenu.create(list,ExampleItemList);
+        // This is the same with and without additional container items!
+        expect(menu.dontHide).toBe(false);
+        menu._firstActive = true;
+        expect(menu.itemClass()).toEqual(OwnMenuItem);
+        expect(menu.element().nodeName).toEqual('UL');
+        expect(menu.element().classList.contains('visible')).toBeFalsy();
+        expect(menu.container().element().classList.contains('visible')).toBeFalsy();
+        expect(menu.limit()).toEqual(8);
+        expect(menu._notItemElements).toEqual(3);
+
+        menu.limit(9);
+        expect(menu.limit()).toEqual(9);
+
+        menu.limit(8);
+
+        // view
+        menu.show();
+        expect(menu.element().classList.contains('visible')).toBeTruthy();
+        expect(menu.container().element().classList.contains('visible')).toBeTruthy();
+
+        // First element in list
+        expect(menu.item(0).active()).toBe(true);
+        expect(menu.item(0).noMore()).toBe(true);
+
+        // Middle element in list
+        expect(menu.item(2).active()).toBe(false);
+        expect(menu.item(2).noMore()).toBe(false);
+
+        // Last element in list
+        expect(menu.item(menu.length() - 1).active()).toBe(false);
+        expect(menu.item(menu.length() - 1).noMore()).toBe(true);
+
+        expect(menu.element().classList.contains('containermenu')).toBeTruthy();
+        expect(menu.container()).toBeTruthy();
+        expect(menu._container.element().nodeName).toEqual('UL'); // actually need new one for container!
+        expect(menu._prefix.element().nodeName).toEqual('SPAN');
+        expect(menu._container._containerItemClass).toEqual(OwnContainerItemClass);
+        expect(menu._container.items.length).toEqual(3);
+      });
+
+      it('should have a reference to the menu', function () {
+        var menu = OwnContainerMenu.create(list,ExampleItemList);
+        expect(menu.item(0).menu()).toEqual(menu);
+        expect(menu.element().menu).toEqual(menu);
+        for (item of menu._container.items) {
+          expect(item._menu).toEqual(menu);
+        };
+      });
+
+
+      it('should be visible', function () {
+        var menu = OwnContainerMenu.create(list,ExampleItemList);
+        expect(menu.removeItems()).toBe(undefined);
+        menu.limit(3);
+
+        expect(menu.show()).toBe(true);
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Constituency");
+        expect(liElements[1].innerHTML).toEqual("Lemma");
+        expect(liElements[2].innerHTML).toEqual("Morphology");
+        expect(liElements[3]).toBe(undefined);
+
+        // Check boundaries
+        expect(liElements[0].classList.contains("no-more")).toBe(true);
+        expect(liElements[1].classList.contains("no-more")).toBe(false);
+        expect(liElements[2].classList.contains("no-more")).toBe(false);
+
+        var items = menu.container().items;
+        expect(items[0].element().innerHTML).toEqual("CIText1 ");
+        expect(items[1].element().innerHTML).toEqual("CIText2 ");
+        expect(items[2].element().innerHTML).toEqual("");
+        expect(items[3]).toBe(undefined);
+      });
+
+      it('should be filterable', function () {
+        var menu = OwnContainerMenu.create(list,ExampleItemList);
+        menu.limit(3);
+        expect(menu.prefix("o").show()).toBe(true);
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(menu.element().getElementsByClassName("pref")[0].innerHTML).toEqual("o");
+        expect(liElements[0].innerHTML).toEqual("C<mark>o</mark>nstituency");
+        expect(liElements[1].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+        expect(liElements[2].innerHTML).toEqual("Part-<mark>o</mark>f-Speech");
+        expect(liElements[3]).toBe(undefined);
+
+        // Check boundaries
+        expect(liElements[0].classList.contains("no-more")).toBe(true);
+        expect(liElements[1].classList.contains("no-more")).toBe(false);
+        expect(liElements[2].classList.contains("no-more")).toBe(true);
+
+        menu.limit(2);
+        
+        expect(menu.prefix("o").show()).toBe(true);
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(menu.element().getElementsByClassName("pref")[0].innerHTML).toEqual("o");
+        expect(liElements[0].innerHTML).toEqual("C<mark>o</mark>nstituency");
+        expect(liElements[1].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+        
+        expect(menu.element().getElementsByClassName("pref")[0].innerHTML).toEqual("o");
+        expect(liElements[2]).toBe(undefined);
+
+        // Check boundaries
+        expect(liElements[0].classList.contains("no-more")).toBe(true);
+        expect(liElements[1].classList.contains("no-more")).toBe(false);
+        expect(liElements[2]).toBe(undefined);
+
+        expect(menu.prefix("e").show()).toBe(true);
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(menu.element().getElementsByClassName("pref")[0].innerHTML).toEqual("e");
+        expect(liElements[0].innerHTML).toEqual("Constitu<mark>e</mark>ncy");
+        expect(liElements[2]).toBe(undefined);
+
+        menu.limit(5);
+        expect(menu.prefix("a").show()).toBe(true);
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(menu.element().getElementsByClassName("pref")[0].innerHTML).toEqual("a");
+        expect(liElements[0].innerHTML).toEqual("Lemm<mark>a</mark>");
+        expect(liElements[1].innerHTML).toEqual("P<mark>a</mark>rt-of-Speech");
+        expect(liElements[2].innerHTML).toEqual("Synt<mark>a</mark>x");
+        expect(liElements[3]).toBe(undefined);
+
+      });
+
+      it('should be nextable', function () {
+        var menu = OwnContainerMenu.create(list);
+        menu._firstActive = true;
+
+        // Show only 3 items
+        menu.limit(3);
+        expect(menu.show()).toBe(true);
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Constituency");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Lemma");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+
+        // Activate next (1)
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Constituency");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Lemma");
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(liElements[2].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+
+        // Activate next (2)
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Constituency");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Lemma");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(2).active()).toBe(true);
+        expect(liElements[3]).toBe(undefined);
+
+        // Activate next (3)
+        // scroll!
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Lemma");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Part-of-Speech");
+        expect(menu.shownItem(2).active()).toBe(true);
+        expect(liElements[3]).toBe(undefined);
+
+        // Activate next (4)
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Syntax");
+        expect(menu.shownItem(2).active()).toBe(true);
+        expect(liElements[3]).toBe(undefined);
+
+        // Activate next (5) - ROLL
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Constituency");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Lemma");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+
+        // Active next (6)
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Constituency");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Lemma");
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(liElements[2].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+      });
+
+      it('should be nextable when there are two containeritems', function () {
+        var menu = OwnContainerMenu.create(list,ExampleItemList);
+        menu._firstActive = true;
+
+        // Show only 3 items
+        menu.limit(3);
+        expect(menu.show()).toBe(true);
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Constituency");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Lemma");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Activate next (1)
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Constituency");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Lemma");
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(liElements[2].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Activate next (2)
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Constituency");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Lemma");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(2).active()).toBe(true);
+        expect(liElements[3]).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Activate next (3)
+        // scroll!
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Lemma");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Part-of-Speech");
+        expect(menu.shownItem(2).active()).toBe(true);
+        expect(liElements[3]).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Activate next (4)
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Syntax");
+        expect(menu.shownItem(2).active()).toBe(true);
+        expect(liElements[3]).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Activate next (4.1) - Jump to container part
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Syntax");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(true);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Activate next (4.2)
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Syntax");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(true);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        /** Prefix is not set
+        // Activate next (4.3)
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Syntax");
+        expect(menu.shownItem(2).active()).toBe(true);
+        expect(liElements[3]).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(true); //prefix
+        */
+
+        // Activate next (5) - ROLL
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Constituency");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Lemma");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Active next (6)
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Constituency");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Lemma");
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(liElements[2].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+      });
+
+      it('should be nextable without active field', function () {
+        var menu = OwnContainerMenu.create(list,ExampleItemList);
+        menu.limit(3);
+        expect(menu.show()).toBe(true);
+        menu.next();
+        expect(menu.shownItem(0).active()).toEqual(true);
+      });
+
+
+      it('should be prevable', function () {
+        var menu = OwnContainerMenu.create(list);
+        menu._firstActive = true;
+        menu.limit(3);
+        expect(menu.show()).toBe(true);
+
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Constituency");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Lemma");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+
+        // Activate prev (1) - roll to bottom
+        menu.prev();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Syntax");
+        expect(menu.shownItem(2).active()).toBe(true);
+        expect(liElements[3]).toBe(undefined);
+
+        // Activate prev (2)
+        menu.prev();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(liElements[2].innerHTML).toEqual("Syntax");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+
+        // Activate prev (3)
+        menu.prev();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Syntax");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+
+        // Activate prev (4)
+        menu.prev();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Lemma");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Part-of-Speech");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+
+        // Activate prev (5)
+        menu.prev();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Constituency");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Lemma");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+
+        // Activate next (1)
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Constituency");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Lemma");
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(liElements[2].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+
+        // Activate prev (6)
+        menu.prev();
+
+        // Activate prev (7)
+        menu.prev();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Syntax");
+        expect(menu.shownItem(2).active()).toBe(true);
+        expect(liElements[3]).toBe(undefined);
+      });
+
+      it('should be prevable with containerItems', function () {
+        var menu = OwnContainerMenu.create(list,ExampleItemList);
+        menu._firstActive = true;
+        menu.limit(3);
+        expect(menu.show()).toBe(true);
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Constituency");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Lemma");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Activate prev (1) - roll to bottom - base items stay, now container
+        menu.prev();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Constituency");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Lemma");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(true);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Activate prev(2) - next container item
+        menu.prev();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Constituency");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Lemma");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(true);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Activate prev (3) - roll to bottom of normal list
+        menu.prev();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Syntax");
+        expect(menu.shownItem(2).active()).toBe(true);
+        expect(liElements[3]).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Activate prev (4)
+        menu.prev();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(liElements[2].innerHTML).toEqual("Syntax");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Activate prev (5)
+        menu.prev();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Syntax");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Activate prev (6)
+        menu.prev();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Lemma");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Part-of-Speech");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Activate prev (7)
+        menu.prev();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Constituency");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Lemma");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Activate next (8)
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Constituency");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Lemma");
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(liElements[2].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(liElements[3]).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Activate prev (9)
+        menu.prev();
+        menu.prev();
+        menu.prev();
+
+        // Activate prev (10)
+        menu.prev();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Morphology");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Syntax");
+        expect(menu.shownItem(2).active()).toBe(true);
+        expect(liElements[3]).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+      });
+
+      it('should be prevable without active field', function () {
+        var menu = OwnContainerMenu.create(list);
+        menu.limit(3);
+        expect(menu.show()).toBe(true);
+        menu.prev();
+        expect(menu.shownItem(2).active()).toEqual(true);
+        expect(menu.shownItem(2).lcField()).toEqual(' syntax');
+      });
+
+      it('should be navigatable and filterable (prefix = "o")', function () {
+        var menu = OwnContainerMenu.create(list);
+        menu._firstActive = true;
+        menu.limit(2);
+
+        expect(menu.prefix("o").show()).toBe(true);
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("C<mark>o</mark>nstituency");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2)).toBe(undefined);
+
+        // Next (1)
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("C<mark>o</mark>nstituency");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(menu.shownItem(2)).toBe(undefined);
+
+        // Next (2)
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Part-<mark>o</mark>f-Speech");
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(menu.shownItem(2)).toBe(undefined);
+
+        // Next (3) - to prefix
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Part-<mark>o</mark>f-Speech");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2)).toBe(undefined);
+
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("C<mark>o</mark>nstituency");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2)).toBe(undefined);
+      });
+      
+      it('should be navigatable and filterable (prefix = "o") using containerItems', function () {
+        var menu = OwnContainerMenu.create(list,ExampleItemList);
+        menu._firstActive = true;
+        menu.limit(2);
+
+        expect(menu.prefix("o").show()).toBe(true);
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("C<mark>o</mark>nstituency");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Next (1)
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("C<mark>o</mark>nstituency");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(menu.shownItem(2)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Next (2)
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Part-<mark>o</mark>f-Speech");
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(menu.shownItem(2)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Next (3) - to first container Item
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Part-<mark>o</mark>f-Speech");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(true);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+          // Next (4) - to second container Item
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Part-<mark>o</mark>f-Speech");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(true);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Next (5) - to prefix
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Part-<mark>o</mark>f-Speech");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(true); //prefix
+
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("C<mark>o</mark>nstituency");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+      });
+      
+      it('should be navigatable and filterable (prefix = "ex", "e") with containerItems', function () {
+        var menu = OwnContainerMenu.create(listWithEX,ExampleItemList);
+        menu._firstActive = true;
+        menu.limit(3);
+
+        expect(menu.prefix("ex").show()).toBe(true);
+        expect(menu.prefix()).toEqual('ex');
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("<mark>ex</mark>ample 1 Constituency");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("<mark>ex</mark>ample 2 Morphology");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(3)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Next (1)
+        menu.next();
+        expect(menu.prefix()).toEqual('ex');
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("<mark>ex</mark>ample 1 Constituency");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("<mark>ex</mark>ample 2 Morphology");
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(menu.shownItem(3)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Next (2)
+        menu.next();
+        expect(menu.prefix()).toEqual('ex');
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("<mark>ex</mark>ample 1 Constituency");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("<mark>ex</mark>ample 2 Morphology");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(3)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(true);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        //Roll to Prefix
+        menu.next();
+        menu.next();
+        expect(menu.prefix()).toEqual('ex');
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("<mark>ex</mark>ample 1 Constituency");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("<mark>ex</mark>ample 2 Morphology");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(3)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(true); //prefix
+
+        // Reset limit
+        menu.limit(5);
+
+        // Change show
+        expect(menu.prefix("e").show()).toBe(true);
+        expect(menu._prefix.active()).toBe(false);
+        expect(menu.prefix()).toEqual('e');
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("<mark>e</mark>xampl<mark>e</mark> 1 Constitu<mark>e</mark>ncy");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("<mark>e</mark>xampl<mark>e</mark> 2 Morphology");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(3)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Next (1)
+        menu.next();
+        expect(menu._prefix.active()).toBe(false);
+        expect(menu.prefix()).toEqual('e');
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("<mark>e</mark>xampl<mark>e</mark> 1 Constitu<mark>e</mark>ncy");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("<mark>e</mark>xampl<mark>e</mark> 2 Morphology");
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(menu.shownItem(3)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Next (2)
+        menu.next();
+        expect(menu._prefix.active()).toBe(false);
+        expect(menu.prefix()).toEqual('e');
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("<mark>e</mark>xampl<mark>e</mark> 1 Constitu<mark>e</mark>ncy");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("<mark>e</mark>xampl<mark>e</mark> 2 Morphology");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(3)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(true);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+
+        // Next (3)
+        menu.next();
+        menu.next();
+        expect(menu._prefix.active()).toBe(true);
+        expect(menu.prefix()).toEqual('e');
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("<mark>e</mark>xampl<mark>e</mark> 1 Constitu<mark>e</mark>ncy");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("<mark>e</mark>xampl<mark>e</mark> 2 Morphology");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(3)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(true); //prefix
+      });
+
+
+      it('should be filterable (multiple prefix = "pro sin")', function () {
+        var menu = OwnContainerMenu.create(listMultiPrefix);
+        menu._firstActive = true;
+
+        menu.limit(2);
+        expect(menu.prefix("pro sin").show()).toBe(true);
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual(
+          "Personal <mark>Pro</mark>noun, <mark>Sin</mark>gular"
+        );
+
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Personal <mark>Pro</mark>noun, <mark>Sin</mark>gular, Accusative");
+        expect(menu.shownItem(1).active()).toBe(false);
+
+        expect(menu.shownItem(2)).toBe(undefined);
+      });
+
+      it('should be filterable (trimming = " p")', function () {
+        var menu = OwnContainerMenu.create(listMultiPrefix);
+        // menu._firstActive = true;
+
+        menu.limit(2);
+        expect(menu.show()).toBe(true);
+        menu._prefix.add(" ");
+        expect(menu.show()).toBe(true);
+        menu._prefix.add("p")
+        expect(menu.show()).toBe(true);
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("<mark>P</mark>ersonal <mark>P</mark>ronoun");
+      });
+
+      
+      it('should choose prefix with failing prefix (1)', function () {
+        var menu = OwnContainerMenu.create(list);
+        menu.limit(2);
+        expect(menu.prefix("exit").show()).toBe(true);
+        expect(menu.element().querySelector('li')).toBe(null);
+        expect(menu.shownItem(0)).toBeUndefined();
+        expect(menu._prefix.active()).toBe(true);
+      });
+
+
+      it('should choose prefix with failing prefix (2)', function () {
+        var menu = OwnContainerMenu.create(list);
+        menu.limit(2);
+        expect(menu.show()).toBe(true);
+        expect(menu.prefix("exit").show()).toBe(true);
+        expect(menu.element().querySelector('li')).toBe(null);
+        expect(menu.shownItem(0)).toBeUndefined();
+        expect(menu._prefix.active()).toBe(true);
+      });
+
+      it('should ignore navigation with failing prefix', function () {
+        var menu = OwnContainerMenu.create(list);
+        menu.limit(2);
+        expect(menu.show()).toBe(true);
+
+        menu.next();
+
+        expect(menu.prefix("exit").show()).toBe(true);
+        expect(menu.element().querySelector('li')).toBe(null);
+        expect(menu.shownItem(0)).toBeUndefined();
+        expect(menu._prefix.active()).toBe(true);
+
+        menu.next();
+        expect(menu._prefix.active()).toBe(true);
+
+        menu.prev();
+        expect(menu._prefix.active()).toBe(true);
+
+      });
+
+      it('should be navigatable with prefix', function () {
+        var menu = OwnContainerMenu.create(demolist);
+        menu._firstActive = true;
+
+        menu.limit(3);
+
+        expect(menu.show()).toBe(true);
+        expect(menu.prefix()).toEqual("");
+
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Titel");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Untertitel");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.shownItem(3)).toBe(undefined);
+
+        menu._prefix.add('a');
+        expect(menu.show()).toBe(true);
+        expect(menu.prefix()).toEqual("a");
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("<mark>A</mark>utor");
+
+        menu._prefix.add('u');
+        expect(menu.show()).toBe(true);
+        expect(menu.prefix()).toEqual("au");
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("<mark>Au</mark>tor");
+
+        menu._prefix.chop();
+        expect(menu.show()).toBe(true);
+        expect(menu.prefix()).toEqual("a");
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("<mark>A</mark>utor");
+
+        menu._prefix.chop();
+        expect(menu.show()).toBe(true);
+        expect(menu.prefix()).toEqual("");
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Titel");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Untertitel");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.shownItem(3)).toBe(undefined);
+
+        // Forward
+        menu._prefix.chop();
+        expect(menu.show()).toBe(true);
+        expect(menu.prefix()).toEqual("");
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Titel");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Untertitel");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+        expect(menu.shownItem(2).active()).toBe(false);
+
+        // Forward
+        menu.next();
+        expect(menu.prefix()).toEqual("");
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Titel");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Untertitel");
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.shownItem(3)).toBe(undefined);
+
+        // Forward
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(menu.prefix()).toEqual("");
+        expect(liElements[0].innerHTML).toEqual("Titel");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Untertitel");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+        expect(menu.shownItem(2).active()).toBe(true);
+        expect(menu.shownItem(3)).toBe(undefined);
+
+        // Forward
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(menu.prefix()).toEqual("");
+        expect(liElements[0].innerHTML).toEqual("Untertitel");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Veröffentlichungsdatum");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Länge");
+        expect(menu.shownItem(2).active()).toBe(true);
+        expect(menu.shownItem(3)).toBe(undefined);
+
+        // Forward
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(menu.prefix()).toEqual("");
+        expect(liElements[0].innerHTML).toEqual("Veröffentlichungsdatum");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Länge");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Autor");
+        expect(menu.shownItem(2).active()).toBe(true);
+        expect(menu.shownItem(3)).toBe(undefined);
+
+        // Forward
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(menu.prefix()).toEqual("");
+        expect(liElements[0].innerHTML).toEqual("Titel");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Untertitel");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+        expect(menu.shownItem(2).active()).toBe(false);
+      });
+
+      it('should be navigatable with prefix and containerItems', function () {
+        var menu = OwnContainerMenu.create(demolist,ExampleItemList);
+        menu._firstActive = true;
+
+        menu.limit(3);
+
+        expect(menu.show()).toBe(true);
+        expect(menu.prefix()).toEqual("");
+
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Titel");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Untertitel");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.shownItem(3)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        menu._prefix.add('a');
+        expect(menu.show()).toBe(true);
+        expect(menu.prefix()).toEqual("a");
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("<mark>A</mark>utor");
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        menu._prefix.add('u');
+        expect(menu.show()).toBe(true);
+        expect(menu.prefix()).toEqual("au");
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("<mark>Au</mark>tor");
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        menu._prefix.chop();
+        expect(menu.show()).toBe(true);
+        expect(menu.prefix()).toEqual("a");
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("<mark>A</mark>utor");
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        menu._prefix.chop();
+        expect(menu.show()).toBe(true);
+        expect(menu.prefix()).toEqual("");
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Titel");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Untertitel");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.shownItem(3)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Forward
+        menu._prefix.chop();
+        expect(menu.show()).toBe(true);
+        expect(menu.prefix()).toEqual("");
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Titel");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Untertitel");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Forward
+        menu.next();
+        expect(menu.prefix()).toEqual("");
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Titel");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Untertitel");
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.shownItem(3)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Forward
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(menu.prefix()).toEqual("");
+        expect(liElements[0].innerHTML).toEqual("Titel");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Untertitel");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+        expect(menu.shownItem(2).active()).toBe(true);
+        expect(menu.shownItem(3)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Forward
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(menu.prefix()).toEqual("");
+        expect(liElements[0].innerHTML).toEqual("Untertitel");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Veröffentlichungsdatum");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Länge");
+        expect(menu.shownItem(2).active()).toBe(true);
+        expect(menu.shownItem(3)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Forward
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(menu.prefix()).toEqual("");
+        expect(liElements[0].innerHTML).toEqual("Veröffentlichungsdatum");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Länge");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Autor");
+        expect(menu.shownItem(2).active()).toBe(true);
+        expect(menu.shownItem(3)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Forward
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(menu.prefix()).toEqual("");
+        expect(liElements[0].innerHTML).toEqual("Veröffentlichungsdatum");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Länge");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Autor");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.shownItem(3)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(true);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Forward
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(menu.prefix()).toEqual("");
+        expect(liElements[0].innerHTML).toEqual("Veröffentlichungsdatum");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Länge");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Autor");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.shownItem(3)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(true);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+        
+        // Forward
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(menu.prefix()).toEqual("");
+        expect(liElements[0].innerHTML).toEqual("Titel");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Untertitel");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+      });
+
+      it('should be navigatable with a prefix (1) and containerItems', function () {
+        var menu = OwnContainerMenu.create(demolist, ExampleItemList);
+        menu._firstActive = true;
+
+        menu.limit(3);
+
+        expect(menu.show()).toBe(true);
+        expect(menu.prefix()).toEqual("");
+
+        // Add prefix in uppercase - but check in lowercase
+        menu.prefix('El');
+        expect(menu.show()).toBe(true);
+
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(menu.prefix()).toEqual("El");
+        expect(menu._prefix.active()).toEqual(false);
+        expect(liElements[0].innerHTML).toEqual("Tit<mark>el</mark>");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Untertit<mark>el</mark>");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Forward
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(menu.prefix()).toEqual("El");
+        expect(menu._prefix.active()).toEqual(false);
+        expect(liElements[0].innerHTML).toEqual("Tit<mark>el</mark>");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Untertit<mark>el</mark>");
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(menu.shownItem(2)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Forward
+        menu.next();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(menu.prefix()).toEqual("El");
+        expect(liElements[0].innerHTML).toEqual("Tit<mark>el</mark>");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Untertit<mark>el</mark>");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(true);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        menu.next();
+        menu.next();
+
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(menu.prefix()).toEqual("El");
+        expect(liElements[0].innerHTML).toEqual("Tit<mark>el</mark>");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Untertit<mark>el</mark>");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(true); //prefix
+
+        // Backward
+        menu.prev();
+        menu.prev();
+        menu.prev();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(menu.prefix()).toEqual("El");
+        expect(menu._prefix.active()).toEqual(false);
+        expect(liElements[0].innerHTML).toEqual("Tit<mark>el</mark>");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Untertit<mark>el</mark>");
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(menu.shownItem(2)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+      });
+
+
+      it('should be navigatable with a prefix (2) and containerItems', function () {
+        var menu = OwnContainerMenu.create(demolist,ExampleItemList);
+        menu._firstActive = true;
+
+        menu.limit(3);
+        expect(menu.show()).toBe(true);
+        expect(menu.prefix()).toEqual("");
+        menu.prefix('el');
+        expect(menu.show()).toBe(true);
+
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(menu.prefix()).toEqual("el");
+        expect(menu._prefix.active()).toEqual(false);
+        expect(liElements[0].innerHTML).toEqual("Tit<mark>el</mark>");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Untertit<mark>el</mark>");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Backward
+        menu.prev();
+        expect(menu._prefix.active()).toEqual(true);
+
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Tit<mark>el</mark>");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Untertit<mark>el</mark>");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(true); //prefix
+
+        // Backward
+        menu.prev();
+        menu.prev();
+        menu.prev();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(menu._prefix.active()).toEqual(false);
+        expect(liElements[0].innerHTML).toEqual("Tit<mark>el</mark>");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Untertit<mark>el</mark>");
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(menu.shownItem(2)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+      });
+
+      it('should be navigatable with a prefix (3) and containerItems', function () {
+        var menu = OwnContainerMenu.create(demolist,ExampleItemList);
+        menu._firstActive = true;
+        menu.limit(3);
+        expect(menu.show()).toBe(true);
+        expect(menu.prefix()).toEqual("");
+        menu.prefix('el');
+        expect(menu.show()).toBe(true);
+
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(menu.prefix()).toEqual("el");
+        expect(menu._prefix.active()).toEqual(false);
+        expect(liElements[0].innerHTML).toEqual("Tit<mark>el</mark>");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Untertit<mark>el</mark>");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Backward
+        menu.prev();
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(menu._prefix.active()).toEqual(true);
+        expect(liElements[0].innerHTML).toEqual("Tit<mark>el</mark>");
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(liElements[1].innerHTML).toEqual("Untertit<mark>el</mark>");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(true); //prefix
+
+
+        // Forward
+        menu.next();
+        expect(menu.prefix()).toEqual("el");
+        expect(menu._prefix.active()).toEqual(false);
+        var liElements = menu.directElementChildrenByTagName("li");
+        expect(liElements[0].innerHTML).toEqual("Tit<mark>el</mark>");
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(liElements[1].innerHTML).toEqual("Untertit<mark>el</mark>");
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+      });
+
+      it('should show screens by offset', function () {
+        var menu = OwnContainerMenu.create(demolist,ExampleItemList);
+        menu.limit(3);
+        expect(menu.show()).toBe(true);
+
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Highlight the first entry
+        menu.next();
+
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2).active()).toBe(false);
+
+        // Highlight the second entry
+        menu.next();
+
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.shownItem(3)).toBe(undefined);
+
+        expect(menu.shownItem(0).lcField()).toEqual(' titel');
+        expect(menu.shownItem(1).lcField()).toEqual(' untertitel');
+
+        // Move to first screen
+        menu.screen(0);
+        expect(menu.shownItem(0).lcField()).toEqual(' titel');
+        expect(menu.shownItem(1).lcField()).toEqual(' untertitel');
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.shownItem(3)).toBe(undefined);
+
+        // Move to second screen
+        menu.screen(1);
+        expect(menu.shownItem(0).lcField()).toEqual(' untertitel');
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.shownItem(3)).toBe(undefined);
+
+        menu.screen(2);
+        expect(menu.shownItem(0).lcField()).toEqual(' veröffentlichungsdatum');
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.shownItem(3)).toBe(undefined);
+
+        menu.screen(1);
+        expect(menu.shownItem(0).lcField()).toEqual(' untertitel');
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.shownItem(3)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+      });
+
+      it('should show screens by offset when prefixed', function () {
+        var menu = OwnContainerMenu.create(demolist,ExampleItemList);
+        menu.limit(3);
+        expect(menu.prefix("e").show()).toBe(true);
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        expect(menu.shownItem(0).element().innerHTML).toEqual('Tit<mark>e</mark>l');
+        menu.screen(1);
+        expect(menu.shownItem(0).element().innerHTML).toEqual('Unt<mark>e</mark>rtit<mark>e</mark>l');
+      });
+
+
+      it('should be page downable', function () {
+        var menu = OwnContainerMenu.create(demolonglist,ExampleItemList);
+        menu.limit(3);
+
+        expect(menu.show(0)).toBe(true);
+        
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(menu.shownItem(0).lcField()).toEqual(' titel');
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.shownItem(3)).toBe(undefined);
+
+        menu.pageDown();
+
+        expect(menu.shownItem(0).lcField()).toEqual(' länge');
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2).active()).toBe(false);
+
+        menu.pageDown();
+
+        expect(menu.shownItem(0).lcField()).toEqual(' corpusid');
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2).active()).toBe(false);
+
+        // Doesn't matter
+        menu.pageDown();
+
+        expect(menu.shownItem(0).lcField()).toEqual(' corpusid');
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+      });
+
+      it('should be page downable with prefix', function () {
+        var menu = OwnContainerMenu.create(demolonglist,ExampleItemList);
+        menu.limit(3);
+
+        expect(menu.prefix('e').show(0)).toBe(true);
+
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(menu.shownItem(0).lcField()).toEqual(' titel');
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(1).lcField()).toEqual(' untertitel');
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.shownItem(2).lcField()).toEqual(' veröffentlichungsdatum');
+        expect(menu.shownItem(3)).toBe(undefined);
+        
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        menu.pageDown();
+
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(0).lcField()).toEqual(' länge');
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(1).lcField()).toEqual(' genre');
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.shownItem(2).lcField()).toEqual(' textid');
+
+        // Doesn't matter
+        menu.pageDown();
+
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(0).lcField()).toEqual(' länge');
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(1).lcField()).toEqual(' genre');
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.shownItem(2).lcField()).toEqual(' textid');
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+      });
+
+
+      it('should be page upable', function () {
+        var menu = OwnContainerMenu.create(demolonglist,ExampleItemList);
+        menu.limit(3);
+
+        // Choose the final value
+        expect(menu.show(1000)).toBe(true);
+
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2).active()).toBe(true);
+        expect(menu.shownItem(2).lcField()).toEqual(' textid');
+        expect(menu.shownItem(3)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        menu.pageUp();
+
+        expect(menu.shownItem(0).lcField()).toEqual(' länge');
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2).active()).toBe(false);
+
+        menu.pageUp();
+
+        expect(menu.shownItem(0).lcField()).toEqual(' titel');
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2).active()).toBe(false);
+
+        // Doesn't matter
+        menu.pageUp();
+
+        expect(menu.shownItem(0).lcField()).toEqual(' titel');
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+      });
+
+      it('should be page upable with prefix', function () {
+        var menu = OwnContainerMenu.create(demolonglist,ExampleItemList);
+        menu.limit(3);
+
+        // Choose the final value
+        expect(menu.prefix("e").show(1000)).toBe(true);
+
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(0).lcField()).toEqual(' länge');
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(1).lcField()).toEqual(' genre');
+        expect(menu.shownItem(2).active()).toBe(true);
+        expect(menu.shownItem(2).lcField()).toEqual(' textid');
+        expect(menu.shownItem(3)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        menu.pageUp();
+
+        expect(menu.shownItem(0).lcField()).toEqual(' titel');
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(1).lcField()).toEqual(' untertitel');
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.shownItem(2).lcField()).toEqual(' veröffentlichungsdatum');
+
+        // Doesn't matter
+        menu.pageUp();
+
+        expect(menu.shownItem(0).lcField()).toEqual(' titel');
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(1).lcField()).toEqual(' untertitel');
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.shownItem(2).lcField()).toEqual(' veröffentlichungsdatum');
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+      });
+
+      it('should be view upable and downable (1)', function () {
+        var menu = OwnContainerMenu.create(demolonglist,ExampleItemList);
+        menu.limit(7);
+
+        // Choose the final value
+        expect(menu.show(1)).toBe(true);
+
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(0).lcField()).toEqual(' titel');
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.shownItem(2).lcField()).toEqual(' veröffentlichungsdatum');
+        expect(menu.shownItem(6).active()).toBe(false);
+        expect(menu.shownItem(7)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Doesn't change anything
+        menu.viewUp();
+
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(0).lcField()).toEqual(' titel');
+        expect(menu.shownItem(1).active()).toBe(true);
+
+        menu.viewDown();
+
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(menu.shownItem(0).lcField()).toEqual(' untertitel');
+        expect(menu.shownItem(1).active()).toBe(false);
+
+        menu.viewDown();
+
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(0).lcField()).toEqual(' veröffentlichungsdatum');
+        expect(menu.shownItem(1).active()).toBe(false);
+
+        // No effect anymore
+        menu.viewDown();
+
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(0).lcField()).toEqual(' veröffentlichungsdatum');
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+      });
+
+      it('should be view upable and downable (2)', function () {
+
+        // List is longer than limit
+        var menu = OwnContainerMenu.create(demolist,ExampleItemList);
+        menu.limit(7);
+
+        // Choose the final value
+        expect(menu.show(1)).toBe(true);
+
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(0).lcField()).toEqual(' titel');
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.shownItem(2).lcField()).toEqual(' veröffentlichungsdatum');
+        expect(menu.shownItem(4).active()).toBe(false);
+        expect(menu.shownItem(5)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Doesn't change anything
+        menu.viewUp();
+
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(0).lcField()).toEqual(' titel');
+        expect(menu.shownItem(1).active()).toBe(true);
+
+        menu.viewDown();
+
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(0).lcField()).toEqual(' titel');
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+      });      
+
+      
+      it('should scroll to a chosen value (1)', function () {
+        var menu = OwnContainerMenu.create(demolist,ExampleItemList);
+        menu.limit(3);
+
+        // Choose value 1
+        expect(menu.show(1)).toBe(true);
+
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(0).lcField()).toEqual(' titel');
+        expect(menu.shownItem(1).active()).toBe(true);
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.shownItem(3)).toBe(undefined);
+        expect(menu.container().items[0].active()).toBe(false);
+        expect(menu.container().items[1].active()).toBe(false);
+        expect(menu.container().items[2].active()).toBe(false); //prefix
+
+        // Choose value 2
+        expect(menu.show(2)).toBe(true);
+
+        expect(menu.shownItem(0).active()).toBe(false);
+        expect(menu.shownItem(0).lcField()).toEqual(' titel');
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2).active()).toBe(true);
+        expect(menu.shownItem(3)).toBe(undefined);
+      });
+
+      it('should scroll to a chosen value (2)', function () {
+        var menu = OwnContainerMenu.create(demolonglist,ExampleItemList);
+
+        // Choose value 3
+        expect(menu.limit(3).show(3)).toBe(true);
+        expect(menu.shownItem(0).lcField()).toEqual(' länge');
+        expect(menu.shownItem(0).active()).toBe(true);
+        expect(menu.shownItem(1).active()).toBe(false);
+        expect(menu.shownItem(2).active()).toBe(false);
+        expect(menu.shownItem(3)).toBe(undefined);
+      });
+
+      xit('should scroll to a chosen value after prefixing, if the chosen value is live');
+      
+      it('should be extendable', function () {
+          var menu = OwnContainerMenu.create([],ExampleItemList);
+          let entryData = 'empty';
+          menu._itemClass = menuItemClass;
+          menu.readItems([
+          ['a', '', function () { entryData = 'a' }],
+          ['bb', '', function () { entryData = 'bb' }],
+          ['ccc', '', function () { entryData = 'ccc' }],
+        ]);
+        expect(menu.limit(3).show(3)).toBe(true);
+        expect(menu.shownItem(0).lcField()).toEqual(' a');
+        expect(menu.shownItem(1).lcField()).toEqual(' bb');
+        expect(menu.shownItem(2).lcField()).toEqual(' ccc');
+        expect(entryData).toEqual('empty');
+        menu.shownItem(1).element().click();
+        expect(entryData).toEqual('bb');
+        expect(menu.lengthField().element().innerText).toEqual("a--bb--ccc--")
+        expect(menu.slider().length()).toEqual(3);
+        let obj = menu.itemClass().create(
+          ['dddd','',function () { entryData = 'dddd'} ]
+        );
+        menu.append(obj);
+        expect(menu.limit(2).show(1)).toBe(true);
+        expect(menu.shownItem(0).lcField()).toEqual(' a');
+        expect(menu.shownItem(1).lcField()).toEqual(' bb');
+        menu.next();
+        expect(menu.shownItem(1).lcField()).toEqual(' ccc');
+        menu.next();
+        expect(menu.shownItem(1).lcField()).toEqual(' dddd');
+        menu.next();
+        menu.next();
+        menu.next();
+        expect(menu.shownItem(0).lcField()).toEqual(' a');
+        expect(menu.lengthField().element().innerText).toEqual("a--bb--ccc--dddd--")
+        expect(menu.slider().length()).toEqual(4);
+      });
+    });
+    describe('Container', function () {
+      it("should be initializable with no additional container items", function () {
+        var list = [
+          ["Constituency"],
+          ["Lemma"],
+          ["Morphology"],
+          ["Part-of-Speech"],
+          ["Syntax"]
+        ];
+        var menu = OwnContainerMenu.create(list);
+        var container = menu.container();
+        expect(container._containerItemClass).toEqual(OwnContainerItemClass);
+        expect(container.element().nodeName).toEqual("UL");
+        expect(container.element().classList.contains("menu")).toBeTruthy();
+        expect(container.element().classList.contains("visible")).toBeFalsy();
+        expect(menu._prefix).toEqual(container._prefix);
+        expect(container.length()).toEqual(1);
+        expect(container.length()).toEqual(container.items.length);
+        expect(container.liveLength()).toEqual(0);
+        expect(container.item(0)).toEqual(container._prefix);
+        expect(container.active()).toBeFalsy();
+        expect(menu.directElementChildrenByTagName("pref")).toEqual([]);
+        expect(container.element().getElementsByClassName("pref").length).toEqual(1);
+        
+
+
+        menu.prefix("ad");
+        expect(container.liveLength()).toEqual(1);
+        menu.prev();
+        expect(container.active()).toBeTruthy();
+
+        
+      });
+
+    });
+  });
diff --git a/dev/js/spec/menuSpec.js b/dev/js/spec/menuSpec.js
index 664a5b9..5ef5efc 100644
--- a/dev/js/spec/menuSpec.js
+++ b/dev/js/spec/menuSpec.js
@@ -3,9 +3,9 @@
   function (menuClass, menuItemClass, prefixClass, lengthFieldClass) {
  
     // The OwnMenu item
-    KorAP.OwnMenuItem = {
+    const OwnMenuItem = {
       create : function (params) {
-        return Object.create(menuItemClass).upgradeTo(KorAP.OwnMenuItem)._init(params);
+        return Object.create(menuItemClass).upgradeTo(this)._init(params);
       },
       content : function (content) {
         if (arguments.length === 1) {
@@ -25,20 +25,20 @@
     };
 
     // The OwnMenu
-    KorAP.OwnMenu = {
+    const OwnMenu = {
       create : function (list) {
         return Object.create(menuClass)
-	        .upgradeTo(KorAP.OwnMenu)
-	        ._init(list, { itemClass : KorAP.OwnMenuItem });
+	        .upgradeTo(this)
+	        ._init(list, { itemClass : OwnMenuItem });
       }
     };
 
 
     // HintMenuItem
-    KorAP.HintMenuItem = {
+    const HintMenuItem = {
       create : function (params) {
         return Object.create(menuItemClass)
-	        .upgradeTo(KorAP.HintMenuItem)
+	        .upgradeTo(this)
 	        ._init(params);
       },
       content : function (content) {
@@ -99,11 +99,11 @@
 
 
     // HintMenu
-    KorAP.HintMenu = {
+    const HintMenu = {
       create : function (context, list) {
         var obj = Object.create(menuClass)
-	          .upgradeTo(KorAP.HintMenu)
-	          ._init(list, {itemClass : KorAP.HintMenuItem});
+	          .upgradeTo(this)
+	          ._init(list, {itemClass : HintMenuItem});
         obj._context = context;
         return obj;
       }
@@ -111,10 +111,10 @@
 
 
     // The ComplexMenuItem
-    KorAP.ComplexMenuItem = {
+    const ComplexMenuItem = {
       create : function (params) {
         return Object.create(menuItemClass)
-	        .upgradeTo(KorAP.ComplexMenuItem)
+	        .upgradeTo(this)
 	        ._init(params);
       },
       content : function (content) {
@@ -149,21 +149,21 @@
         ).toThrow(new Error("Missing parameters"));
 
         expect(
-	        function() { KorAP.OwnMenuItem.create([]) }
+	        function() { OwnMenuItem.create([]) }
         ).toThrow(new Error("Missing parameters"));
 
-        var mi = KorAP.OwnMenuItem.create(["Baum"]);
+        var mi = OwnMenuItem.create(["Baum"]);
         expect(mi.element().firstChild.nodeValue).toEqual('Baum');
         expect(mi.lcField()).toEqual(' baum');
       });
 
       it('shouldn\'t have a reference to the menu', function () {
-        var menuItem = KorAP.OwnMenuItem.create(['Test']);
+        var menuItem = OwnMenuItem.create(['Test']);
         expect(menuItem.menu()).toBe(undefined);
       });
 
       it('should be activatable and deactivateable by class', function () {
-        var menuItem = KorAP.OwnMenuItem.create(['Test']);
+        var menuItem = OwnMenuItem.create(['Test']);
 
         expect(menuItem.active()).toBe(false);
         expect(menuItem.element().getAttribute("class")).toBe(null);
@@ -177,7 +177,7 @@
         expect(menuItem.active()).toBe(true);
         expect(menuItem.element().getAttribute("class")).toEqual("active");
 
-        menuItem = KorAP.OwnMenuItem.create(['Spiegel']);
+        menuItem = OwnMenuItem.create(['Spiegel']);
         expect(menuItem.active()).toBe(false);
         expect(menuItem.element().getAttribute("class")).toBe(null);
         menuItem.active(false); // Is not active
@@ -186,7 +186,7 @@
       });
 
       it('should be set to boundary', function () {
-        var menuItem = KorAP.OwnMenuItem.create(['CoreNLP']);
+        var menuItem = OwnMenuItem.create(['CoreNLP']);
         expect(menuItem.active()).toBe(false);
         expect(menuItem.element().getAttribute("class")).toBe(null);
 
@@ -225,7 +225,7 @@
 
       it('should be highlightable', function () {
         // Highlight in the middle
-        var menuItem = KorAP.OwnMenuItem.create(['CoreNLP']);
+        var menuItem = OwnMenuItem.create(['CoreNLP']);
         menuItem.highlight("ren");
         expect(menuItem.element().innerHTML).toEqual("Co<mark>reN</mark>LP");
 
@@ -235,7 +235,7 @@
         var plain = "<div><h1>CoreNLP</h1><h2>corenlp/</h2></div>";
 
         // Starting highlight
-        menuItem = KorAP.ComplexMenuItem.create(['CoreNLP', 'corenlp/']);
+        menuItem = ComplexMenuItem.create(['CoreNLP', 'corenlp/']);
         menuItem.highlight("cor");
         expect(menuItem.element().innerHTML).toEqual("<div><h1><mark>Cor</mark>eNLP</h1><h2><mark>cor</mark>enlp/</h2></div>");
 
@@ -243,7 +243,7 @@
         expect(menuItem.element().innerHTML).toEqual(plain);
 
         // Starting highlight - short
-        menuItem = KorAP.ComplexMenuItem.create(['CoreNLP', 'corenlp/']);
+        menuItem = ComplexMenuItem.create(['CoreNLP', 'corenlp/']);
         menuItem.highlight("c");
         expect(menuItem.element().innerHTML).toEqual("<div><h1><mark>C</mark>oreNLP</h1><h2><mark>c</mark>orenlp/</h2></div>");
 
@@ -251,7 +251,7 @@
         expect(menuItem.element().innerHTML).toEqual(plain);
 
         // Highlight at the end
-        menuItem = KorAP.ComplexMenuItem.create(['CoreNLP', 'corenlp/']);
+        menuItem = ComplexMenuItem.create(['CoreNLP', 'corenlp/']);
         menuItem.highlight("nlp");
         expect(menuItem.element().innerHTML).toEqual("<div><h1>Core<mark>NLP</mark></h1><h2>core<mark>nlp</mark>/</h2></div>");
 
@@ -259,7 +259,7 @@
         expect(menuItem.element().innerHTML).toEqual(plain);
 
         // Highlight at the end - short
-        menuItem = KorAP.ComplexMenuItem.create(['CoreNLP', 'corenlp/']);
+        menuItem = ComplexMenuItem.create(['CoreNLP', 'corenlp/']);
         menuItem.highlight("p");
         expect(menuItem.element().innerHTML).toEqual("<div><h1>CoreNL<mark>P</mark></h1><h2>corenl<mark>p</mark>/</h2></div>");
 
@@ -267,7 +267,7 @@
         expect(menuItem.element().innerHTML).toEqual(plain);
 
         // No highlight
-        menuItem = KorAP.ComplexMenuItem.create(['CoreNLP', 'corenlp/']);
+        menuItem = ComplexMenuItem.create(['CoreNLP', 'corenlp/']);
         menuItem.highlight("xp");
         expect(menuItem.element().innerHTML).toEqual(plain);
 
@@ -275,7 +275,7 @@
         expect(menuItem.element().innerHTML).toEqual(plain);
 
         // Highlight in the middle - first
-        menuItem = KorAP.ComplexMenuItem.create(['CoreNLP', 'corenlp/', 'This is my Example']);
+        menuItem = ComplexMenuItem.create(['CoreNLP', 'corenlp/', 'This is my Example']);
         menuItem.highlight("ren");
         expect(menuItem.element().innerHTML).toEqual("<div><h1>Co<mark>reN</mark>LP</h1><h2>co<mark>ren</mark>lp/</h2><h3>This is my Example</h3></div>");
 
@@ -285,7 +285,7 @@
         expect(menuItem.element().innerHTML).toEqual(plain);
 
         // Highlight in the middle - second
-        menuItem = KorAP.ComplexMenuItem.create(['CoreNLP', 'corenlp/', 'This is my Example']);
+        menuItem = ComplexMenuItem.create(['CoreNLP', 'corenlp/', 'This is my Example']);
         menuItem.highlight("ampl");
         expect(menuItem.element().innerHTML).toEqual("<div><h1>CoreNLP</h1><h2>corenlp/</h2><h3>This is my Ex<mark>ampl</mark>e</h3></div>");
 
@@ -293,7 +293,7 @@
         expect(menuItem.element().innerHTML).toEqual(plain);
 
         // Highlight in the middle - both
-        menuItem = KorAP.ComplexMenuItem.create(['CoreNLP', 'corenlp/', 'This is my Example']);
+        menuItem = ComplexMenuItem.create(['CoreNLP', 'corenlp/', 'This is my Example']);
         menuItem.highlight("e");
 
         expect(menuItem.element().innerHTML).toEqual("<div><h1>Cor<mark>e</mark>NLP</h1><h2>cor<mark>e</mark>nlp/</h2><h3>This is my <mark>E</mark>xampl<mark>e</mark></h3></div>");
@@ -302,7 +302,7 @@
         expect(menuItem.element().innerHTML).toEqual(plain);
 
         // Highlight in the end - second
-        menuItem = KorAP.ComplexMenuItem.create(['CoreNLP', 'corenlp/', 'This is my Example']);
+        menuItem = ComplexMenuItem.create(['CoreNLP', 'corenlp/', 'This is my Example']);
         menuItem.highlight("le");
         expect(menuItem.element().innerHTML).toEqual("<div><h1>CoreNLP</h1><h2>corenlp/</h2><h3>This is my Examp<mark>le</mark></h3></div>");
 
@@ -310,7 +310,7 @@
         expect(menuItem.element().innerHTML).toEqual(plain);
 
         // Highlight at the beginning - second
-        menuItem = KorAP.ComplexMenuItem.create(['CoreNLP', 'corenlp/', 'This is my Example']);
+        menuItem = ComplexMenuItem.create(['CoreNLP', 'corenlp/', 'This is my Example']);
         menuItem.highlight("this");
         expect(menuItem.element().innerHTML).toEqual("<div><h1>CoreNLP</h1><h2>corenlp/</h2><h3><mark>This</mark> is my Example</h3></div>");
 
@@ -373,10 +373,10 @@
 	        ["Syntax"]
         ];
 
-        var menu = KorAP.OwnMenu.create(list);
+        var menu = OwnMenu.create(list);
         expect(menu.dontHide).toBe(false);
         menu._firstActive = true;
-        expect(menu.itemClass()).toEqual(KorAP.OwnMenuItem);
+        expect(menu.itemClass()).toEqual(OwnMenuItem);
         expect(menu.element().nodeName).toEqual('UL');
         expect(menu.element().classList.contains('visible')).toBeFalsy();
         expect(menu.limit()).toEqual(8);
@@ -404,157 +404,172 @@
       });
 
       it('should have a reference to the menu', function () {
-        var menu = KorAP.HintMenu.create("cnx/", list);
+        var menu = HintMenu.create("cnx/", list);
         expect(menu.item(0).menu()).toEqual(menu);
 
-        menu = KorAP.HintMenu.create("cnx/", list);
+        menu = HintMenu.create("cnx/", list);
         expect(menu.element().menu).toEqual(menu);
       });
+      
+      it('should only remove direct descendants with removeItems', function () {
+        var menu = HintMenu.create("cnx/", list);
+        var newUL = document.createElement("ul");
+        var newLI = document.createElement("li");
+        newUL.appendChild(newLI);
+        //This is a very constructed example, but this actually happens within containerMenu
+        menu.element().appendChild(newUL);
+        expect(menu.element().childNodes[3].nodeName).toEqual("UL");
+        expect(menu.element().childNodes[3].childNodes[0]).toEqual(newLI);
+        menu.prefix("a"); //to call show
+        expect(menu.element().childNodes[3].nodeName).toEqual("UL");
+        expect(menu.element().childNodes[3].childNodes[0]).toEqual(newLI);
+        
+      });
 
 
       it('should be visible', function () {
-        var menu = KorAP.HintMenu.create("cnx/", list);
+        var menu = HintMenu.create("cnx/", list);
         expect(menu.removeItems()).toBe(undefined);
         menu.limit(3);
 
         expect(menu.show()).toBe(true);
 
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
-        expect(menu.element().getElementsByTagName("li")[1].getAttribute("data-action")).toEqual("l=");
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].getAttribute("data-action")).toEqual("l=");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
 
         // Check boundaries
-        expect(menu.element().getElementsByTagName("li")[0].classList.contains("no-more")).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[1].classList.contains("no-more")).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[2].classList.contains("no-more")).toBe(false);
+        expect(menu.directElementChildrenByTagName("li")[0].classList.contains("no-more")).toBe(true);
+        expect(menu.directElementChildrenByTagName("li")[1].classList.contains("no-more")).toBe(false);
+        expect(menu.directElementChildrenByTagName("li")[2].classList.contains("no-more")).toBe(false);
       });
 
       it('should be filterable', function () {
-        var menu = KorAP.HintMenu.create("cnx/", list);
+        var menu = HintMenu.create("cnx/", list);
         menu.limit(3);
         expect(menu.prefix("o").show()).toBe(true);
         expect(menu.element().getElementsByClassName("pref")[0].innerHTML).toEqual("o");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
 
         // Check boundaries
-        expect(menu.element().getElementsByTagName("li")[0].classList.contains("no-more")).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[1].classList.contains("no-more")).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[2].classList.contains("no-more")).toBe(true);
+        expect(menu.directElementChildrenByTagName("li")[0].classList.contains("no-more")).toBe(true);
+        expect(menu.directElementChildrenByTagName("li")[1].classList.contains("no-more")).toBe(false);
+        expect(menu.directElementChildrenByTagName("li")[2].classList.contains("no-more")).toBe(true);
 
         menu.limit(2);
 
         expect(menu.prefix("o").show()).toBe(true);
         expect(menu.element().getElementsByClassName("pref")[0].innerHTML).toEqual("o");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
-        expect(menu.element().getElementsByTagName("li")[2]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[2]).toBe(undefined);
 
         // Check boundaries
-        expect(menu.element().getElementsByTagName("li")[0].classList.contains("no-more")).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[1].classList.contains("no-more")).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[2]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[0].classList.contains("no-more")).toBe(true);
+        expect(menu.directElementChildrenByTagName("li")[1].classList.contains("no-more")).toBe(false);
+        expect(menu.directElementChildrenByTagName("li")[2]).toBe(undefined);
 
         expect(menu.prefix("e").show()).toBe(true);
         expect(menu.element().getElementsByClassName("pref")[0].innerHTML).toEqual("e");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
-        expect(menu.element().getElementsByTagName("li")[2]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[2]).toBe(undefined);
 
         menu.limit(5);
         expect(menu.prefix("a").show()).toBe(true);
         expect(menu.element().getElementsByClassName("pref")[0].innerHTML).toEqual("a");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Ex<mark>a</mark>mple 1</span>");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemm<mark>a</mark></strong>");
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Ex<mark>a</mark>mple 2</span>");
-        expect(menu.element().getElementsByTagName("li")[3].innerHTML).toEqual("<strong>P<mark>a</mark>rt-of-Speech</strong>");
-        expect(menu.element().getElementsByTagName("li")[4].innerHTML).toEqual("<strong>Synt<mark>a</mark>x</strong>");
-        expect(menu.element().getElementsByTagName("li")[5]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Ex<mark>a</mark>mple 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Lemm<mark>a</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Ex<mark>a</mark>mple 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[3].innerHTML).toEqual("<strong>P<mark>a</mark>rt-of-Speech</strong>");
+        expect(menu.directElementChildrenByTagName("li")[4].innerHTML).toEqual("<strong>Synt<mark>a</mark>x</strong>");
+        expect(menu.directElementChildrenByTagName("li")[5]).toBe(undefined);
       });
 
       it('should be nextable', function () {
-        var menu = KorAP.HintMenu.create("cnx/", list);
+        var menu = HintMenu.create("cnx/", list);
         menu._firstActive = true;
 
         // Show only 3 items
         menu.limit(3);
         expect(menu.show()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
 
         // Activate next (1)
         menu.next();
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
         expect(menu.shownItem(1).active()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
 
         // Activate next (2)
         menu.next();
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(2).active()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
 
         // Activate next (3)
         // scroll!
         menu.next();
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Lemma</strong>");
         expect(menu.shownItem(0).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
         expect(menu.shownItem(2).active()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
 
         // Activate next (4)
         menu.next();
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(0).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Syntax</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Syntax</strong>");
         expect(menu.shownItem(2).active()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
 
         // Activate next (5) - ROLL
         menu.next();
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
 
         // Active next (6)
         menu.next();
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
         expect(menu.shownItem(1).active()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
       });
 
       it('should be nextable without active field', function () {
-        var menu = KorAP.HintMenu.create("cnx/", list);
+        var menu = HintMenu.create("cnx/", list);
         menu.limit(3);
         expect(menu.show()).toBe(true);
         menu.next();
@@ -563,38 +578,38 @@
 
 
       it('should be prevable', function () {
-        var menu = KorAP.HintMenu.create("cnx/", list);
+        var menu = HintMenu.create("cnx/", list);
         menu._firstActive = true;
         menu.limit(3);
         expect(menu.show()).toBe(true);
 
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
 
         // Activate prev (1) - roll to bottom
         menu.prev();
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(0).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Syntax</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Syntax</strong>");
         expect(menu.shownItem(2).active()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
 
         // Activate prev (2)
         menu.prev();
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(0).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
         expect(menu.shownItem(1).active()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Syntax</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Syntax</strong>");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
 
         // Activate prev (3)
         menu.prev();
@@ -604,7 +619,7 @@
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Syntax");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
 
         // Activate prev (4)
         menu.prev();
@@ -614,7 +629,7 @@
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Part-of-Speech");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
 
         // Activate prev (5)
         menu.prev();
@@ -624,7 +639,7 @@
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Morphology");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
 
         // Activate next (1)
         menu.next();
@@ -634,7 +649,7 @@
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2).name()).toEqual("Morphology");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
 
         // Activate prev (6)
         menu.prev();
@@ -647,11 +662,11 @@
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Syntax");
         expect(menu.shownItem(2).active()).toBe(true);
-        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
+        expect(menu.directElementChildrenByTagName("li")[3]).toBe(undefined);
       });
 
       it('should be prevable without active field', function () {
-        var menu = KorAP.HintMenu.create("cnx/", list);
+        var menu = HintMenu.create("cnx/", list);
         menu.limit(3);
         expect(menu.show()).toBe(true);
         menu.prev();
@@ -660,82 +675,82 @@
       });
 
       it('should be navigatable and filterable (prefix = "o")', function () {
-        var menu = KorAP.HintMenu.create("cnx/", list);
+        var menu = HintMenu.create("cnx/", list);
         menu._firstActive = true;
         menu.limit(2);
 
         expect(menu.prefix("o").show()).toBe(true);
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
         // Next (1)
         menu.next();
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2)).toBe(undefined);
 
         // Next (2)
         menu.next();
         expect(menu.shownItem(0).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Part-of-Speech");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2)).toBe(undefined);
 
         // Next (3) - to prefix
         menu.next();
         expect(menu.shownItem(0).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Part-of-Speech");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
         menu.next();
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
       });
 
 
       it('should be navigatable and filterable (prefix = "ex", "e")', function () {
-        var menu = KorAP.HintMenu.create("cnx/", list);
+        var menu = HintMenu.create("cnx/", list);
         menu._firstActive = true;
 
         menu.limit(2);
         expect(menu.prefix("ex").show()).toBe(true);
 
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
         // Next (1)
         menu.next();
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -744,11 +759,11 @@
 
         expect(menu.prefix()).toEqual('ex');
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
 
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -759,10 +774,10 @@
         expect(menu.prefix("e").show()).toBe(true);
         expect(menu._prefix.active()).toBe(false);
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -771,10 +786,10 @@
         expect(menu._prefix.active()).toBe(false);
         expect(menu.prefix()).toEqual('e');
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -782,10 +797,10 @@
         menu.next();
         expect(menu._prefix.active()).toBe(true);
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -793,35 +808,35 @@
         menu.next();
         expect(menu._prefix.active()).toBe(false);
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
       });
 
       it('should be filterable (multiple prefix = "pro sin")', function () {
-        var menu = KorAP.HintMenu.create("drukola/p=", listMultiPrefix);
+        var menu = HintMenu.create("drukola/p=", listMultiPrefix);
         menu._firstActive = true;
 
         menu.limit(2);
         expect(menu.prefix("pro sin").show()).toBe(true);
         expect(menu.shownItem(0).name()).toEqual("PPS");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual(
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual(
           "<strong>PPS</strong><span>Personal <mark>Pro</mark>noun, <mark>Sin</mark>gular</span>"
         );
 
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("PPSA");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>PPSA</strong><span>Personal <mark>Pro</mark>noun, <mark>Sin</mark>gular, Accusative</span>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>PPSA</strong><span>Personal <mark>Pro</mark>noun, <mark>Sin</mark>gular, Accusative</span>");
         expect(menu.shownItem(1).active()).toBe(false);
 
         expect(menu.shownItem(2)).toBe(undefined);
       });
 
       it('should be filterable (trimming = " p")', function () {
-        var menu = KorAP.HintMenu.create("/p=", listMultiPrefix);
+        var menu = HintMenu.create("/p=", listMultiPrefix);
         // menu._firstActive = true;
 
         menu.limit(2);
@@ -831,7 +846,7 @@
         menu._prefix.add("p")
         expect(menu.show()).toBe(true);
         expect(menu.shownItem(0).name()).toEqual("PP");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual(
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual(
           "<strong><mark>P</mark><mark>P</mark></strong>"+
             "<span><mark>P</mark>ersonal <mark>P</mark>ronoun</span>"
         );
@@ -839,7 +854,7 @@
 
       
       it('should choose prefix with failing prefix (1)', function () {
-        var menu = KorAP.HintMenu.create("cnx/", list);
+        var menu = HintMenu.create("cnx/", list);
         menu.limit(2);
         expect(menu.prefix("exit").show()).toBe(true);
         expect(menu.element().querySelector('li')).toBe(null);
@@ -849,7 +864,7 @@
 
 
       it('should choose prefix with failing prefix (2)', function () {
-        var menu = KorAP.HintMenu.create("cnx/", list);
+        var menu = HintMenu.create("cnx/", list);
         menu.limit(2);
         expect(menu.show()).toBe(true);
         expect(menu.prefix("exit").show()).toBe(true);
@@ -859,7 +874,7 @@
       });
 
       it('should ignore navigation with failing prefix', function () {
-        var menu = KorAP.HintMenu.create("cnx/", list);
+        var menu = HintMenu.create("cnx/", list);
         menu.limit(2);
         expect(menu.show()).toBe(true);
 
@@ -879,7 +894,7 @@
       });
 
       it('should be navigatable with prefix', function () {
-        var menu = KorAP.HintMenu.create("cnx/", demolist);
+        var menu = HintMenu.create("cnx/", demolist);
         menu._firstActive = true;
 
         menu.limit(3);
@@ -888,13 +903,13 @@
         expect(menu.prefix()).toEqual("");
 
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(2).active()).toBe(false);
         expect(menu.shownItem(3)).toBe(undefined);
 
@@ -902,31 +917,31 @@
         expect(menu.show()).toBe(true);
         expect(menu.prefix()).toEqual("a");
         expect(menu.shownItem(0).name()).toEqual("Autor");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong><mark>A</mark>utor</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong><mark>A</mark>utor</strong>");
 
         menu._prefix.add('u');
         expect(menu.show()).toBe(true);
         expect(menu.prefix()).toEqual("au");
         expect(menu.shownItem(0).name()).toEqual("Autor");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong><mark>Au</mark>tor</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong><mark>Au</mark>tor</strong>");
 
         menu._prefix.chop();
         expect(menu.show()).toBe(true);
         expect(menu.prefix()).toEqual("a");
         expect(menu.shownItem(0).name()).toEqual("Autor");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong><mark>A</mark>utor</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong><mark>A</mark>utor</strong>");
 
         menu._prefix.chop();
         expect(menu.show()).toBe(true);
         expect(menu.prefix()).toEqual("");
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(2).active()).toBe(false);
         expect(menu.shownItem(3)).toBe(undefined);
 
@@ -935,26 +950,26 @@
         expect(menu.show()).toBe(true);
         expect(menu.prefix()).toEqual("");
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(2).active()).toBe(false);
 
         // Forward
         menu.next();
         expect(menu.prefix()).toEqual("");
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(2).active()).toBe(false);
         expect(menu.shownItem(3)).toBe(undefined);
 
@@ -962,13 +977,13 @@
         menu.next();
         expect(menu.prefix()).toEqual("");
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(2).active()).toBe(true);
         expect(menu.shownItem(3)).toBe(undefined);
 
@@ -976,13 +991,13 @@
         menu.next();
         expect(menu.prefix()).toEqual("");
         expect(menu.shownItem(0).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Untertitel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Untertitel</strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Länge");
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Länge</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Länge</strong>");
         expect(menu.shownItem(2).active()).toBe(true);
         expect(menu.shownItem(3)).toBe(undefined);
 
@@ -990,13 +1005,13 @@
         menu.next();
         expect(menu.prefix()).toEqual("");
         expect(menu.shownItem(0).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Länge");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Länge</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Länge</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Autor");
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Autor</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Autor</strong>");
         expect(menu.shownItem(2).active()).toBe(true);
         expect(menu.shownItem(3)).toBe(undefined);
 
@@ -1004,19 +1019,19 @@
         menu.next();
         expect(menu.prefix()).toEqual("");
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.directElementChildrenByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(2).active()).toBe(false);
       });
 
 
       it('should be navigatable with a prefix (1)', function () {
-        var menu = KorAP.HintMenu.create("cnx/", demolist);
+        var menu = HintMenu.create("cnx/", demolist);
         menu._firstActive = true;
 
         menu.limit(3);
@@ -1031,10 +1046,10 @@
         expect(menu.prefix()).toEqual("El");
         expect(menu._prefix.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1043,10 +1058,10 @@
         expect(menu.prefix()).toEqual("El");
         expect(menu._prefix.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1055,10 +1070,10 @@
         expect(menu.prefix()).toEqual("El");
         expect(menu._prefix.active()).toEqual(true);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1067,18 +1082,18 @@
         expect(menu.prefix()).toEqual("El");
         expect(menu._prefix.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(false);
 
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2)).toBe(undefined);
       });
 
 
       it('should be navigatable with a prefix (2)', function () {
-        var menu = KorAP.HintMenu.create("cnx/", demolist);
+        var menu = HintMenu.create("cnx/", demolist);
         menu._firstActive = true;
 
         menu.limit(3);
@@ -1090,10 +1105,10 @@
         expect(menu.prefix()).toEqual("el");
         expect(menu._prefix.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1102,11 +1117,11 @@
         expect(menu._prefix.active()).toEqual(true);
 
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(false);
 
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1114,16 +1129,16 @@
         menu.prev();
         expect(menu._prefix.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2)).toBe(undefined);
       });
 
       it('should be navigatable with a prefix (3)', function () {
-        var menu = KorAP.HintMenu.create("cnx/", demolist);
+        var menu = HintMenu.create("cnx/", demolist);
         menu._firstActive = true;
         menu.limit(3);
         expect(menu.show()).toBe(true);
@@ -1134,10 +1149,10 @@
         expect(menu.prefix()).toEqual("el");
         expect(menu._prefix.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1145,10 +1160,10 @@
         menu.prev();
         expect(menu._prefix.active()).toEqual(true);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1158,17 +1173,17 @@
         expect(menu.prefix()).toEqual("el");
         expect(menu._prefix.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.directElementChildrenByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
       });
 
       it('should show screens by offset', function () {
-        var menu = KorAP.HintMenu.create('cnx/', demolist);
+        var menu = HintMenu.create('cnx/', demolist);
         menu.limit(3);
         expect(menu.show()).toBe(true);
 
@@ -1227,7 +1242,7 @@
       });
 
       it('should show screens by offset when prefixed', function () {
-        var menu = KorAP.HintMenu.create('cnx/', demolist);
+        var menu = HintMenu.create('cnx/', demolist);
         menu.limit(3);
         expect(menu.prefix("e").show()).toBe(true);
         expect(menu.shownItem(0).active()).toBe(false);
@@ -1241,7 +1256,7 @@
 
 
       it('should be page downable', function () {
-        var menu = KorAP.OwnMenu.create(demolonglist);
+        var menu = OwnMenu.create(demolonglist);
         menu.limit(3);
 
         expect(menu.show(0)).toBe(true);
@@ -1276,7 +1291,7 @@
       });
 
       it('should be page downable with prefix', function () {
-        var menu = KorAP.OwnMenu.create(demolonglist);
+        var menu = OwnMenu.create(demolonglist);
         menu.limit(3);
 
         expect(menu.prefix('e').show(0)).toBe(true);
@@ -1311,7 +1326,7 @@
 
 
       it('should be page upable', function () {
-        var menu = KorAP.OwnMenu.create(demolonglist);
+        var menu = OwnMenu.create(demolonglist);
         menu.limit(3);
 
         // Choose the final value
@@ -1347,7 +1362,7 @@
       });
 
       it('should be page upable with prefix', function () {
-        var menu = KorAP.OwnMenu.create(demolonglist);
+        var menu = OwnMenu.create(demolonglist);
         menu.limit(3);
 
         // Choose the final value
@@ -1382,7 +1397,7 @@
       });
 
       it('should be view upable and downable (1)', function () {
-        var menu = KorAP.OwnMenu.create(demolonglist);
+        var menu = OwnMenu.create(demolonglist);
         menu.limit(7);
 
         // Choose the final value
@@ -1426,7 +1441,7 @@
       it('should be view upable and downable (2)', function () {
 
         // List is longer than limit
-        var menu = KorAP.OwnMenu.create(demolist);
+        var menu = OwnMenu.create(demolist);
         menu.limit(7);
 
         // Choose the final value
@@ -1456,7 +1471,7 @@
 
       
       it('should scroll to a chosen value (1)', function () {
-        var menu = KorAP.OwnMenu.create(demolist);
+        var menu = OwnMenu.create(demolist);
         menu.limit(3);
 
         // Choose value 1
@@ -1479,7 +1494,7 @@
       });
 
       it('should scroll to a chosen value (2)', function () {
-        var menu = KorAP.OwnMenu.create(demolonglist);
+        var menu = OwnMenu.create(demolonglist);
 
         // Choose value 3
         expect(menu.limit(3).show(3)).toBe(true);
@@ -1491,6 +1506,43 @@
       });
 
       xit('should scroll to a chosen value after prefixing, if the chosen value is live');
+
+      it('should be expandable', function () {
+        var menu = menuClass.create([]);
+        let entryData = 'empty';
+        menu.readItems([
+          ['a', '', function () { entryData = 'a' }],
+          ['bb', '', function () { entryData = 'bb' }],
+          ['ccc', '', function () { entryData = 'ccc' }],
+        ]);
+
+        expect(menu.limit(3).show(3)).toBe(true);
+        expect(menu.shownItem(0).lcField()).toEqual(' a');
+        expect(menu.shownItem(1).lcField()).toEqual(' bb');
+        expect(menu.shownItem(2).lcField()).toEqual(' ccc');
+        expect(entryData).toEqual('empty');
+        menu.shownItem(1).element().click();
+        expect(entryData).toEqual('bb');
+        expect(menu.lengthField().element().innerText).toEqual("a--bb--ccc--")
+        expect(menu.slider().length()).toEqual(3);
+
+        let obj = menu.itemClass().create(
+          ['dddd','',function () { entryData = 'dddd'} ]
+        );
+        menu.append(obj);
+
+        expect(menu.limit(2).show(1)).toBe(true);
+        expect(menu.shownItem(0).lcField()).toEqual(' a');
+        expect(menu.shownItem(1).lcField()).toEqual(' bb');
+        menu.next();
+        expect(menu.shownItem(1).lcField()).toEqual(' ccc');
+        menu.next();
+        expect(menu.shownItem(1).lcField()).toEqual(' dddd');
+        menu.next();
+        expect(menu.shownItem(0).lcField()).toEqual(' a');
+        expect(menu.lengthField().element().innerText).toEqual("a--bb--ccc--dddd--")
+        expect(menu.slider().length()).toEqual(4);
+      });
     });
 
     describe('KorAP.Prefix', function () {
@@ -1593,7 +1645,7 @@
 	        ["Syntax"]
         ];
 
-        var menu = KorAP.OwnMenu.create(list);
+        var menu = OwnMenu.create(list);
 
         expect(menu.lengthField().element().children.length).toEqual(5);
       });
@@ -1622,7 +1674,7 @@
 	        ["Syntax"]
         ];
 
-        var menu = KorAP.OwnMenu.create(list);
+        var menu = OwnMenu.create(list);
 
         menu._firstActive = true;
         menu.limit(3);
@@ -1645,7 +1697,7 @@
 	        ["Syntax"]
         ];
 
-        var menu = KorAP.OwnMenu.create(list);
+        var menu = OwnMenu.create(list);
 
         menu._firstActive = true;
         menu.limit(3);
@@ -1691,7 +1743,7 @@
       });
 
       it('should correctly resize on prefixing', function () {
-        var menu = KorAP.OwnMenu.create(demolonglist);
+        var menu = OwnMenu.create(demolonglist);
         menu._firstActive = true;
         menu.limit(3);
 
@@ -1722,7 +1774,7 @@
 	        ["Syntax"]
         ];
 
-        var menu = KorAP.OwnMenu.create(list);
+        var menu = OwnMenu.create(list);
 
         menu._firstActive = true;
         menu.limit(3);
diff --git a/dev/js/spec/panelSpec.js b/dev/js/spec/panelSpec.js
index a72223d..8618369 100644
--- a/dev/js/spec/panelSpec.js
+++ b/dev/js/spec/panelSpec.js
@@ -41,7 +41,7 @@
       expect(e.lastChild.classList.contains("button-group")).toBeTruthy();
       expect(e.lastChild.firstChild).toBeFalsy();
 
-      expect(panel.actions).toBeTruthy();
+      expect(panel.actions()).toBeTruthy();
     });
 
     
@@ -49,7 +49,7 @@
       var panel = panelClass.create();
 
       controlStr = "";
-      panel.actions.add("New", {'cls':["new"]}, function () {
+      panel.actions().add("New", {'cls':["new"]}, function () {
         controlStr = 'New!!!';
       });
 
diff --git a/dev/js/spec/pluginSpec.js b/dev/js/spec/pluginSpec.js
index 43fd303..966d123 100644
--- a/dev/js/spec/pluginSpec.js
+++ b/dev/js/spec/pluginSpec.js
@@ -168,7 +168,7 @@
         }]
       });
 
-      let b = p.actions.element().firstChild;
+      let b = p.actions().element().firstChild;
       expect(b.hasAttribute("data-icon")).toBeFalsy();
       expect(b.hasAttribute("cls")).toBeFalsy();
       expect(b.getAttribute("title")).toEqual("Add");
@@ -209,7 +209,7 @@
         }]
       });
 
-      let b = p.actions.element().firstChild;
+      let b = p.actions().element().firstChild;
       expect(b.hasAttribute("data-icon")).toBeFalsy();
       expect(b.hasAttribute("cls")).toBeFalsy();
       expect(b.getAttribute("title")).toEqual("Add");
@@ -268,7 +268,7 @@
 
       expect(alertMsg).toBeUndefined();
 
-      let b = p.actions.element().firstChild;
+      let b = p.actions().element().firstChild;
       b.click();
 
       // This may only be temporary and should open the plugin window instead
@@ -307,7 +307,7 @@
 
       expect(alertMsg).toBeUndefined();
 
-      let b = p.actions.element().firstChild;
+      let b = p.actions().element().firstChild;
       b.click();
 
       // This may only be temporary and should open the plugin window instead
@@ -338,7 +338,7 @@
         }]
       });
 
-      let b = p.actions.element().firstChild;
+      let b = p.actions().element().firstChild;
       b.click();
       expect(p.element().querySelectorAll("iframe").length).toEqual(1);
       expect(p.element().querySelector("iframe").getAttribute('sandbox')).toEqual('allow-forms allow-scripts');
@@ -522,7 +522,7 @@
       });
 
       expect(manager.buttonGroup('result').length).toEqual(0);
-      expect(KorAP.Panel['result'].actions.element().innerHTML).toContain('Dosomething');
+      expect(KorAP.Panel['result'].actions().element().innerHTML).toContain('Dosomething');
 
       // Clean up
       KorAP.Panel['result'] = undefined;
@@ -553,7 +553,7 @@
       KorAP.Panel = KorAP.Panel || {};
       KorAP.Panel['result'] = resultPanel;
       expect(KorAP.Plugin.buttonGroup('result').length).toEqual(0);
-      expect(KorAP.Panel['result'].actions.element().innerHTML).toContain('Dosomething');
+      expect(KorAP.Panel['result'].actions().element().innerHTML).toContain('Dosomething');
      
       // Clean up
       KorAP.Panel['result'] = undefined;
diff --git a/dev/js/src/buttongroup.js b/dev/js/src/buttongroup.js
index 85543e4..040637f 100644
--- a/dev/js/src/buttongroup.js
+++ b/dev/js/src/buttongroup.js
@@ -9,7 +9,16 @@
     create : function (classes) {
       return Object.create(this)._init(classes);
     },
-    
+
+    /**
+     * Adopt existing button group element
+     */
+    adopt : function (element) {
+      const obj = Object.create(this);
+      obj._el = element;
+      return obj;
+    },
+
     // Initialize button group
     _init : function (classes) {
       const e = document.createElement('div');
@@ -21,7 +30,6 @@
       this._el = e;
       return this;
     },
-
     
     /**
      * Return main element
@@ -30,6 +38,16 @@
       return this._el;
     },
 
+    /**
+     * Define element following newly added buttons.
+     */
+    anchor : function (anchor) {
+      if (anchor.parentNode == this._el) {
+        this._anchor = anchor;
+        return true;
+      };
+      return false;
+    },
     
     /**
      * Upgrade this object to another object, 
@@ -44,6 +62,14 @@
       return this;
     },
 
+    _insert : function (tag = 'span') {
+      const span = document.createElement(tag);
+      if (this._anchor) {
+        this._el.insertBefore(span, this._anchor);
+        return span;
+      }
+      return this._el.appendChild(span);
+    },
     
     /**
      * Add button in order
@@ -51,8 +77,7 @@
      * Returns the button element
      */
     add : function (title, data, cb) {
-      
-      const b = this._el.addE('span');
+      const b = this._insert('span');
       b.setAttribute('title',title);
 
       if (data !== undefined) {
@@ -106,8 +131,13 @@
      * Add button that can toggle a state.
      * The state has to be a state object.
      */
+    /*
+     * addToggle() should be removed in favor of add(toggleObj)
+     * or similar, so the API of buttongroups and lists is similar
+     * for use as action plugins.
+     */
     addToggle : function (title, data, state) {
-      const b = this._el.addE('span');
+      const b = this._insert('span');
       b.setAttribute('title',title);
 
       if (data != undefined) {
diff --git a/dev/js/src/buttongroup/menu.js b/dev/js/src/buttongroup/menu.js
index 7a4f8df..4a4abfc 100644
--- a/dev/js/src/buttongroup/menu.js
+++ b/dev/js/src/buttongroup/menu.js
@@ -3,18 +3,16 @@
  */
 "use strict";
 
+// TODO:
+//   Add addToggle() method
+
 define(['menu'], function (menuClass) {
 
   return {
 
     /**
      * Create new menu object.
-     * Pass the panel object
-     * and the item parameters.
-     *
-     * @param panel The panel object
-     * @param params The match menu items
-     *   as an array of arrays.
+     * Pass the list of items and the itemClass.
      */
     create : function (list, itemClass) {
       const obj = Object.create(menuClass)
@@ -26,7 +24,7 @@
 
       // This is only domspecific
       e.addEventListener('blur', function (e) {
-	      this.menu.hide();
+	this.menu.hide();
       });
 
       e.classList.add('button-group-list');
@@ -39,9 +37,10 @@
 
 
     /**
-     * The panel object of the menu.
+     * The panel object of the menu,
+     * in case the menu was spawned by a panel.
      */
-    panel :function (panelVar) {
+    panel : function (panelVar) {
       if (panelVar !== undefined)
         this._panel = panelVar;
 
@@ -72,6 +71,30 @@
       window.addEventListener('scroll', this._onscroll);
     },
 
+
+    /**
+     * Add button in order
+     * 
+     * Returns the button element
+     */
+    add : function (title, data, cb) {
+
+      let that = this;
+
+      const cbWrap = function (e) {
+
+        // Call callback
+        let obj = that._bind || this;
+        obj.button = b;
+        cb.apply(obj)
+      };
+
+      // TODO:
+      //   support classes, data-icon and state in itemClass!
+      const b = this.itemClass().create([title, title, cbWrap]);
+      this.append(b);
+      return b;
+    },
     
     // Overwrite onHide method
     onHide : function () {
diff --git a/dev/js/src/container/container.js b/dev/js/src/container/container.js
new file mode 100644
index 0000000..9b436ca
--- /dev/null
+++ b/dev/js/src/container/container.js
@@ -0,0 +1,230 @@
+/**
+ * Container for several containerItem style items. Functions like a mini menu with next, prev, add etc propagation,
+ * but no event handling or slider or lengthField. Supposed to be subelement to a (container)menu class item.
+ * 
+ * @author Leo Repp
+ */
+
+"use strict";
+define([
+  'container/containeritem'   //TODO why does this not work!!!
+], function (
+  defaultContainerItemClass
+) {
+
+  return {
+    /**
+     * 
+     * @param {Array<object>} listOfContainerItems List of items that will be placed within the container and that realise some of the functions supplied in containeritem.js
+     * @param {object} params May contain attribute containerItemClass for a base class all containerItems build upon
+     * @returns The container object
+     */
+    create : function (listOfContainerItems, params) {
+      var obj = Object.create(this);
+      obj._init(listOfContainerItems, params);
+      return obj;
+    },
+
+    _init : function (listOfContainerItems, params){
+      if (params !== undefined && params["containerItemClass"] !== undefined){
+        this._containerItemClass = params["containerItemClass"];
+      } else {
+        this._containerItemClass = defaultContainerItemClass;
+      };
+      var el = document.createElement("ul");
+      el.style.outline = 0;
+      el.setAttribute('tabindex', 0);
+      el.classList.add('menu', 'container'); //container class allows for more stylesheet changes
+
+      this._el = el;
+      this._prefix = undefined; //required for re-setting the menus pointer correctly
+      // after having upgraded a new item scss style to the prefix object.
+
+      this.items = new Array();
+      if (listOfContainerItems !== undefined) {
+        for (let item of listOfContainerItems) {
+          this.addItem(item);
+        }
+      }
+
+      this.position = undefined; //undefined = not in container, 0 to length-1 = in container
+
+      
+      //t._el.classList.add('visible'); //Done by containermenu
+
+
+    },
+    /**
+     * Upgrade this object to another object,
+     * while private data stays intact.
+     *
+    * @param {Object} An object with properties.
+    */
+    upgradeTo : function (props) {
+      for (let prop in props) {
+        this[prop] = props[prop];
+      };
+      return this;
+    },
+
+    addItem : function (item) {
+      var cItem = this._containerItemClass.create().upgradeTo(item);
+      cItem._menu = this._menu; //if not set then undefined, but thats OK
+      this.items.push(cItem);
+      this._el.appendChild(cItem.element());
+      return cItem;
+    },
+
+    addMenu : function (menu) {
+      this._menu = menu;
+      if (this._prefix !== undefined) {
+        this._menu._prefix = this._prefix; // better than going via classList or something
+      };
+      for (let item of this.items) {
+        item._menu=menu;
+      }
+    },
+
+    addPrefix : function (prefix) {
+      prefix.isSelectable =  function () {
+        return this.isSet(); //TODO check!
+      }
+      var prefItem = this.addItem(prefix);
+      this._prefix = prefItem;
+      if (this._menu !== undefined){
+        this._menu._prefix=prefItem;
+      }
+    },
+
+    /**
+     * Exit the container unconditionally. Required so that active returns the
+     * correct result. Called when the prefix or similar resets the currently visual
+     * field.
+     */
+    exit : function () {
+      if (this.position !== undefined) {
+        this.item().active(false);
+        this.position = undefined;
+      };
+    },
+
+    element : function () {
+      return this._el;
+    },
+
+    destroy : function () {
+      for (let item of this.items){
+        delete item['_menu'];
+      }
+    },
+
+    /**
+     * @returns whether an item within the container is active (by checking this.position)
+     */
+    active : function () {
+      return this.position !== undefined;
+    },
+
+    /**
+     * Getter for items
+     * @param {Integer} index [optional] Index of to select item. If left blank this.position.
+     * @returns item at location index
+     */
+    item : function (index) {
+      if (index === undefined) return this.items[this.position];
+      return this.items[index];
+    },
+
+    /**
+     * Move on to the next item in container. Returns true if we then leave the container, false otherwise.
+     */
+    next : function() {
+      if (this.position !== undefined){
+        this.item().active(false);
+        this.position++;
+      } else {
+        this.position = 0;
+      };
+      if (this.position >= this.length()) {
+        this.position=undefined;
+        return true;
+      };
+      while (!this.item().isSelectable()) {
+        this.position++;
+        if (this.position >= this.length()) {
+          this.position=undefined;
+          return true;
+        }
+      };
+      this.item().active(true);
+      return false;
+    },
+
+    /**
+     * Move on to the previous item in container. Returns true if we then leave the container, false otherwise.
+     */
+    prev : function() {
+      if (this.position !== undefined){
+        this.item().active(false);
+        this.position = (this.position-1)
+      } else {
+        this.position = (this.items.length-1);
+      }
+      if (this.position<0) {
+        this.position=undefined;
+        return true;
+      }
+      while (!this.item().isSelectable()) {
+        this.position--;
+        if (this.position<0){
+          this.position=undefined;
+          return true;
+        };
+      };
+      this.item().active(true);
+      return false;
+    },
+
+    further : function () {
+      const item = this.item();
+      if (item["further"] !== undefined) {
+        item["further"].bind(item).apply();
+      };
+    },
+
+    enter : function (event) {
+      this.item().onclick(event);
+    },
+
+    chop : function () {
+      for (let item of this.items) {
+        item.chop();
+      }
+    },
+
+    add : function (letter) {
+      for (let item of this.items) {
+        item.add(letter);
+      }
+    },
+
+    length : function () {
+      return this.items.length;
+    },
+
+    /**
+     * 
+     * @returns The number of items that are selectable. Is the actual length of the list.
+     */
+    liveLength : function () {
+      var ll = 0;
+      for (let item of this.items){
+        if (item.isSelectable()){
+          ll++;
+        }
+      }
+      return ll;
+    }
+
+};
+});
\ No newline at end of file
diff --git a/dev/js/src/container/containeritem.js b/dev/js/src/container/containeritem.js
new file mode 100644
index 0000000..10709b8
--- /dev/null
+++ b/dev/js/src/container/containeritem.js
@@ -0,0 +1,108 @@
+/**
+ * API/ skeleton/ base class for an item contained within a container.
+ * Here we see which functions container supports for containerItems.
+ * 
+ * @author Leo Repp
+ */
+
+
+//"use strict";
+
+define({
+
+  /**
+   * API for an item contained within a container
+   */
+  create : function () {
+    return Object.create(this); //._init();
+  },
+
+  /**
+   * Upgrade this object to another object,
+   * while private data stays intact.
+   *
+   * @param {Object} An object with properties.
+   */
+  upgradeTo : function (props) {
+    for (let prop in props) {
+      this[prop] = props[prop];
+    };
+    return this;
+  },
+
+  /**
+   * Check or set if the item is active
+   *
+   * @param {boolean|null} State of activity
+   */
+  active : function (bool) {
+    const cl = this.element().classList;
+    if (bool === undefined) return cl.contains("active");
+    else if (bool) cl.add("active");
+    else cl.remove("active"); //allows for setting it to inactive if not (equal to undefined or truthy)
+  },
+
+  /**
+   * Get/create the document element of the container item. Can be overwritten. Standard class: li
+   */
+  element : function () {
+    // already defined
+    if (this._el !== undefined) return this._el;
+    
+    // Create list item
+    const li = document.createElement("li");
+
+    // Connect action
+    if (this["onclick"] !== undefined) {
+      li["onclick"] = this.onclick.bind(this);
+    };    
+    return this._el = li;
+  },
+
+  /**
+   * Expected to be overwritten
+   * @returns whether the item is currently an option to be selected, or if it should just be skipped
+   */
+  isSelectable : function () {
+    return true;
+  },
+
+  /**
+   * API skeleton for reading letters. Expected to be overwritten.
+   * @param {String} letter The letter to be read
+   */
+  add : function (letter) {},
+    
+  
+  /**
+   * API skeleton for clearing whole contents. Expected to be overwritten.
+   */
+  clear : function () {},
+  
+  
+  /**
+   * API skeleton method for execution. Expected to be overwritten.
+   * @param {Event} event Event passed down by menu.
+   */
+  onclick : function (e) {},
+  
+    
+  /**
+   * API skeleton method for when backspace is pressed. Expected to be overwritten.
+   */
+  chop : function () {},
+
+  /**
+   * API skeleton method for pressing "right". Expected to be overwritten.
+   * @param {Event} event Event passed down by menu.
+   */
+  further : function (e) {},
+
+  /**
+   * Return menu list. This._menu gets written by the container class
+   */
+  menu : function () {
+    return this._menu;
+  }
+
+});
\ No newline at end of file
diff --git a/dev/js/src/containermenu.js b/dev/js/src/containermenu.js
new file mode 100644
index 0000000..a272e10
--- /dev/null
+++ b/dev/js/src/containermenu.js
@@ -0,0 +1,378 @@
+/**
+ * Menu with a container for always visible non scrollable items (can also be made invisible)
+ * Automatically moves the prefix into the container. See containeritem.js for an API of functions
+ * a container will call on containeritem.
+ * 
+ * @author Leo Repp, with reused code by Nils Diewald
+ */
+
+"use strict";
+define([
+  'menu',
+  'container/container',
+  'util'
+], function (defaultMenuClass,
+             defaultContainerClass) {
+
+  return {
+    /**
+     * Create new Container Menu based on the action prefix
+     * and a list of menu items.
+     *
+     * Accepts an associative array containg the elements
+     * itemClass, prefixClass, lengthFieldClass, containerClass, containerItemClass
+     *
+     * @this {Menu}
+     * @constructor
+     * @param {string} params Context prefix
+     * @param {Array.<Array.<string>>} list List of menu items
+     * @param {Array.<Array.<containerItem>>} containerList List of container items
+     */
+    create : function (list, params, containerList) {
+      const obj = defaultMenuClass.create(list, params)
+          .upgradeTo(this)
+          ._init(list, params);
+      
+      obj._el.classList.add('containermenu');
+
+      //add container object and allow for own containerClasses
+      if (params!==undefined && params["containerClass"] !== undefined) {
+        obj._container = params["containerClass"].create(containerList, params);
+      } else {
+        obj._container = defaultContainerClass.create(containerList, params);
+      }
+      obj.container().addMenu(obj);
+
+      // add entry to HTML element
+      obj._el.appendChild(obj.container().element());
+      obj._el.removeChild(obj._prefix.element());
+      //Keep prefix as 'pref' style. The additional distance is fine.
+      obj.container().addPrefix(obj._prefix);
+      return obj;
+    },
+
+    /**
+     * Destroy this menu
+     * (in case you don't trust the
+     * mark and sweep GC)!
+     */
+    destroy : function () {
+      // Upon change also update alwaysmenu.js please
+      const t = this;
+
+      // Remove circular reference to "this" in menu
+      if (t._el != undefined)
+        delete t._el["menu"]; 
+
+      // Remove circular reference to "this" in items
+      t._items.forEach(function(i) {
+        delete i["_menu"];
+      });
+
+      // Remove circular reference to "this" in prefix
+      delete t._prefix['_menu'];
+      delete t._lengthField['_menu'];
+      delete t._slider['_menu'];
+      t.container().destroy();
+      delete t.container()['_menu'];
+    },
+
+    // Arrow key and container treatment
+    _keydown : function (e) {
+      const t = this;
+
+      switch (_codeFromEvent(e)) {
+
+      case 27: // 'Esc'
+        e.halt();
+        t.hide();
+        break;
+
+      case 38: // 'Up'
+        e.halt();
+        t.prev();
+        break;
+
+      case 33: // 'Page up'
+        e.halt();
+        t.pageUp();
+        break;
+
+      case 40: // 'Down'
+        e.halt();
+        t.next();
+        break;
+
+      case 34: // 'Page down'
+        e.halt();
+        t.pageDown();
+        break;
+
+      case 39: // 'Right'
+        if (t.container().active()){
+          t.container().further();
+          e.halt();
+          break;
+        }
+
+        const item = t.liveItem(t.position);
+        
+        if (item["further"] !== undefined) {
+          item["further"].bind(item).apply();
+        };
+        
+        e.halt();
+        break;
+
+      case 13: // 'Enter'
+        // Click on prefix
+        if (t.container().active()){
+          t.container().enter(e);
+        } else { // Click on item
+          t.liveItem(t.position).onclick(e);
+        };
+        e.halt();
+        break;
+
+      case 8: // 'Backspace'
+        t.container().chop();
+        t.show();
+        e.halt();
+        break;
+      };
+    },
+
+
+    // Add characters to prefix and other interested items
+    _keypress : function (e) {
+      if (e.charCode !== 0) {
+        e.halt();
+        
+        // Add prefix and other interested items
+        this.container().add(
+          String.fromCharCode(_codeFromEvent(e))
+        );
+
+        this.show();
+      };
+    },
+
+
+    /**
+     * Filter the list and make it visible.
+     * This is always called once the prefix changes.
+     *
+     * @param {string} Prefix for filtering the list
+     */
+    show : function (active) {
+      //there are only two new lines, marked with NEW
+      const t = this;
+
+      // show menu based on initial offset
+      t._unmark();     // Unmark everything that was marked before
+      t.removeItems();
+      t.container().exit(); //NEW
+
+      // Initialize the list
+      if (!t._initList()) {
+
+        // The prefix is not active
+        t._prefix.active(true);
+
+        // finally show the element
+        t._el.classList.add('visible'); // TODO do I need this for container?
+        t.container()._el.classList.add('visible');
+
+        return true;
+      };
+
+      let offset = 0;
+
+      // Set a chosen value to active and move the viewport
+      if (arguments.length === 1) {
+
+        // Normalize active value
+        if (active < 0) {
+          active = 0;
+        }
+        else if (active >= t.liveLength()) {
+          active = t.liveLength() - 1;
+        };
+
+        // Item is outside the first viewport
+        if (active >= t._limit) {
+          offset = active;
+          const newOffset = t.liveLength() - t._limit;
+          if (offset > newOffset) {
+            offset = newOffset;
+          };
+        };
+        
+        t.position = active;
+      }
+
+      // Choose the first item
+      else if (t._firstActive) {
+        t.position = 0;
+      }
+
+      // Choose no item
+      else {
+        t.position = -1;
+      };
+
+      t.offset = offset;
+      t._showItems(offset); // Show new item list
+
+      // Make chosen value active
+      if (t.position !== -1) {
+        t.liveItem(t.position).active(true);
+      };
+
+      // The prefix is not active
+      t._prefix.active(false);
+
+      // finally show the element
+      t._el.classList.add('visible');
+      t.container()._el.classList.add('visible'); //NEW
+
+      // Add classes for rolling menus
+      t._boundary(true);
+
+      return true;
+    },
+
+
+    /**
+     * Hide the menu and call the onHide callback.
+     */
+    hide : function () { //only one new line
+      if (!this.dontHide) {
+        this.removeItems();
+        this._prefix.clear();
+        this.onHide();
+        this._el.classList.remove('visible');
+        this.container()._el.classList.remove('visible'); //NEW
+      }
+      // this._el.blur();
+    },
+
+
+    
+    /**
+     * Make the next item in the filtered menu active
+     */
+    next : function () {
+      const t = this;
+      var notInContainerAnyMore;
+      const c = t.container();
+      const cLLength = c.liveLength();
+      // No list
+      if (t.liveLength()===0){
+        if (cLLength === 0) return;
+        notInContainerAnyMore = c.next();
+        if (notInContainerAnyMore) {
+          c.next();
+        }
+        return;
+      };
+      if (!c.active() && t.position!==-1) {t.liveItem(t.position).active(false);} //this should be enough to ensure a valid t.position
+      if (!c.active()){
+        t.position++;
+      };
+      let newItem = t.liveItem(t.position); //progress
+      if (newItem === undefined) { //too far
+        t.position = -1;
+        if (cLLength !== 0){ //actually makes sense to next
+          notInContainerAnyMore = t.container().next(); //activate container
+          if (notInContainerAnyMore) { //oh, next one (should not happen, because cLLength is now liveLength)
+            t.position = 0;
+            t._showItems(0);
+            newItem=t.liveItem(0);
+          };
+        } else {
+          t.position = 0;
+          t._showItems(0);
+          newItem=t.liveItem(0);
+        };
+      }// The next element is after the viewport - roll down
+      else if (t.position >= (t.limit() + t.offset)) {
+        t.screen(t.position - t.limit() + 1);
+      }
+      // The next element is before the viewport - roll up
+      else if (t.position <= t.offset) {
+        t.screen(t.position);
+      }
+      if (newItem !== undefined) {
+        newItem.active(true);
+      };
+    },
+
+
+    /**
+     * Make the previous item in the menu active
+     */
+    prev : function () {
+      const t = this;
+      var notInContainerAnyMore;
+      const c = t.container();
+      const cLLength = c.liveLength();
+
+      // No list
+      if (t.liveLength() === 0) {
+        if (cLLength === 0) return;
+        notInContainerAnyMore = c.prev();
+        if (notInContainerAnyMore) {
+          c.prev();
+        }
+        return;
+      }
+      if (!c.active() && t.position!==-1) {t.liveItem(t.position).active(false);}//this should be enough to ensure a valid t.position
+      if (!c.active()){
+        t.position--;
+      };
+      let newItem = t.liveItem(t.position); //progress
+      if (newItem === undefined) { //too far
+        t.position = -1;
+        let offset =  t.liveLength() - t.limit();
+        // Normalize offset
+        offset = offset < 0 ? 0 : offset;
+        if (cLLength !== 0){ //actually makes sense to next
+          notInContainerAnyMore = t.container().prev(); //activate container
+          if (notInContainerAnyMore) { //oh, next one (should not happen, because cLLength is now liveLength)
+            t.position = t.liveLength() - 1;
+            newItem = t.liveItem(t.position);
+            t._showItems(offset);
+          } else {
+            t.offset = offset;
+          };
+        } else {
+          t.position = t.liveLength() - 1;
+          newItem = t.liveItem(t.position);
+          t._showItems(offset);
+        }
+      }
+      // The previous element is before the view - roll up
+      else if (t.position < t.offset) {
+        t.screen(t.position);
+      }
+
+      // The previous element is after the view - roll down
+      else if (t.position >= (t.limit() + t.offset)) {
+        t.screen(t.position - t.limit() + 2);
+      };
+      if (newItem !== undefined) {
+        newItem.active(true);
+      };
+    },
+
+    /**
+     * Get the container object
+     */
+    container : function () {
+      return this._container;
+    }
+
+
+  };
+});
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index d246a8c..cc8abea 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -259,7 +259,7 @@
     if (resultInfo != null) {
 
       // Move buttons to resultinfo
-      resultInfo.appendChild(resultPanel.actions.element());
+      resultInfo.appendChild(resultPanel.actions().element());
 
       // The views are at the top of the search results
       var sb = d.getElementById('search');
diff --git a/dev/js/src/match.js b/dev/js/src/match.js
index df7db03..6c9fe6e 100644
--- a/dev/js/src/match.js
+++ b/dev/js/src/match.js
@@ -166,7 +166,7 @@
 
       // Insert before reference line
       refLine.insertBefore(
-        t.panel.actions.element(),
+        t.panel.actions().element(),
         refLine.firstChild
       );
 
diff --git a/dev/js/src/menu.js b/dev/js/src/menu.js
index 088618b..86a8105 100644
--- a/dev/js/src/menu.js
+++ b/dev/js/src/menu.js
@@ -55,7 +55,6 @@
 
     // Initialize list
     _init : function (list, params) {
-      
       if (params === undefined)
         params = {};
 
@@ -130,8 +129,6 @@
       
       t._items = new Array(); //all childNodes, i.e. ItemClass, prefixClass
 
-      // TODO:
-      // Make this separate from _init
       t.readItems(list);
 
       t.dontHide = false;
@@ -177,6 +174,21 @@
       t.offset = 0;
       t.position = 0;
     },
+
+    // Append item to list
+    append : function (item) {
+      const t = this;
+      // This is cyclic!
+      item["_menu"] = t;
+      t._list = undefined;
+      t.removeItems();
+      t._items.push(item);
+      t._lengthField.add([item.content().data]);
+      t._slider.length(t.liveLength()).reInit();
+      t._firstActive = false;
+      t.offset = 0;
+      t.position = 0;
+    },
     
     // Initialize the item list
     _initList : function () {
@@ -622,10 +634,15 @@
      * Delete all visible items from the menu element
      */
     
-     removeItems : function () {
+    removeItems : function () {
       const liElements=this._el.getElementsByTagName("LI");
-      while (liElements.length>0){
-        this._el.removeChild(liElements[0]);
+      var ignoredCount = 0; //counts how many LI tag elements are not actually direct children
+      while (liElements.length>ignoredCount){
+        if (liElements[ignoredCount].parentNode === this._el){
+          this._el.removeChild(liElements[ignoredCount]);
+        } else {
+          ignoredCount++;
+        }
       };
      },
       
@@ -878,6 +895,7 @@
 
         // Remove the HTML node from the first item
         // leave lengthField/prefix/slider
+        //console.log("_showItems, at _notItemElements is: ",t._el.children[this._notItemElements]);
         t._el.removeChild(t._el.children[this._notItemElements]);
 
         t._append(
@@ -890,6 +908,7 @@
         t.offset = off;
 
         // Remove the HTML node from the last item
+        //console.log("_showItems, at lastChild is: ",t._el.lastChild);
         t._el.removeChild(t._el.lastChild);
 
         t._prepend(t._list[t.offset]);
@@ -953,6 +972,24 @@
         item.element(),
         e.children[this._notItemElements]
       );
+    },
+
+    /**
+     * A Method for generating an array of nodes, that are direct descendants of the menus
+     * element node, using a tag tagName as a parameter. Supposed to be used by the specification only.
+     * @param {String} tagName The tag the children are looked for by
+     * @returns An array of children nodes with tag tagName
+     */
+    directElementChildrenByTagName : function (tagName) {
+      const tagElementsCollection=this._el.getElementsByTagName(tagName);
+      //var tagElements = Array.from(tagElementsCollection);
+      //var tagElements = [...tagElementsCollection];
+      //This one has the best compatability:
+      var tagElements = Array.prototype.slice.call(tagElementsCollection);
+      const t = this;
+      //filter by actually being direct child node
+      tagElements = tagElements.filter(element => element.parentNode === t._el);
+      return tagElements;
     }
   };
 });
diff --git a/dev/js/src/menu/prefix.js b/dev/js/src/menu/prefix.js
index f6c6c76..20e2753 100644
--- a/dev/js/src/menu/prefix.js
+++ b/dev/js/src/menu/prefix.js
@@ -22,9 +22,9 @@
     t._el.classList.add('pref');
     // Connect action
 
-    if (t["onclick"] !== undefined)
+    if (t["onclick"] !== undefined) {
       t._el["onclick"] = t.onclick.bind(t);
-    
+    }
     return t;
   },
 
diff --git a/dev/js/src/panel.js b/dev/js/src/panel.js
index bfc95c5..53ea757 100644
--- a/dev/js/src/panel.js
+++ b/dev/js/src/panel.js
@@ -32,17 +32,27 @@
       if (classes)
         c.push.apply(c,classes);
 
-      t.actions = buttonGroupClass.create(c).bind(this);
+      t._actions = buttonGroupClass.create(c).bind(this);
 
       //prepend or append views of the panel
       t.prepend = false;
       
       // Warning: This is circular
-      t.actions.panel = t;
+      t._actions.panel = t;
       return t;
     },
 
+
+    /**
+     * The actions of the panel.
+     * Can be represented as a buttongroup,
+     * a list, ..., requires an "add()" minimum at least.
+     */
+    actions : function () {
+      return this._actions;
+    },
     
+
     /**
      * The element of the panel
      */
@@ -62,7 +72,7 @@
 
       // Per default the action buttons are below the view
       // and integrated
-      const aElem = this.actions.element();
+      const aElem = this.actions().element();
       if (!aElem.parentNode)
         e.appendChild(aElem);
 
diff --git a/dev/js/src/panel/match.js b/dev/js/src/panel/match.js
index 603a230..6a3fe57 100644
--- a/dev/js/src/panel/match.js
+++ b/dev/js/src/panel/match.js
@@ -36,7 +36,7 @@
 
       this._match = match;
 
-      const a = this.actions;
+      const a = this.actions();
 
       // TODO:
       //   Ugly hack!
diff --git a/dev/js/src/panel/query.js b/dev/js/src/panel/query.js
index d2bf80f..a4658b0 100644
--- a/dev/js/src/panel/query.js
+++ b/dev/js/src/panel/query.js
@@ -22,7 +22,7 @@
     // Initialize panel
     _init : function (opened) {
       this._opened = opened;
-      const a = this.actions;
+      const a = this.actions();
       
       // If plugins are enabled, add all buttons for the query panel
       if (KorAP.Plugin) {
diff --git a/dev/js/src/panel/result.js b/dev/js/src/panel/result.js
index 1626a95..94ab856 100644
--- a/dev/js/src/panel/result.js
+++ b/dev/js/src/panel/result.js
@@ -34,7 +34,7 @@
         // Add all result buttons in order
         KorAP.Plugin
           .buttonGroup("result")
-          .forEach(i => this.actions.add.apply(this.actions, i));
+          .forEach(i => this.actions().add.apply(this.actions(), i));
 
         KorAP.Plugin.clearButtonGroup("result");
       };
@@ -51,7 +51,7 @@
     addKqAction : function () {
 
       // Open KoralQuery view
-      const kqButton = this.actions.add(
+      const kqButton = this.actions().add(
         loc.SHOW_KQ,
         {'cls':['show-kq','button-icon']},
         function () {
@@ -89,7 +89,7 @@
       /**
        * Toggle the alignment (left <=> right)
        */
-      this.actions.add(loc.TOGGLE_ALIGN, {'cls':['align','right','button-icon']}, function (e) {
+      this.actions().add(loc.TOGGLE_ALIGN, {'cls':['align','right','button-icon']}, function (e) {
         var olCl = d.querySelector('#search > ol').classList;
 
         aRoll.find(function(align, i) {
diff --git a/dev/js/src/panel/vc.js b/dev/js/src/panel/vc.js
index 6259d48..b9dc7a2 100644
--- a/dev/js/src/panel/vc.js
+++ b/dev/js/src/panel/vc.js
@@ -28,7 +28,7 @@
     
     _init : function(vc){
      this.vc = vc;
-     const actions = this.actions;
+      const actions = this.actions();
       actions.add(loc.SHOW_STAT, {'cls':['statistic']}, function() {
         this.addCorpStat();
       }.bind(this));
diff --git a/dev/js/src/plugin/server.js b/dev/js/src/plugin/server.js
index daea33c..d86eebc 100644
--- a/dev/js/src/plugin/server.js
+++ b/dev/js/src/plugin/server.js
@@ -214,7 +214,7 @@
 
           // Add to static button list (e.g. for query) already loaded
           else if (KorAP.Panel[panel]) {
-            KorAP.Panel[panel].actions.add(title, obj, cb);
+            KorAP.Panel[panel].actions().add(title, obj, cb);
           }
 
           // Add to static button list (e.g. for query) not yet loaded
@@ -235,7 +235,7 @@
 
           // TODO:
           //   Lazy registration (see above!)
-          KorAP.Panel[panel].actions.addToggle(title, {'cls':["title"]}, state);
+          KorAP.Panel[panel].actions().addToggle(title, {'cls':["title"]}, state);
 
           // Add the service
           let id = this.addService({
diff --git a/dev/js/src/plugin/widget.js b/dev/js/src/plugin/widget.js
index 48cc393..07b1af6 100644
--- a/dev/js/src/plugin/widget.js
+++ b/dev/js/src/plugin/widget.js
@@ -46,7 +46,7 @@
       // Otherwise a button indicating this is a plugin
       // is a nice idea as well.
       
-      this.actions.add(
+      this.actions().add(
         this.name, {'cls':['button-icon', 'plugin']}, function (e) {
 
           // Temporary
diff --git a/dev/js/src/view.js b/dev/js/src/view.js
index a8a79cb..b45c485 100644
--- a/dev/js/src/view.js
+++ b/dev/js/src/view.js
@@ -26,14 +26,14 @@
       if (classes)
         c.push.apply(c,classes);
       
-      this.actions = buttonGroupClass.create(c).bind(this);
+      this._actions = buttonGroupClass.create(c).bind(this);
 
-      this.actions.add(loc.CLOSE, {'cls':['button-icon','close']}, function (e) {
+      this._actions.add(loc.CLOSE, {'cls':['button-icon','close']}, function (e) {
         this.close();
       });
 
       // Warning: This is circular
-      this.actions.view = this;
+      this._actions.view = this;
 
       return this;
     },
@@ -68,13 +68,22 @@
 
       this._shown = true;
 
-      e.appendChild(this.actions.element());
+      e.appendChild(this.actions().element());
 
       return this._el = e;
     },
 
 
     /**
+     * The actions of the view.
+     * Can be represented as a buttongroup,
+     * a list, ..., requires an "add()" minimum at least.
+     */
+    actions : function () {
+      return this._actions;
+    },
+
+    /**
      * Is the object shown?
      */
     shown : function () {
diff --git a/dev/js/src/view/match/relations.js b/dev/js/src/view/match/relations.js
index 7e874fc..452841c 100644
--- a/dev/js/src/view/match/relations.js
+++ b/dev/js/src/view/match/relations.js
@@ -87,7 +87,7 @@
           if (type === "spans") {
 
             // Download link
-            that.actions.add(
+            that.actions().add(
               loc.DOWNLOAD,
               {'cls':['button-icon','download']},
               function (e) {
diff --git a/dev/scss/base/base.scss b/dev/scss/base/base.scss
index d5cb6c8..4f4c77e 100644
--- a/dev/scss/base/base.scss
+++ b/dev/scss/base/base.scss
@@ -10,6 +10,7 @@
 @import "banner";
 @import "showPWD";
 @import "copyToClipboard";
+@import "buttongroup";
 
 /**
  * Basic global CSS rules for Kalamar
diff --git a/dev/scss/main/buttongroup.scss b/dev/scss/base/buttongroup.scss
similarity index 97%
rename from dev/scss/main/buttongroup.scss
rename to dev/scss/base/buttongroup.scss
index 85b2527..42dfbdb 100644
--- a/dev/scss/main/buttongroup.scss
+++ b/dev/scss/base/buttongroup.scss
@@ -26,7 +26,8 @@
       border-width: $border-size 0;
 
       &:hover {
-	      @include choose-hover;
+	@include choose-hover;
+        transition: none;
       }
 
       &:first-child {
diff --git a/dev/scss/base/menu.scss b/dev/scss/base/menu.scss
index f8e8e35..b743362 100644
--- a/dev/scss/base/menu.scss
+++ b/dev/scss/base/menu.scss
@@ -265,3 +265,12 @@
     }
   }
 }
+
+/**
+ * container menu
+ */
+ul.containermenu > ul.menu.container {
+    bottom: 0;
+    transform: translateY(100%);
+    margin-bottom: -.3em;
+}
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index c3478dc..e2bb6be 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -9,7 +9,6 @@
 @import "koralquery";  // KoralQuery
 @import "alertify";    // Styling alerts
 @import "intro";       // Intro page
-@import "buttongroup"; // Button groups
 @import "panel";       // Base panel system
 @import "introjs";     // Guided Tour
 @import "introjs-ids"; // Guided Tour: IDS specific 
diff --git a/dev/scss/main/pagination.scss b/dev/scss/main/pagination.scss
index 75e9458..d41fb73 100644
--- a/dev/scss/main/pagination.scss
+++ b/dev/scss/main/pagination.scss
@@ -20,107 +20,55 @@
    * This may need to be overwritten in case multiple
    * paginations have to be activated.
    */
-  position:    fixed;
-  font-size:   0;
-  right:       ($standard-margin / 4);
-  bottom:      ($standard-margin / 2);
-  z-index:     35;
-  padding:     0;
-  height:      auto;
-  line-height: 0;
+    position:    fixed;
+    font-size:   0;
+    right:       ($standard-margin / 4);
+    bottom:      ($standard-margin / 2);
+    z-index:     35;
+    padding:     0;
+    height:      auto;
+    line-height: 0;
+    
+    > * {
+        font-size: 10pt;
+        line-height: 2em;
 
-  > a {
-    margin:    0;
-    font-size: 10pt;
-    padding:   0;
+        &:not(:link):not([rel=self]) {
+            color: $choose-blind-color;
+        }
 
-    > span {
-      @include standard-text-padding;
-      @include choose-item;
-      box-shadow:  $choose-box-shadow;
-      display:     inline-block;
-      line-height: 2em;
-      text-align:  center;
+        &.ellipsis, &[rel=prev], &[rel=next] {
+            > span {
+	        @include blind;
+            }
+        }
+    
+        &.ellipsis::after {
+	    @include icon-font;
+	    content:     $fa-elipsis;
+	    line-height: 1em;
+        }
 
-      border: {
-	      top-width:    $border-size;
-	      bottom-width: $border-size;
-	      top-style:    solid;
-	      bottom-style: solid;
-      }
+        &[rel=self] {
+            @include choose-active;
+            border: {
+	        left-width:  $border-size;
+	        right-width: $border-size;
+	        left-style:  solid;
+	        right-style: solid;
+            }
+        }
+
+        &[rel=prev]::after {
+            @include icon-font;
+	    content:     $fa-previous;
+	    line-height: 1em;
+        }
+
+        &[rel=next]::after {
+            @include icon-font;
+	    content:     $fa-next;
+	    line-height: 1em;
+        }
     }
-
-    &:not(:link):not([rel=self]) span {
-      color: $choose-blind-color;
-    }
-
-    &.ellipsis > span {
-      > span {
-	      @include blind;
-      }
-
-      &::after {
-	      @include icon-font;
-	      content:     $fa-elipsis;
-	      line-height: 1em;
-      }
-    }
-
-    &[rel=self] > span {
-      @include choose-active;
-
-      border: {
-	      left-width:  $border-size;
-	      right-width: $border-size;
-	      left-style:  solid;
-	      right-style: solid;
-      }
-    }
-
-    &[rel=prev] > span {
-      border: {
-	      top-left-radius:    $standard-border-radius;
-	      bottom-left-radius: $standard-border-radius;
-	      left-width:         $border-size;
-	      left-style:         solid;
-      }
-
-      > span {
-	      @include blind;
-      }
-
-      &::after {
-        @include icon-font;
-	      content:     $fa-previous;
-	      line-height: 1em;
-      }
-    }
-
-    &[rel=next] > span {
-      border: {
-	      top-right-radius:    $standard-border-radius;
-	      bottom-right-radius: $standard-border-radius;
-	      right-width:         $border-size;
-	      right-style:         solid;
-      }
-
-      > span {
-	      @include blind;
-      }
-
-      &::after {
-        @include icon-font;
-	      content:     $fa-next;
-	      line-height: 1em;
-      }
-    }
-
-    &:link:hover,
-    &:link:focus {
-      outline: none;
-      span {
-	      @include choose-hover;
-      }
-    }
-  }
-}
\ No newline at end of file
+}
diff --git a/lib/Kalamar.pm b/lib/Kalamar.pm
index 4f619a6..fd8fe69 100644
--- a/lib/Kalamar.pm
+++ b/lib/Kalamar.pm
@@ -137,7 +137,6 @@
     before_dispatch => sub {
       my $h = shift->res->headers;
       $h->header('X-Content-Type-Options' => 'nosniff');
-      $h->header('X-Frame-Options' => 'sameorigin');
       $h->header('X-XSS-Protection' => '1; mode=block');
       $h->header(
         'Access-Control-Allow-Methods' =>
@@ -197,6 +196,7 @@
     'script-src'  => ['self','sha256-VGXK99kFz+zmAQ0kxgleFrBWZgybFAPOl3GQtS7FQkI='],
     'connect-src' => 'self',
     'frame-src'   => '*',
+    'frame-ancestors' => 'self',
     'media-src'   => 'none',
     'object-src'  => 'self',
     'font-src'    => 'self',
diff --git a/lib/Kalamar/Plugin/Auth.pm b/lib/Kalamar/Plugin/Auth.pm
index db9728d..df6302d 100644
--- a/lib/Kalamar/Plugin/Auth.pm
+++ b/lib/Kalamar/Plugin/Auth.pm
@@ -70,6 +70,7 @@
           tokenInvalid => 'Zugriffstoken ungültig',
           refreshFail => 'Fehlerhafter Refresh-Token',
           responseError => 'Unbekannter Autorisierungsfehler',
+          serverError => 'Unbekannter Serverfehler',
           revokeFail => 'Der Token kann nicht widerrufen werden',
           revokeSuccess => 'Der Token wurde erfolgreich widerrufen',
           paramError => 'Einige Eingaben sind fehlerhaft',
@@ -115,6 +116,7 @@
           tokenInvalid => 'Access token invalid',
           refreshFail => 'Bad refresh token',
           responseError => 'Unknown authorization error',
+          serverError => 'Unknown server error',
           revokeFail => 'Token can\'t be revoked',
           revokeSuccess => 'Token was revoked successfully',
           paramError => 'Some fields are invalid',
@@ -341,6 +343,12 @@
               );
             };
 
+            if ($tx->res->is_server_error) {
+              return Mojo::Promise->reject(
+                '600'
+              )
+            };
+
             $c->notify(error => $c->loc('Auth_responseError'));
             return Mojo::Promise->reject;
           }
@@ -567,6 +575,18 @@
               };
 
               return Mojo::Promise->resolve($tx);
+            }
+
+            # There is a server error - just report
+            elsif ($tx->res->is_server_error) {
+              my $err = $tx->res->error;
+              if ($err) {
+                return Mojo::Promise->reject($err->{code} . ': ' . $err->{message});
+              }
+              else {
+                $c->notify(error => $c->loc('Auth_serverError'));
+                return Mojo::Promise->reject;
+              };
             };
 
             $c->notify(error => $c->loc('Auth_responseError'));
diff --git a/t/page.t b/t/page.t
index 9146c0f..0be13c8 100644
--- a/t/page.t
+++ b/t/page.t
@@ -29,11 +29,11 @@
   ->header_like('Content-Security-Policy', qr!media-src 'none';!)
   ->header_like('Content-Security-Policy', qr!object-src 'self';!)
   ->header_like('Content-Security-Policy', qr!nonce-!)
+  ->header_like('Content-Security-Policy', qr!frame-ancestors 'self';!)
   ->content_like(qr/<script nonce/)
   ->content_like(qr/document\.body\.classList\.remove\(\'no-js\'\);/)
   ->header_is('X-Content-Type-Options', 'nosniff')
   ->header_is('Access-Control-Allow-Methods','GET, POST, OPTIONS')
-  ->header_is('X-Frame-Options', 'sameorigin')
   ->header_is('X-XSS-Protection', '1; mode=block')
   ;
 
diff --git a/t/plugin/auth-oauth.t b/t/plugin/auth-oauth.t
index 7db935f..33ffafa 100644
--- a/t/plugin/auth-oauth.t
+++ b/t/plugin/auth-oauth.t
@@ -236,6 +236,11 @@
   ->element_exists_not('p.hint')
   ;
 
+# Query with error
+$t->get_ok('/?q=error')
+  ->status_is(400)
+  ->text_is('#notifications .notify-error','500: Internal Server Error')
+;
 
 # Logout
 $t->get_ok('/user/logout')
diff --git a/t/query.t b/t/query.t
index d3f0cd3..a2e2f44 100644
--- a/t/query.t
+++ b/t/query.t
@@ -43,6 +43,8 @@
   # Total pages
   ->element_count_is('#pagination > a', 5)
 
+  ->element_exists_not('#resultinfo > #pagination')
+
   # api_response
   ->content_like(qr/${q}authorized${q}:null/)
   ->content_like(qr/${q}pubDate${q},${q}subTitle${q},${q}author${q}/)
@@ -225,6 +227,12 @@
   ->text_is('#total-results', '> 4,274,841');
 ;
 
+# Query with error
+$t->get_ok('/?q=error')
+  ->status_is(400)
+  ->text_is('#notifications .notify-error','500: Internal Server Error')
+;
+
 # Do not cache
 $t->get_ok('/?q=timeout')
   ->status_is(200)
diff --git a/t/server/mock.pl b/t/server/mock.pl
index bd6debe..5389156 100644
--- a/t/server/mock.pl
+++ b/t/server/mock.pl
@@ -150,6 +150,13 @@
     return $c->render(%{$c->load_response('query_no_query')});
   };
 
+  if ($v->param('q') eq 'error') {
+    return $c->render(
+      status => 500,
+      inline => '<html><head>ERROR</head></html>'
+    );
+  };
+
   my @slug_base = ($v->param('q'));
   push @slug_base, 'o' . $v->param('offset') if defined $v->param('offset');
   push @slug_base, 'c' . $v->param('count') if defined $v->param('count');
diff --git a/templates/search.html.ep b/templates/search.html.ep
index 0ad8f2d..be4ced8 100644
--- a/templates/search.html.ep
+++ b/templates/search.html.ep
@@ -1,7 +1,8 @@
 % layout 'main', schematype => 'SearchResultsPage';
 
+<div id="pagination" class="button-group button-panel"><%= pagination(stash('start_page'), stash('total_pages'), url_with->query({'p' => '{page}'})) =%></div>
+
 <div id="resultinfo" <% if (stash('results')->size) { %> class="found"<%} %>>
-  <div id="pagination"><%= pagination(stash('start_page'), stash('total_pages'), url_with->query({'p' => '{page}'})) =%></div>
 % my $found = stash('total_results') // 0;
   <p class="found">\
 % if ($found != -1) {