Monday, July 13FreeJQuery

Angular Hamburger Menu Toggle

Angular Hamburger Toggle

Angular hamburger Toggle menu is component which allow you to active a part of information or navigation that is hidden by default for UX purpose.

This usually means activating a SideNav, but might also roll down a Navbar menu.

Examples of Bootstrap hamburger menu use:

  • SideNav activation
  • Navbar menu


  • Two way bound state model.
  • Tuned for Bootstrap.
  • Super easy.

Angular directive of Material Design morphing hamburger menu. It’s based off of Material Design Hamburger.



  • Two way bound state model.
  • Tuned for Bootstrap.
  • Super easy.

How to style hamburger icon?

In my code example, I’m using class= “navbar-inverse” in line 1 of nav.component.html. And this means the hamburger icon is designed to be used by a dark/black nav bar background. Like below:

There is also class= “navbar-light” for a light/white nav bar background.

If you want a customer theme for the 3 lines and border, there is a codePen example where it shows you how to turn your hamburger icon PINK!

I hope this helps anyone who is wondering how to make a nav bar collapsible in Angular 4 and how to make style changes to the hamburger icon.


 $ bower install angular-hamburger-toggle --save


  • Add dependency
  angular.module('myApp', ['ngHamburger']);
  • Use directive
  <hamburger-toggle state="stateModel"></hamburger-toggle>

state attribute is for two way bound model that will be toggled. Initially can be truefalse or undefined.

##Credits Material Design Hamburger

##Author İsmail Demirbilek – @dbtek

For More Angular Jqueries Click

Read More | Demo | Download


Leave a Reply

Your email address will not be published. Required fields are marked *