an angular directive to show a "hamburger" menu icon that can transform into a back arrow


Added by: Sam Deering





Stars: 3

Watchers: 3

Forks: 1



Module Description


what is angular-hamburger-helper?

angular-hamburger-helper is a directive written in angular that provides a "hamburger" icon commonly used to denote a menu icon. In some application states if the menu is not available you will want this to be replaced with a back arrow.

you can see a live demo here.

it should look like

a spinning hamburger that turns into an arrow

um why?

this transition was inspired by the delightful details section of google's material-design specification.

oh ok

how do i use it?

  1. install the module using bower at the command line:

     bower install infomofo/angular-hamburger-helper
  2. include the css file in your html file:

    <link rel="stylesheet" href="bower_components/angular-hamburger-helper/ng-hamburger-helper.css"/>
  1. include the javascript file in your html file:

     <script type='text/javascript' src='bower_components/angular-hamburger-helper/ng-hamburger-helper.js'></script>
  2. include the hamburger helper service in your angular module config:

     var app = angular.module('YourApp',['hamburgerHelper']);
  3. use the directive in your html file. the directive appears as a 44x44 hamburger icon, when "variable" evaluates to true it will rotate and transform into a backwards arrow.

  4. use the hamburgerHelper service to toggle the state of the button:

but i want it to be pink or bigger or something

you can style the icon with some css:

.hamburger-helper {     
  /* modifying the height or width will also require modifying the font-size to ensure that the arrow head still lines up */
  height: 44px;
  font-size: 22px;
    width: 44px;
  /* this affects the speed of the rotation */
    transition: transform 0.3s; 

.hamburger-helper span {
  /* the height of the hamburger bars and width of the arrow */
    height: 0.3em; 

.hamburger-helper span,
.hamburger-helper span:after,
.hamburger-helper span:before {
  /* the color of the hamburger and arrow */
    background-color: #fff;

.hamburger-helper span:after,
.hamber-helper span:before {
  /* this affects the speed that the hamburger buns are transformed into the arrow */
  transition: transform 0.3s;

Module stats last updated: 2015-06-08 00:38:16

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!