diff --git a/Changes b/Changes
index 74689e9..83de611 100755
--- a/Changes
+++ b/Changes
@@ -17,6 +17,8 @@
         - 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/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/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/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 29e8b44..47adfd3 100644
--- a/dev/js/spec/menuSpec.js
+++ b/dev/js/spec/menuSpec.js
@@ -1529,7 +1529,7 @@
         let obj = menu.itemClass().create(
           ['dddd','',function () { entryData = 'dddd'} ]
         );
-        menu.append(obj)
+        menu.append(obj);
 
         expect(menu.limit(2).show(1)).toBe(true);
         expect(menu.shownItem(0).lcField()).toEqual(' a');
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/menu.js b/dev/js/src/menu.js
index 4e93390..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;
@@ -639,10 +636,13 @@
     
     removeItems : function () {
       const liElements=this._el.getElementsByTagName("LI");
-      for (let ii = liElements.length-1; ii >= 0; ii-- ) {
-        if (liElements[ii].parentNode === this._el){
-          this._el.removeChild(liElements[ii]);
-        };
+      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++;
+        }
       };
      },
       
@@ -895,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(
@@ -907,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]);
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;
   },