Angular JS module for bottom drawer; useful for mobile



Stars : 10

Forks : 10

Created by Toks Fifo

Download GitHub


AngularJS module for bottom drawer; particularly useful for mobile.


  • Drawer closes when the backdrop is tapped or when "Cancel" (included by default, is tapped). To remove the "Cancel" item, pass in true as the 2nd parameter to (default is false).
  • Supports icons preceding text (from Font Awesome or any font icon set). Include the class name as the item's icon.
  • Allows for function to be called on icon tap. Include the function (wrapped in an anonymous function, see Usage) as the item's fn.
  • Allows for recursive drawers, i.e. tapping one drawer item closes the current drawer and opens another. To use, include recursive: true in the item's object and call in the item's fn. See Usage.


Include the following files in your HTML: * dist/bottomDrawer.min.js * dist/bottomDrawer.min.css

Note: This module depends on ngAnimate if you want transitions.

Note: bottomDrawer.min.css comes with the following default styles (feel free to edit for personal use): * background-color (semi-transparent backdrop when drawer is open): rgba(0, 0, 0, 0.4) * background-color (drawer): white * color (drawer text): black * font-size (drawer text): 16px * height (individual drawer item): 45px * max-height (drawer, not including "Cancel" item): 247.5px (45px * 5.5) * transition (all): 0.25s ease-in-out


HTML (include once in main view, usually in index.html, and outside ng-view):



// inject bottom-drawer module
angular.module('yourApp', ['bottomDrawer']);

// inject bottom-drawer service
  .controller('YourCtrl', ['$scope', 'bottomDrawerService', function($scope, bottomDrawerService) {

  // open drawer with individual items (objects) in array[{
    text: 'Add a photo', // text displayed in drawer
    icon: 'fa fa-file-photo-o fa-fw', // OPTIONAL Font Awesome icon (class) to precede text (strongly consider adding the fixed width option: fa-fw)
    fn: function() { // OPTIONAL function to be called on item tap
  }, {
    text: 'Save offline map',
    icon: 'fa fa-map-marker fa-fw',
    fn: function() {
      console.log('saving map :)');
  }, {
    text: 'Share', 
    icon: 'fa fa-share-alt fa-fw', 
    recursive: true, // OPTIONAL recursive
    fn: function() {[{
        text: 'Facebook',
        icon: 'fa fa-facebook fa-fw',
        fn: function() {
      }, {
        text: 'Twitter',
        icon: 'fa fa-twitter fa-fw',
        fn: function() {



Javascript plugin