diff --git a/config.json.dist b/config.json.dist
index e200227c4..5f4802d38 100644
--- a/config.json.dist
+++ b/config.json.dist
@@ -13,16 +13,21 @@
             "trans": "menu.home",
             "route": "public.posts",
             "icon": "icon ion-home"
-        }, {
-            "type": "internal",
-            "trans": "Mobile",
-            "route": "public.taxonomies.slug({ term: 'category', slug: 'mobile' })",
-            "icon": "icon ion-iphone"
         }, {
             "type": "internal",
             "trans": "menu.categories",
-            "route": "public.taxonomies({ term: 'category' })",
-            "icon": "icon ion-folder"
+            "icon": "icon ion-folder",
+            "list": [{
+                "type": "internal",
+                "trans": "Mobile",
+                "route": "public.taxonomies.slug({ term: 'category', slug: 'mobile' })",
+                "icon": "icon ion-iphone"
+            }, {
+                "type": "internal",
+                "trans": "All",
+                "route": "public.taxonomies({ term: 'category' })",
+                "icon": "icon ion-folder"
+            }]
         }, {
             "type": "internal",
             "trans": "menu.tags",
diff --git a/lib/directives/directives.module.coffee b/lib/directives/directives.module.coffee
index eb0984560..8fe93ee05 100644
--- a/lib/directives/directives.module.coffee
+++ b/lib/directives/directives.module.coffee
@@ -1,6 +1,7 @@
 require "angular-recursion"
 module.exports = angular.module 'wordpress-hybrid-client.directives', [
-    "RecursionHelper"
+    "RecursionHelper",
+    'vAccordion'
 ]
 
 require "./bindAndCompileHtml/bindAndCompileHtml.coffee"
@@ -15,4 +16,5 @@ require "./comment/comment.coffee"
 require "./loader/loader.coffee"
 require "./posts/posts.coffee"
 require "./post/post.coffee"
+require "./menu/menu.coffee"
 require "./href/href.coffee"
diff --git a/lib/directives/directives.scss b/lib/directives/directives.scss
index 3608e0c4f..652a494fc 100644
--- a/lib/directives/directives.scss
+++ b/lib/directives/directives.scss
@@ -4,3 +4,4 @@
 @import './loader/style.scss';
 @import './emptyList/style.scss';
 @import './comment/comment.scss';
+@import './menu/menu.scss';
diff --git a/lib/directives/menu/menu.coffee b/lib/directives/menu/menu.coffee
new file mode 100644
index 000000000..a7f765ac9
--- /dev/null
+++ b/lib/directives/menu/menu.coffee
@@ -0,0 +1,25 @@
+require "v-accordion/dist/v-accordion.js"
+require "v-accordion/dist/v-accordion.css"
+
+module.exports = angular.module 'wordpress-hybrid-client.directives'
+    .directive 'wphcMenu', ($log, RecursionHelper) ->
+        restrict: 'E'
+        transclude: false
+        replace: false
+        scope:
+            list: "="
+        template: require './menu.html'
+        bindToController: true
+        controllerAs: 'menuCtrl'
+        compile: (el) ->
+            RecursionHelper.compile el
+        controller: ($log, $scope, $element) ->
+            vm = @
+    .directive 'wphcMenuSref', () ->
+        restrict: 'A'
+        scope: false
+        controller: ($log, $scope, $element, $attrs, $ionicSideMenuDelegate) ->
+            $attrs.$observe 'wphcMenuSrefIsExpandable', (value) =>
+                isExpandable = parseInt(value) > 0
+                $element.on 'click', (event) ->
+                    if isExpandable then event.preventDefault() else $ionicSideMenuDelegate.toggleLeft()
diff --git a/lib/directives/menu/menu.html b/lib/directives/menu/menu.html
new file mode 100644
index 000000000..512c94c81
--- /dev/null
+++ b/lib/directives/menu/menu.html
@@ -0,0 +1,28 @@
+<div>
+    <v-accordion>
+        <div ng-repeat="item in ::menuCtrl.list track by $index">
+            <v-pane ng-if="item.type == 'external'" ng-class="::{'is-expandable': item.list}">
+                <v-pane-header wphc-href-in-app class="item" ng-class="::{'item-icon-left': item.icon}" menu-close target="_blank" ng-href="{{::item.href}}">
+                    <i class="{{::item.icon}}" ng-if="::item.icon"></i> {{item.trans | translate}}
+                </v-pane-header>
+                <v-pane-content>
+                    <wphc-menu ng-if="::item.list" list="item.list"></wphc-menu>
+                </v-pane-content>
+            </v-pane>
+            <v-pane ng-if="item.type == 'internal'" ng-class="::{'is-expandable': item.list}">
+                <v-pane-header class="item" ng-class="::{'item-icon-left': item.icon}" wphc-menu-sref wphc-menu-sref-is-expandable="{{::item.list.length}}" ui-sref="{{::item.route}}" ui-sref-active-eq="active">
+                    <i class="{{::item.icon}}" ng-if="::item.icon"></i> {{item.trans | translate}}
+                </v-pane-header>
+                <v-pane-content>
+                    <wphc-menu ng-if="::item.list" list="item.list"></wphc-menu>
+                </v-pane-content>
+            </v-pane>
+            <v-pane ng-if="item.type == 'separator'">
+                <v-pane-header class="item item-divider">
+                    {{item.trans | translate}}
+                </v-pane-header>
+                <v-pane-content></v-pane-content>
+            </v-pane>
+        </div>
+    </v-accordion>
+</div>
diff --git a/lib/directives/menu/menu.scss b/lib/directives/menu/menu.scss
new file mode 100644
index 000000000..9586cd343
--- /dev/null
+++ b/lib/directives/menu/menu.scss
@@ -0,0 +1,115 @@
+@mixin item($color, $amount) {
+    > .item {
+        background-color: $color;
+        border-color: darken($color, $amount + 7%);
+        i.icon {
+            color: darken($menu-icon-color, $amount + 2%);
+        }
+        &.active{
+            background-color: darken($color, $amount + 10%);
+        }
+        &:after {
+            color: darken($menu-icon-level-color, $amount + 2%);
+        }
+        &.item-divider {
+            background-color: darken($color, $amount + 6%);
+            border-color: darken($color, $amount + 10%);
+        }
+    }
+}
+@mixin recursive-item($from:1, $to:6, $color: #FFFFFF, $amount: 4%) {
+    @if $from < $to {
+        v-pane {
+            $color: darken($color, $amount);
+            @include item($color, $amount);
+            @include recursive-item($from+1, $to, $color, $amount + 1%);
+        }
+    }
+}
+wphc-menu {
+    v-accordion {
+        v-pane {
+            transition: transform $menu-pane-expand-duration;
+            &.is-expanded-add > v-pane-content,
+            &.is-expanded-remove > v-pane-content {
+                transition: max-height $menu-pane-expand-duration;
+            }
+            &.is-expandable {
+                > v-pane-header {
+                    padding-right: 30px;
+                    &:after {
+                        transform-origin: 50% 50%;
+                        transition: all $menu-pane-hover-duration;
+                        color: $menu-icon-level-color;
+                        content: "\f3d3";
+                        font-family: "Ionicons";
+                        position: absolute;
+                        right: 11px;
+                        top: 17px;
+                        font-size: 30px;
+                    }
+                }
+                > v-pane-content > div {
+                    will-change: transform, opacity;
+                    opacity: 0;
+                    transform: translate3d(0, 30px, 0);
+                    transition: transform $menu-pane-expand-duration, opacity $menu-pane-expand-duration;
+                }
+            }
+            &.is-expanded {
+                > v-pane-header {
+                    &:after {
+                        transform: rotate(90deg);
+
+                        // content: "\f3d0";
+                    }
+                }
+                > v-pane-content > div {
+                    opacity: 1;
+                    transform: translate3d(0, 0, 0);
+                }
+            }
+            i.icon {
+                color: $menu-icon-color;
+            }
+            @include item($menu-starting-bg-color, 0%);
+            @include recursive-item(1, $menu-max-depth, $menu-starting-bg-color, $menu-starting-darken-amount);
+        }
+    }
+}
+v-accordion {
+    display: block;
+}
+v-pane {
+    display: block;
+    &.is-expanded {
+        > v-pane-content > div {
+            visibility: visible;
+        }
+    }
+}
+v-pane-header {
+    display: block;
+    position: relative;
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    &:focus {
+        outline: none;
+    }
+    &[disabled] {
+        pointer-events: none;
+    }
+    > div {
+        display: block;
+    }
+}
+v-pane-content {
+    display: block;
+    position: relative;
+    overflow: hidden;
+    max-height: 0;
+    > div {
+        visibility: none;
+    }
+}
diff --git a/lib/menu/menu.html b/lib/menu/menu.html
index 58bc97404..db51c147e 100644
--- a/lib/menu/menu.html
+++ b/lib/menu/menu.html
@@ -2,25 +2,5 @@
     <h1 class="title">{{main.appTitle}}</h1>
 </ion-header-bar>
 <ion-content>
-    <ion-list flex>
-        <span ng-repeat="menu in ::menu.list track by $index">
-            <span ng-switch="menu.type">
-                <span ng-switch-when="internal">
-                    <ion-item class="item" ng-class="::{'item-icon-left': menu.icon}" nav-clear menu-close ui-sref="{{::menu.route}}" ui-sref-active-eq="active">
-                        <i class="balanced {{::menu.icon}}" ng-if="::menu.icon"></i> {{menu.trans | translate}}
-                    </ion-item>
-                </span>
-                <span ng-switch-when="external">
-                    <ion-item wphc-href-in-app class="item" ng-class="::{'item-icon-left': menu.icon}" target="_blank" ng-href="{{::menu.href}}">
-                        <i class="balanced {{::menu.icon}}" ng-if="::menu.icon"></i> {{menu.trans | translate}}
-                    </ion-item>
-                </span>
-                <span ng-switch-when="separator">
-                    <div class="item item-divider">
-                        {{menu.trans | translate}}
-                    </div>
-                </span>
-            </span>
-        </span>
-    </ion-list>
+    <wphc-menu list="menu.list"></wphc-menu>
 </ion-content>
diff --git a/lib/scss/_variables.scss b/lib/scss/_variables.scss
index 9bc4bf57b..3547ae2c6 100644
--- a/lib/scss/_variables.scss
+++ b/lib/scss/_variables.scss
@@ -8,6 +8,7 @@ $palette-primary-background: white !default;
 $palette-accent-color: #009688 !default;
 $palette-secondary-text: #727272 !default;
 $palette-divider-color: #eaeaea !default;
+
 // Ionic palette match
 $light: $palette-primary-icon;
 $stable: $palette-divider-color;
@@ -16,18 +17,22 @@ $energized: $palette-accent-color;
 $balanced: $palette-secondary-text;
 $dark: $palette-primary-dark;
 $positive: $palette-primary-color;
+
 // Base
 // ------------------------------
 $base-background-color: $palette-primary-background;
 $base-color: $palette-primary-text;
 $font-family-sans-serif: "Roboto", "Helvetica Neue", "Segoe UI", sans-serif !default;
+
 // $font-size-base: 15px !default;
 $line-height-base: 1.828571429 !default;
+
 // 20/14
 // ------------------------------
 $item-default-bg: $palette-primary-background;
 $item-default-border: $palette-divider-color;
 $item-default-text: $palette-primary-text;
+
 // Grays
 // ------------------------------
 $gray-base: #000 !default;
@@ -38,11 +43,14 @@ $gray-light: lighten($gray-base, 46.7%) !default;
 $gray-lighter: lighten($gray-base, 93.5%) !default;
 $bar-height: 64px !default;
 $bar-padding-portrait: 10px !default;
+
 // Custom break point
 $grid-responsive-xl-break: 1450px !default;
+
 // The path for our ionicons font files, relative to the built CSS in www/css
 $ionicons-font-path: "../../node_modules/ionic-sdk/release/fonts" !default;
 $font-family-base: inherit;
+
 // Loader
 // ------------------------------
 $loader-width: 50px;
@@ -51,10 +59,12 @@ $loader-zIndex: 1002;
 $loader-bg: $gray-lighter;
 $loader-stroke: $positive;
 $loader-fill: $positive;
+
 // Empty list directive
 // ----------------------
 $emptyList-bg: $gray-lighter;
 $emptyList-zIndex: 1001;
+
 // Post
 // ------------------------------
 $post-title-size: 24px;
@@ -65,6 +75,7 @@ $post-img-title-size: $post-title-size;
 $post-img-title-padding: 20px;
 $post-img-title-color: white;
 $post-img-title-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+
 // Layout
 // ------------------------------
 $baseline-grid: 8px !default;
@@ -72,6 +83,7 @@ $layout-breakpoint-sm: 600px !default;
 $layout-breakpoint-md: 960px !default;
 $layout-breakpoint-lg: 1200px !default;
 $layout-gutter-width: ($baseline-grid * 2) !default;
+
 // Code
 // ------------------------------
 $code-font-family: Menlo, Monaco, Consolas, "Courier New", monospace !default;
@@ -81,3 +93,13 @@ $pre-bg: #f5f5f5 !default;
 $pre-color: $gray-dark !default;
 $pre-border-color: #ccc !default;
 $pre-scrollable-max-height: 340px !default;
+
+// Menu
+// -------------------------------
+$menu-icon-color: $balanced;
+$menu-starting-bg-color: white;
+$menu-starting-darken-amount: 4%;
+$menu-icon-level-color: lighten($menu-icon-color, 10%);
+$menu-max-depth: 6;
+$menu-pane-expand-duration:  0.5s  !default;
+$menu-pane-hover-duration:   0.25s !default;
diff --git a/package.json b/package.json
index 363a06d28..b6e6f0051 100644
--- a/package.json
+++ b/package.json
@@ -104,6 +104,7 @@
     "lodash": "^3.9.3",
     "moment": "^2.9.0",
     "ng-cordova": "^0.1.17-alpha",
+    "v-accordion": "^1.2.7",
     "wp-api-angularjs": "^1.0.0"
   }
 }