diff --git a/src/js/components/navbars.js b/src/js/components/navbars.js
index a5d83ab..e03c419 100644
--- a/src/js/components/navbars.js
+++ b/src/js/components/navbars.js
@@ -12,23 +12,23 @@
  * It uses scrollable areas to avoid scroll issues. In the following figure you can
  * see the difference between fixed navbars and navbars with absolute positioning.
  *
- * <figure class="full-width-figure">
- *   <img src="/assets/img/figs/fixed-overflow.png" alt=""/>
+ * <figure class='full-width-figure'>
+ *   <img src='/assets/img/figs/fixed-overflow.png' alt=''/>
  * </figure>
  *
  * Here is the basic markup to achieve this.
  *
  * ``` html
- * <div class="app">
- *   <div class="navbar navbar-app navbar-absolute-top">
+ * <div class='app'>
+ *   <div class='navbar navbar-app navbar-absolute-top'>
  *     <!-- ... -->
  *   </div>
  *
- *   <div class="navbar navbar-app navbar-absolute-bottom">
+ *   <div class='navbar navbar-app navbar-absolute-bottom'>
  *     <!-- ... -->
  *   </div>
  *
- *   <div class="app-body">
+ *   <div class='app-body'>
  *     <ng-view></ng-view>
  *   </div>
  * </div>
@@ -53,24 +53,25 @@
  * Consider the following example:
  *
  * ``` html
- * <div class="navbar navbar-app navbar-absolute-top">
+ * <div class='navbar navbar-app navbar-absolute-top'>
  *
- *   <div class="navbar-brand navbar-brand-center">
+ *   <div class='navbar-brand navbar-brand-center'>
  *     Navbar Brand
  *   </div>
  *
- *   <div class="btn-group pull-left">
- *     <div class="btn btn-navbar">
+ *   <div class='btn-group pull-left'>
+ *     <div class='btn btn-navbar'>
  *       Left Action
  *     </div>
  *   </div>
  *
- *   <div class="btn-group pull-right">
- *     <div class="btn btn-navbar">
+ *   <div class='btn-group pull-right'>
+ *     <div class='btn btn-navbar'>
  *       Right Action
  *     </div>
  *   </div>
  * </div>
