node package manager
Love JavaScript? Your insights can make it even better. Take the 2017 JavaScript Ecosystem Survey »


Angularjs Slideout

Lightweight angular slideout directive for mobile which does not require angular-animate.js



  • angular
  • Optional dependency of angular touch for swiping menu away


If you are using npm or webpack

npm install --save angular-slideout

Import angular-slideout after angular and require it as a module to your app.

var angular_slideout = require('angular-slideout');
var app = angular.module('app', ['angular-slideout', 'ngTouch']);
app.controller('main', function($scope) {});

Otherwise import slideout.min.js as so.

<!-- Angular -->
<script src=""></script>
<!-- Angular touch (not required) -->
<script src=""></script>
<!-- Slideout module -->
<script src="slideout.min.js"></script>
<!-- Your App Code -->
    // import angular-slideout 
    var app = angular.module('app', ['angular-slideout', 'ngTouch']);
    app.controller('main', function($scope) {});


Configure your sidebar content

<nav slideout="show_menu" slideout-direction="from-left">
  <div class="back-button" ng-click="show_menu = false;">Back</div>
  <h2>Menu content</h2>
  • The slideout attribute: Use a boolean variable to determine whether to show slideout.
  • The slideout direction: Options are 'from-left' or 'from-right'

Configure sidebar toggles

<div class="show-sidebar" ng-click="show_menu = true;">
  Show sidebar

Configure swipe toggles (requires angular-touch)

<div class="container"
     ng-swipe-left="show_menu = true"
     ng-swipe-right="show_menu = false; show_sub_menu = false;">