diff --git a/Makefile b/Makefile
index 00bb7f9..4d6f783 100644
--- a/Makefile
+++ b/Makefile
@@ -1,9 +1,9 @@
 
 build: index.js components
-	@component build
+	@component build --dev
 
-components:
-	@component install
+components: component.json
+	@component install --dev
 
 clean:
 	rm -fr build components
diff --git a/Readme.md b/Readme.md
index d8fb49a..9a2b170 100644
--- a/Readme.md
+++ b/Readme.md
@@ -57,11 +57,15 @@ oncontextmenu = function(e){
 };
 ```
 
+## License
+
+MIT
+
 ## API
-  
+
 ### Menu()
 
-  Create a new `Menu`:
+Initialize a new `Menu`.
 
 ```js
 var Menu = require('menu');
@@ -69,11 +73,40 @@ var menu = new Menu();
 var menu = Menu();
 ```
 
-### Menu#add([slug], text, [fn])
+Emits:
+
+- "show" when shown
+- "hide" when hidden
+- "remove" with the item name when an item is removed
+- "select" (item) when an item is selected
+- * menu item events are emitted when clicked
+
+### Menu.prototype()
+
+Inherit from `Emitter.prototype`.
+
+### Menu.move(`direction`:`String`)
+
+Focus on the next menu item in `direction`.
+
+
+### Menu.get(`slug`:`String`)
+> _returns_ MenuItem
+
+Gets a menu item named `slug`.
+
+
+### Menu.add(`text`:`String`, `fn`:`Function`)
+> _returns_ Menu
 
-  Add a new menu item with the given `text`, optional `slug` and callback `fn`.
+Add a new menu item with the given `text`, optional `slug` and callback `fn`.
 
-  Using events to handle selection:
+When the item is clicked `fn()` will be invoked
+and the `Menu` is immediately closed. When clicked
+an event of the name `text` is emitted regardless of
+the callback function being present.
+
+Using events to handle selection:
 
 ```js
 menu.add('Hello');