+ *
  * ```
  *
  * `.navbar-brand-center` is a specialization of BS3's `.navbar-brand`.  It will
@@ -85,33 +86,35 @@
 
   var module = angular.module('mobile-angular-ui.components.navbars', []);
 
-  /**
-   * @directive navbarAbsoluteTop
-   * @restrict C
-   * @description
-   *
-   * Setup absolute positioned top navbar.
-   *
-   * ``` html
-   *  <div class="navbar navbar-app navbar-absolute-top">
-   *    <!-- ... -->
-   *  </div>
-   * ```
-   */
+  var global;
 
-  /**
-   * @directive navbarAbsoluteBottom
-   * @restrict C
-   * @description
-   *
-   * Setup absolute positioned bottom navbar.
-   *
-   * ``` html
-   *  <div class="navbar navbar-app navbar-absolute-bottom">
-   *    <!-- ... -->
-   *  </div>
-   * ```
-   */
+ /**
+  * @directive navbarAbsoluteTop
+  * @restrict C
+  * @description
+  *
+  * Setup absolute positioned top navbar.
+  *
+  * ``` html
+  *  <div class='navbar navbar-app navbar-absolute-top'>
+  *    <!-- ... -->
+  *  </div>
+  * ```
+  */
+
+ /**
+  * @directive navbarAbsoluteBottom
+  * @restrict C
+  * @description
+  *
+  * Setup absolute positioned bottom navbar.
+  *
+  * ``` html
+  *  <div class='navbar navbar-app navbar-absolute-bottom'>
+  *    <!-- ... -->
+  *  </div>
+  * ```
+  */
   angular.forEach(['top', 'bottom'], function(side) {
     var directiveName = 'navbarAbsolute' + side.charAt(0).toUpperCase() + side.slice(1);
     module.directive(directiveName, [
@@ -119,14 +122,70 @@
       function($rootElement) {
         return {
           restrict: 'C',
-          link: function(scope) {
+          controller: function() {
+            this.registerController = function(name, ctrl) {
+              this[name] = ctrl;
+            };
+          },
+          link: function(scope, elem, attr, ctrl) {
             $rootElement.addClass('has-navbar-' + side);
             scope.$on('$destroy', function() {
               $rootElement.removeClass('has-navbar-' + side);
             });
+            if (!global) global = ctrl;
+            global.registerController(side, new (function() {
+              this.hide = function() {
+                $rootElement.removeClass('has-navbar-' + side);
+                elem.addClass('ng-hide');
+              };
+              this.show = function() {
+                elem.removeClass('ng-hide');
+                $rootElement.addClass('has-navbar-' + side);
+              };
+              this.slideout = function() {
+                $rootElement.removeClass('has-navbar-' + side);
+                elem.addClass('ng-hide');
+              };
+              this.slidein = function() {
+                elem.removeClass('ng-hide');
+                $rootElement.addClass('has-navbar-' + side);
+              };
+            })());
           }
         };
       }
     ]);
   });
+
+  /**
+   * @directive [hide|show|slidein|slideout][Top|Bottom|Both][Nav]
+   * @restrict C
+   * @description
+   *
+   * Toggle each(or both) nabar(s) with or without animations
+   *
+   * ``` html
+   *  <view class='[hide|show|slidein|slideout]-[top|bottom|both]-[nav]'>
+   *    <!-- ... -->
+   *  </view>
+   * ```
+   */
+  angular.forEach(['Top', 'Bottom', 'Both'], function(nav) {
+    angular.forEach(['hide', 'show', 'slidein', 'slideout'], function(method) {
+      var name = method + nav + 'Nav';
+      module.directive(name, function() {
+        return {
+          restrict: 'C',
+          link: function(scope, elem, attr) {
+            if (global)
+              if (nav === 'Both') {
+                global.bottom[method]();
+                global.top[method]();
+              } else
+                global[nav.toLowerCase()][method]();
+          }
+        };
+      });
+    });
+  });
 })();
diff --git a/test/unit/components/navbars.spec.js b/test/unit/components/navbars.spec.js
index 747dd17..8019de9 100644
--- a/test/unit/components/navbars.spec.js
+++ b/test/unit/components/navbars.spec.js
@@ -21,7 +21,7 @@ describe('components', function() {
 
     describe('navbarAbsoluteTop', function() {
       it('adds class has-navbar-top if navbarAbsoluteTop is present', function() {
-        let elem = angular.element('<div class="navbar-absolute-top" />');
+        let elem = angular.element('<div class="navbar-absolute-top" nav-controller />');
         compile(elem)(scope);
         scope.$digest();
 
@@ -29,7 +29,7 @@ describe('components', function() {
       });
 
       it('removes class has-navbar-top if navbarAbsoluteTop is destroyed', function() {
-        let elem = angular.element('<div class="navbar-absolute-top" />');
+        let elem = angular.element('<div class="navbar-absolute-top" nav-controller />');
         compile(elem)(scope);
         scope.$digest();
         scope.$destroy();
@@ -39,7 +39,7 @@ describe('components', function() {
 
     describe('navbarAbsoluteBottom', function() {
       it('adds class has-navbar-bottom if navbarAbsoluteBottom is present', function() {
-        let elem = angular.element('<div class="navbar-absolute-bottom" />');
+        let elem = angular.element('<div class="navbar-absolute-bottom" nav-controller />');
         compile(elem)(scope);
         scope.$digest();
 
@@ -47,12 +47,97 @@ describe('components', function() {
       });
 
       it('removes class has-navbar-bottom if navbarAbsoluteBottom is destroyed', function() {
-        let elem = angular.element('<div class="navbar-absolute-bottom" />');
+        let elem = angular.element('<div class="navbar-absolute-bottom" nav-controller />');
         compile(elem)(scope);
         scope.$digest();
         scope.$destroy();
         expect($rootElement.attr('class')).not.toContain('has-navbar-bottom');
       });
     });
+
+    describe('hideTopNav', function() {
+      it('hides the navbarAbsoluteTop when present within the nested view', function() {
+        let value = '<div><top class="navbar-absolute-top" nav-controller />';
+        value += '<ng-view><div class="hide-top-nav"></div></ng-view></div>';
+        let elem = angular.element(value);
+        compile(elem)(scope);
+        scope.$digest();
+
+        expect($rootElement.attr('class')).not.toContain('has-navbar-top');
+        expect(elem.find('top').attr('class')).toContain('ng-hide');
+      });
+    });
+
+    describe('hideBottomNav', function() {
+      it('hides the navbarAbsoluteBottom when present within the nested view', function() {
+        let value = '<div><bottom class="navbar-absolute-bottom" nav-controller />';
+        value += '<ng-view><div class="hide-bottom-nav"></div></ng-view></div>';
+        let elem = angular.element(value);
+        compile(elem)(scope);
+        scope.$digest();
+
+        expect($rootElement.attr('class')).not.toContain('has-navbar-bottom');
+        expect(elem.find('bottom').attr('class')).toContain('ng-hide');
+      });
+    });
+
+    describe('slideoutBottomNav', function() {
+      it('hides the navbarAbsoluteBottom when present within the nested view', function() {
+        let value = '<div><bottom class="navbar-absolute-bottom" nav-controller />';
+        value += '<ng-view><div class="slideout-bottom-nav"></div></ng-view></div>';
+        let elem = angular.element(value);
+        compile(elem)(scope);
+        scope.$digest();
+
+        expect($rootElement.attr('class')).not.toContain('has-navbar-bottom');
+        expect(elem.find('bottom').attr('class')).toContain('ng-hide');
+      });
+    });
+
+    describe('slideoutTopNav', function() {
+      it('hides the navbarAbsoluteTop when present within the nested view', function() {
+        let value = '<div><top class="navbar-absolute-top" nav-controller />';
+        value += '<ng-view><div class="slideout-top-nav"></div></ng-view></div>';
+        let elem = angular.element(value);
+        compile(elem)(scope);
+        scope.$digest();
+
+        expect($rootElement.attr('class')).not.toContain('has-navbar-top');
+        expect(elem.find('top').attr('class')).toContain('ng-hide');
+      });
+    });
+
+    describe('hideBothNav', function() {
+      it('hides both navbarAbsoluteTop && navbarAbsoluteBottom when present within the nested view', function() {
+        let value = '<div><bottom class="navbar-absolute-bottom" nav-controller />';
+        value += '<top class="navbar-absolute-top" nav-controller /><ng-view>';
+        value += '<div class="hide-both-nav"></div></ng-view></div>';
+        let elem = angular.element(value);
+        compile(elem)(scope);
+        scope.$digest();
+
+        expect($rootElement.attr('class')).not.toContain('has-navbar-bottom');
+        expect($rootElement.attr('class')).not.toContain('has-navbar-top');
+        expect(elem.find('bottom').attr('class')).toContain('ng-hide');
+        expect(elem.find('top').attr('class')).toContain('ng-hide');
+      });
+    });
+
+    describe('slideoutBothNav', function() {
+      it('hides both navbarAbsoluteTop && navbarAbsoluteBottom when present within the nested view', function() {
+        let value = '<div><bottom class="navbar-absolute-bottom" nav-controller />';
+        value += '<top class="navbar-absolute-top" nav-controller /><ng-view>';
+        value += '<div class="slideout-both-nav"></div></ng-view></div>';
+        let elem = angular.element(value);
+        compile(elem)(scope);
+        scope.$digest();
+
+        expect($rootElement.attr('class')).not.toContain('has-navbar-bottom');
+        expect($rootElement.attr('class')).not.toContain('has-navbar-top');
+        expect(elem.find('bottom').attr('class')).toContain('ng-hide');
+        expect(elem.find('top').attr('class')).toContain('ng-hide');
+      });
+    });
+
   });
 });