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

Features:

  • 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.

toggle-gif

###Features

  • 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.

##Install

 $ bower install angular-hamburger-toggle --save

##Usage

  • 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 *