How to Create a Hamburger Menu in Angular
Build a mobile header that tucks away nicely in a hamburger menu
Last weekend, I took the opportunity to work on the website of a local and very talented photographer. One of the main requirements of this website is to be responsive. This means that the navigation bar should work well on mobile phones, which means it should be creative in the way it uses screen space.
On large monitors, there is a lot of space to display navigation links on a navigation bar. However, space is limited on tablets — even more so on mobile devices. We cannot show every detail of the page immediately. It would just be a horrible user experience. In the front-end world, we like to put those navigation links behind a hamburger menu.
In this article, you’ll read how you can create this hamburger menu yourself. We’ll try to avoid any unneeded work, so don’t worry about CSS! Instead of reinventing the wheel, we’ll be using a library. I’ll guide you through my solution and show you how to open/close a menu with the use of Angular. Don’t worry, I promise that it will take less time to implement your own hamburger menu than to collect your hamburger menu elsewhere. Watch and learn, fast food companies.
Note: The “hamburger menus” name dates back to 1981 and designer Norm Cox. It indicates that the icon contains a list of items.
Installing the npm Library
The library itself has already existed for about two years on npm. I’ve only heard about it recently. The version at the time of writing is 1.1.3 and works very well in every browser I’ve tried so far.
The installation itself can be done using the following command:
npm install hamburgersIf you’re using SCSS (like I was), you also have to add the following line to your styles.scss. This will make sure the CSS of the burger menu is loaded correctly. This line of CSS locates the styling you need directly inside the node_modules folder:
@import '~hamburgers/_sass/hamburgers/hamburgers.scss';That’s all you need to do to install this library. If you have a different setup, you can use the npm site as a guide to configure your environment yourself.
To display the hamburger menu inside one of your pages, simply copy-paste the following lines of HTML code:
<button class="hamburger" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>Trigger Open/Close Animation on Click
In my opinion, there are two possible ways to show the transition from open to closed in Angular. The first way is to react upon the click event by toggling a boolean value. In the menu, you can then check if the boolean itself is true or false and show the is-active class accordingly (using the ngClass directive).
In this article, we’ll go for a different solution. But this can be a good exercise to try yourself.
Note: There are advantages to both options, so feel free to pick the one that suits your use case best. Using a directive can make the rest of the code easier to understand, as it will separate the open/close animation of the hamburger menu itself from the open/close animation of the navigation bar, for example. I do not believe one solution is superior to the other.
That brings us to the second option. You can encapsulate the toggling behavior to its own directive (HamburgerToggle), shown in the snippet down below. Inside the directive, we add a host listener for the click event that toggles a boolean (isActive). Additionally, we’ll add a host binding for the is-active class. This class will then only be shown when this boolean value is true.
That leaves us with only two things we should do. Firstly, declare the directive inside your module. Secondly, add the name of the directive inside your HTML template. The button will now successfully switch between the open/close animation on click.
Note: You might notice that I’ve added a spin animation. The hamburger npm package comes with a lot of animations to choose from. You should really check it out. It’s awesome.
<button class="hamburger hamburger--spin" type="button"
appHamburgerToggle>Trigger Open/Close on Navigation Bar
In this part, we’ll uncollapse the navigation bar when clicking on the hamburger menu. The first part of the solution is like the first solution of the previous section. We add a boolean (collapse) to our component that is initially true. We also toggle this boolean on click. You can probably figure it out by yourself, but it looks like this:
toggleCollapse(): void {
this.collapse = !this.collapse;
}There are now multiple possibilities on how you hide or show the navigation bar. It comes down to changing the CSS visibility/opacity, depending on the animation you’d like.
If you’re using a library that already offers some toggle functionality, you can use that. I won’t hold it against you. If you aren’t, you can do the animations yourself. It’s really not that hard. I’d highly recommend this because it is the most lightweight solution. It also gives you the most control over how to display the animation.
Note: Don’t forget to install Angular animations if you want to see them working.
In your component, you have to add the states (in this case, simply false or true). We define the CSS properties (like height and visibility) here.
Next, you have to define transitions. In this case, there are only two transitions. We can go from the collapsed state to the uncollapsed state. In that case, we’d like to ease out and vice versa. Finally, add the animation we just defined to the template:
<div class="navigation-links" [@collapse]="collapse">...</div>You might have noticed, in general, that we use ease-in and ease-out in the opposite way. We ease-in when things are moving out. We ease-out when things are moving in. Read more about that on CSS -Tricks.
Conclusion
On almost every site that has a mobile version, we see the hamburger menu appear. In this article, we’ve seen what it takes to implement this yourself in the Angular framework. We have touched on some of the great things this framework offers, like directives and the amazing animations library. In the end, we have an amazing burger menu with a cool open-close animation.
If you liked it or have something to add, please let me know in the comments down below. Thanks for reading!
Interested in personal training or coaching? Mail me at info@kwal-it.be or visit our site for our other services.