@@ -83,7 +116,7 @@ menu.on('Hello', function(){
 });
 ```
 
-  Using callbacks:
+Using callbacks:
 
 ```js
 menu.add('Hello', function(){
@@ -91,9 +124,9 @@ menu.add('Hello', function(){
 });
 ```
 
-  Using a custom slug, otherwise "hello" is generated
-  from the `text` given, which may conflict with "rich"
-  styling like icons within menu items, or i18n.
+Using a custom slug, otherwise "hello" is generated
+from the `text` given, which may conflict with "rich"
+styling like icons within menu items, or i18n.
 
 ```js
 menu.add('add-item', 'Add Item');
@@ -107,25 +140,39 @@ menu.add('add-item', 'Add Item', function(){
 });
 ```
 
-### Menu#remove(slug)
+### Menu.remove(`slug`:`String`)
+> _returns_ Menu
 
-  Remove an item by the given `slug`:
+Remove an item by the given `slug`:
 
 ```js
 menu.add('Add item');
 menu.remove('Add item');
 ```
 
-  Or with custom slugs:
+Or with custom slugs:
 
 ```js
 menu.add('add-item', 'Add item');
 menu.remove('add-item');
 ```
 
-### Menu#has(slug)
+### Menu.change(`slug`:`String`)
+> _returns_ Menu
+
+Change menu item with `slug`.
+
+
+### Menu.clear()
+> _returns_ Menu
+
+Clear menu.
+
+
+### Menu.has(`item`:`MenuItem`)
+> _returns_ Boolean
 
-  Check if a menu item is present.
+Check if a menu item is present.
 
 ```js
 menu.add('Add item');
@@ -140,18 +187,80 @@ menu.has('Foo');
 // => false
 ```
 
-### Menu#moveTo(x, y)
+### Menu.indexOf(`item`:`MenuItem`)
+> _returns_ Number
 
-  Move the menu to `(x, y)`.
+Find index of menu `item`.
 
-### Menu#show()
 
-  Show the menu.
+### Menu.moveTo(`x`:`Number`, `y`:`Number`)
+> _returns_ Menu
 
-### Menu#hide()
+Move context menu to `(x, y)`.
 
-  Hide the menu.
 
-## License
+### Menu.moveToCenter(`x`:`Number`, `y`:`Number`)
+> _returns_ Menu
+
+Move context menu to `(x, y)`.
+
+
+### Menu.show()
+> _returns_ Menu
+
+Show the menu.
+
+
+### Menu.hide()
+> _returns_ Menu
+
+Hide the menu.
+
+
+### Menu.showItem(`item`:`Element`)
+> _returns_ Menu
+
+Show a menu item.
+
+
+### Menu.hideItem(`item`:`Element`)
+> _returns_ Menu
+
+Hide a menu item.
+
+
+### Menu.unhideAll()
+> _returns_ Menu
+
+Unhide all items.
+
+
+### Menu.toggle()
+> _returns_ Menu
+
+Toggle the menu.
+
+
+### Menu.filter(`fn`:`Function`)
+> _returns_ Menu
+
+Filter menu using `fn`.
+
+
+### Menu.isOpen()
+> _returns_ Boolean
+
+Check if menu is visible.
+
+
+### Menu.isSelecting()
+> _returns_ Boolean
+
+Check if user is selecting.
+
+
+### MenuItem(`item`:`Object`)
+
+MenuItem class.
+
 
-  MIT
\ No newline at end of file
diff --git a/component.json b/component.json
index 6042766..afc05c9 100644
--- a/component.json
+++ b/component.json
@@ -1,14 +1,18 @@
 {
   "name": "menu",
   "description": "Menu component",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "keywords": [
     "menu",
     "ui"
   ],
   "dependencies": {
     "component/emitter": "*",
-    "component/jquery": "*"
+    "component/jquery": "*",
+    "stagas/viewport": "*"
+  },
+  "development": {
+    "stagas/watch-js": "*"
   },
   "styles": [
     "menu.css"
diff --git a/index.js b/index.js
index fd19118..d3e407f 100644
--- a/index.js
+++ b/index.js
@@ -4,6 +4,7 @@
  */
 
 var Emitter = require('emitter')
+  , viewport = require('viewport')
   , o = require('jquery');
 
 /**
@@ -15,13 +16,19 @@ module.exports = Menu;
 /**
  * Initialize a new `Menu`.
  *
+ * ```js
+ * var Menu = require('menu');
+ * var menu = new Menu();
+ * var menu = Menu();
+ * ```
+ *
  * Emits:
  *
- *   - "show" when shown
- *   - "hide" when hidden
- *   - "remove" with the item name when an item is removed
- *   - "select" (item) when an item is selected
- *   - * menu item events are emitted when clicked
+ * - "show" when shown
+ * - "hide" when hidden
+ * - "remove" with the item name when an item is removed
+ * - "select" (item) when an item is selected
+ * - * menu item events are emitted when clicked
  *
  * @api public
  */
@@ -29,12 +36,11 @@ module.exports = Menu;
 function Menu() {
   if (!(this instanceof Menu)) return new Menu;
   Emitter.call(this);
-  this.items = {};
+  this.items = [];
   this.el = o('<ul class=menu>').hide().appendTo('body');
-  this.el.hover(this.deselect.bind(this));
-  o('html').click(this.hide.bind(this));
-  this.on('show', this.bindKeyboardEvents.bind(this));
-  this.on('hide', this.unbindKeyboardEvents.bind(this));
+  this.on('show', this.bindEvents.bind(this));
+  this.on('hide', this.unbindEvents.bind(this));
+  this._isOpen = false;
 }
 
 /**
@@ -49,8 +55,58 @@ Menu.prototype = new Emitter;
  * @api private
  */
 
-Menu.prototype.deselect = function(){
-  this.el.find('.selected').removeClass('selected');
+Menu.prototype.deselect = function(ev){
+  if (!this.selected) return;
+  this.selected.el.removeClass('selected');
+  this.selected = null;
+};
+
+/**
+ * Bind event listeners.
+ *
+ * @api private
+ */
+
+Menu.prototype.bindEvents = function(){
+  this.bindKeyboardEvents();
+  this.bindMouseEvents();
+};
+
+/**
+ * Unbind event listeners.
+ *
+ * @api private
+ */
+
+Menu.prototype.unbindEvents = function(){
+  this.unbindKeyboardEvents();
+  this.unbindMouseEvents();
+};
+
+/**
+ * Bind mouse events.
+ *
+ * @api private
+ */
+
+Menu.prototype.bindMouseEvents = function(){
+  this.onbodyclickBound = this.onbodyclick.bind(this)
+  this.deselectBound = this.deselect.bind(this);
+  var self = this;
+  setTimeout(function () {
+    o('html').bind('mouseup', self.onbodyclickBound);
+  }, 0)
+  this.el.one('mouseover', 'a', this.deselectBound);
+};
+
+/**
+ * Unbind mouse events.
+ *
+ * @api private
+ */
+
+Menu.prototype.unbindMouseEvents = function(){
+  o('html').unbind('mouseup', this.onbodyclickBound);
 };
 
 /**
@@ -60,7 +116,8 @@ Menu.prototype.deselect = function(){
  */
 
 Menu.prototype.bindKeyboardEvents = function(){
-  o(document).bind('keydown.menu', this.onkeydown.bind(this));
+  this.onkeydownBound = this.onkeydown.bind(this);
+  o('html').bind('keydown', this.onkeydownBound);
   return this;
 };
 
@@ -71,10 +128,25 @@ Menu.prototype.bindKeyboardEvents = function(){
  */
 
 Menu.prototype.unbindKeyboardEvents = function(){
-  o(document).unbind('keydown.menu');
+  o('html').unbind('keydown', this.onkeydownBound);
   return this;
 };
 
+/**
+ * Emit selected if any.
+ *
+ * @api private
+ */
+
+Menu.prototype.emitSelected = function(){
+  if (this.selected) {
+    this.emit('select', this.selected);
+    this.emit(this.selected.slug, this.selected);
+    this.emit(this.selected.text, this.selected);
+    this.selected.fn && this.selected.fn();
+  }
+};
+
 /**
  * Handle keydown events.
  *
@@ -83,23 +155,62 @@ Menu.prototype.unbindKeyboardEvents = function(){
 
 Menu.prototype.onkeydown = function(e){
   switch (e.keyCode) {
-    // esc
-    case 27:
+    case 39: // right
+    case 9: // tab
+      this.emitSelected();
+      this.hide();
+    break;
+
+    case 13: // enter
+      e.preventDefault();
+      this.emitSelected();
       this.hide();
-      break;
-    // up
-    case 38:
+      return false;
+    break;
+
+    case 27: // tab
+    case 37: // left
+      this.deselect();
+      this.hide();
+    break;
+
+    case 38: // up
       e.preventDefault();
       this.move('prev');
-      break;
-    // down
-    case 40:
+      this._isSelecting = true;
+    break;
+
+    case 40: // down
       e.preventDefault();
       this.move('next');
-      break;
+      this._isSelecting = true;
+    break;
   }
 };
 
+/**
+ * Handle body click event.
+ *
+ * @api private
+ */
+
+Menu.prototype.onbodyclick = function() {
+  if (this.isOpen()) this.hide();
+};
+
+/**
+ * Select (highlight) an item.
+ *
+ * @param {MenuItem} item
+ * @api private
+ */
+
+Menu.prototype.select = function(item){
+  this.selected = item;
+  this.selected.el.addClass('selected');
+  this.selected.el.find('a').focus();
+};
+
 /**
  * Focus on the next menu item in `direction`.
  *
@@ -108,27 +219,94 @@ Menu.prototype.onkeydown = function(e){
  */
 
 Menu.prototype.move = function(direction){
-  var prev = this.el.find('.selected').eq(0);
+  var sel = this.selected;
+
+  var items = this.items.slice();
+  items = items.filter(function (item) {
+    return ! item.hidden;
+  });
+
+  if (!sel) {
+    if ('next' == direction)
+      sel = items[items.length-1];
+    else sel = items[0];
+  }
+  else {
+    sel.el.removeClass('selected');
+  }
 
-  var next = prev.length
-    ? prev[direction]()
-    : this.el.find('li:first-child');
+  var index = items.indexOf(sel);
 
-  if (next.length) {
-    prev.removeClass('selected');
-    next.addClass('selected');
-    next.find('a').focus();
+  if ('next' == direction){
+    if (++index >= items.length) index = 0;
+    sel = items[index];
   }
+  else if ('prev' == direction){
+    if (--index < 0) index = items.length-1;
+    sel = items[index];
+  }
+
+  this.select(sel);
+};
+
+/**
+ * Gets a menu item named `slug`.
+ *
+ * @param {String} slug
+ * @return {MenuItem}
+ * @api public
+ */
+
+Menu.prototype.get = function(slug){
+  slug = createSlug(slug);
+  var item = this.items.filter(function(item){
+    return item.slug === slug;
+  })[0];
+  return item;
 };
 
 /**
- * Add menu item with the given `text` and optional callback `fn`.
+ * Add a new menu item with the given `text`, optional `slug` and callback `fn`.
  *
  * When the item is clicked `fn()` will be invoked
  * and the `Menu` is immediately closed. When clicked
  * an event of the name `text` is emitted regardless of
  * the callback function being present.
  *
+ * Using events to handle selection:
+ *
+ * ```js
+ * menu.add('Hello');
+ *
+ * menu.on('Hello', function(){
+ *   console.log('clicked hello');
+ * });
+ * ```
+ *
+ * Using callbacks:
+ *
+ * ```js
+ * menu.add('Hello', function(){
+ *   console.log('clicked hello');
+ * });
+ * ```
+ *
+ * Using a custom slug, otherwise "hello" is generated
+ * from the `text` given, which may conflict with "rich"
+ * styling like icons within menu items, or i18n.
+ *
+ * ```js
+ * menu.add('add-item', 'Add Item');
+ *
+ * menu.on('add-item', function(){
+ *   console.log('clicked "Add Item"');
+ * });
+ *
+ * menu.add('add-item', 'Add Item', function(){
+ *   console.log('clicked "Add Item"');
+ * });
+ * ```
+ *
  * @param {String} text
  * @param {Function} fn
  * @return {Menu}
@@ -136,36 +314,75 @@ Menu.prototype.move = function(direction){
  */
 
 Menu.prototype.add = function(text, fn){
-  var slug;
+  var slug, meta;
 
   // slug, text, [fn]
   if ('string' == typeof fn) {
     slug = text;
     text = fn;
     fn = arguments[2];
+    if ('function' != typeof fn) {
+      meta = fn;
+      fn = arguments[3];
+    }
   } else {
     slug = createSlug(text);
   }
 
+  if ('object' == typeof fn) {
+    meta = fn;
+    fn = arguments[2];
+  }
+
   var self = this
-    , el = o('<li><a href="#">' + text + '</a></li>')
-    .addClass('menu-item-' + slug)
-    .appendTo(this.el)
-    .click(function(e){
-      e.preventDefault();
-      e.stopPropagation();
-      self.hide();
-      self.emit('select', slug);
-      self.emit(slug);
-      fn && fn();
-    });
-
-  this.items[slug] = el;
+    , el = o('<li><a href="#">' + text + '</a></li>');
+
+  el
+  .addClass('menu-item-' + slug)
+  .appendTo(this.el)
+  .on('click', function(e){
+    e.preventDefault();
+  })
+  .on('mousedown', function(e){
+    self._isSelecting = true;
+  })
+  .on('mouseup', function(e){
+    e.preventDefault();
+    self.select(item);
+    self.emitSelected();
+  });
+
+  var item = new MenuItem({
+    el: el
+  , text: text
+  , slug: slug
+  , meta: meta
+  , fn: fn
+  });
+
+  if (this.has(slug)) {
+    this.hideItem(item);
+  }
+
+  this.items.push(item);
+
   return this;
 };
 
 /**
- * Remove menu item with the given `slug`.
+ * Remove an item by the given `slug`:
+ *
+ * ```js
+ * menu.add('Add item');
+ * menu.remove('Add item');
+ * ```
+ *
+ * Or with custom slugs:
+ *
+ * ```js
+ * menu.add('add-item', 'Add item');
+ * menu.remove('add-item');
+ * ```
  *
  * @param {String} slug
  * @return {Menu}
@@ -173,27 +390,88 @@ Menu.prototype.add = function(text, fn){
  */
 
 Menu.prototype.remove = function(slug){
-  var item = this.items[slug] || this.items[createSlug(slug)];
-  if (!item) throw new Error('no menu item named "' + slug + '"');
-  this.emit('remove', slug);
-  item.remove();
-  delete this.items[slug];
-  delete this.items[createSlug(slug)];
+  var item = this.get(slug);
+  if (!(item instanceof MenuItem)) {
+    throw new Error('Not a MenuItem: "'+slug+'"');
+  }
+  var i = this.indexOf(item);
+  if (!~i) {
+    throw new Error('Not in Menu.items: "'+slug+'"');
+  }
+  item.el.remove();
+  this.emit('remove', this.items.splice(i, 1));
   return this;
 };
 
 /**
- * Check if this menu has an item with the given `slug`.
+ * Change menu item with `slug`.
  *
  * @param {String} slug
- * @return {Boolean}
+ * @return {Menu}
+ * @api public
+ */
+
+Menu.prototype.change = function(slug){
+  this.add.apply(this, [].slice.call(arguments, 1));
+  var item = this.items.pop();
+  var old = this.get(slug);
+  this.el[0].insertBefore(item.el[0], old.el[0]);
+  old.el.remove()
+  this.items.splice(this.indexOf(old), 1, item);
+  this.select(item);
+  return this;
+};
+
+/**
+ * Clear menu.
+ *
+ * @return {Menu}
  * @api public
  */
 
-Menu.prototype.has = function(slug){
-  return !! (this.items[slug] || this.items[createSlug(slug)]);
+Menu.prototype.clear = function(){
+  this.el.empty();
+  this.items.length = 0;
+  return this;
 };
 
+/**
+ * Check if a menu item is present.
+ *
+ * ```js
+ * menu.add('Add item');
+ *
+ * menu.has('Add item');
+ * // => true
+ *
+ * menu.has('add-item');
+ * // => true
+ *
+ * menu.has('Foo');
+ * // => false
+ * ```
+ *
+ * @param {MenuItem} item
+ * @return {Boolean}
+ * @api public
+ */
+
+Menu.prototype.has = function(item){
+  return !!~this.items.indexOf(item);
+}
+
+/**
+ * Find index of menu `item`.
+ *
+ * @param {MenuItem} item
+ * @return {Number}
+ * @api public
+ */
+
+Menu.prototype.indexOf = function(item){
+  return this.items.indexOf(item);
+}
+
 /**
  * Move context menu to `(x, y)`.
  *
@@ -204,10 +482,53 @@ Menu.prototype.has = function(slug){
  */
 
 Menu.prototype.moveTo = function(x, y){
+  var width = o(this.el).outerWidth();
+
+  viewport.refresh();
+
+  if (x+width > viewport.right) {
+    x = viewport.right-width;
+  }
+
+  if (x < viewport.left) {
+    x = viewport.left;
+  }
+
   this.el.css({
-    top: y,
     left: x
   });
+
+  viewport.refresh();
+
+  var height = o(this.el).outerHeight();
+
+  if (y+height > viewport.bottom) {
+    y = viewport.bottom-height;
+  }
+
+  if (y < viewport.top) {
+    y = viewport.top;
+  }
+
+  this.el.css({
+    top: y
+  });
+
+  return this;
+};
+
+/**
+ * Move context menu to `(x, y)`.
+ *
+ * @param {Number} x
+ * @param {Number} y
+ * @return {Menu}
+ * @api public
+ */
+
+Menu.prototype.moveToCenter = function(x, y){
+  y -= this.el.outerHeight(true)/2
+  this.moveTo(x, y);
   return this;
 };
 
@@ -219,8 +540,15 @@ Menu.prototype.moveTo = function(x, y){
  */
 
 Menu.prototype.show = function(){
-  this.emit('show');
+  if (this.isOpen()) return this;
+
+  if (!this.hasVisibleItems()) return this;
+
   this.el.show();
+  this._isOpen = true;
+
+  this.emit('show');
+
   return this;
 };
 
@@ -232,11 +560,149 @@ Menu.prototype.show = function(){
  */
 
 Menu.prototype.hide = function(){
+  if (!this.isOpen()) return this;
+
   this.emit('hide');
+
   this.el.hide();
+  this._isOpen = false;
+
+  this._isSelecting = false
+
+  return this;
+};
+
+/**
+ * Show a menu item.
+ *
+ * @param {MenuItem} item
+ * @return {Menu}
+ * @api public
+ */
+
+Menu.prototype.showItem = function(item){
+  item.hidden = false;
+  item.el.css({ display: 'block' });
+  return this;
+};
+
+/**
+ * Hide a menu item.
+ *
+ * @param {MenuItem} item
+ * @return {Menu}
+ * @api public
+ */
+
+Menu.prototype.hideItem = function(item){
+  item.hidden = true;
+  item.el.css({ display: 'none' });
+  return this;
+};
+
+/**
+ * Unhide all items.
+ *
+ * @return {Menu}
+ * @api public
+ */
+
+Menu.prototype.unhideAll = function(){
+  var self = this;
+  this.items.forEach(function(item){
+    self.showItem(item);
+  });
+  return this;
+};
+
+/**
+ * Toggle the menu.
+ *
+ * @return {Menu}
+ * @api public
+ */
+
+Menu.prototype.toggle = function(){
+  if (this.isOpen()) this.hide();
+  else this.show();
+  return this;
+};
+
+/**
+ * Filter menu using `fn`.
+ *
+ * @param {Function} fn
+ * @return {Menu}
+ * @api public
+ */
+
+Menu.prototype.filter = function(fn){
+  var self = this;
+
+  this.items.forEach(function (item) {
+    if (fn(item)) {
+      self.showItem(item);
+    }
+    else {
+      self.hideItem(item);
+    }
+  });
+
+  if (!this.hasVisibleItems()) this.hide();
+
   return this;
 };
 
+/**
+ * Check if there are visible items.
+ *
+ * @return {Boolean}
+ * @api private
+ */
+
+Menu.prototype.hasVisibleItems = function(){
+  return this.items.filter(function (item) {
+    return !item.hidden;
+  }).length!=0
+};
+
+/**
+ * Check if menu is visible.
+ *
+ * @return {Boolean}
+ * @api public
+ */
+
+Menu.prototype.isOpen = function(){
+  return this._isOpen;
+};
+
+/**
+ * Check if user is selecting.
+ *
+ * @return {Boolean}
+ * @api public
+ */
+
+Menu.prototype.isSelecting = function(){
+  return this._isSelecting;
+};
+
+/**
+ * MenuItem class.
+ *
+ * @param {Object} item
+ * @api public
+ */
+
+function MenuItem(item) {
+  this.el = item.el
+  this.text = item.text
+  this.slug = item.slug
+  this.meta = item.meta
+  this.fn = item.fn
+}
+
 /**
  * Generate a slug from `str`.
  *
diff --git a/menu.css b/menu.css
index 97b3bd7..5ef2122 100644
--- a/menu.css
+++ b/menu.css
@@ -1,3 +1,4 @@
+
 .menu {
   position: absolute;
   top: 0;
@@ -5,8 +6,15 @@
   z-index: 100;
   margin: 0;
   padding: 0;
+  min-width: 120px;
   background: white;
-  border: 1px solid rgba(0,0,0,0.2);
+  border: 1px solid rgba(0,0,0,.3);
+  font-family: sans-serif;
+  font-size: 14px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .menu li {
@@ -15,7 +23,7 @@
 
 .menu li a {
   display: block;
-  padding: 5px 30px 5px 12px;
+  padding: 7.5px 15px 7.5px;
   text-decoration: none;
   border-top: 1px solid #eee;
   color: #2e2e2e;
@@ -28,5 +36,6 @@
 
 .menu li a:hover,
 .menu li.selected a {
-  background: #f1faff;
+  color: #fff;
+  background: #46a;
 }
diff --git a/test/index.html b/test/index.html
index 4c2d08e..ba180ee 100644
--- a/test/index.html
+++ b/test/index.html
@@ -3,23 +3,54 @@
   <head>
     <title>Menu</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="stylesheet" href="../build/build.css" />
+    <style>
+
+    html {
+      width: 100%;
+      height: 100%;
+      font-family: sans-serif;
+    }
+
+    body {
+      margin: 0;
+      padding: 50px;
+    }
+
+    .bigbox {
+      width: 2000px;
+      height: 2000px;
+    }
+    </style>
   </head>
   <body>
     <title>Menu</title>
+    Try right clicking anywhere on this page
+    <div class="bigbox"></div>
     <script src="../build/build.js"></script>
     <script>
+      require('stagas-watch-js');
       var menu = require('menu');
-  
+
       menu = menu();
-  
+
       menu
-      .add('add-item', 'Add <em>item</em>')
+      .add('add-item', 'Add <em>item</em>', function(){ menu.add('Item'); })
       .add('Edit item', function(){ console.log('edit'); })
       .add('Remove item', function(){ console.log('remove'); })
       .add('Remove "Add item"', function(){
         menu.remove('add-item');
         menu.remove('Remove "Add item"');
+      })
+      .add('Filter', function filterItem (){
+        menu.filter(function(item){
+          return item.slug.substr(0,1) !== 'r'
+        });
+        menu.change('Filter', 'Show all', function(){
+          menu.unhideAll();
+          menu.change('Show all', 'Filter', filterItem);
+        });
       });
 
       menu.on('select', function(item){
@@ -32,7 +63,7 @@
 
       oncontextmenu = function(e){
         e.preventDefault();
-        menu.moveTo(e.pageX, e.pageY);
+        menu.moveToCenter(e.pageX, e.pageY);
         menu.show();
       };
     </script>