Mobile-First Global Navigation & Hamburger Menu for React Apps

5 min readJun 30, 2021

Context

There are many menu libraries out there, however a global navigation and hamburger menu is one of those areas which if you build it yourself, it will give you a lot of flexibility in terms of what you need to do with it in future.

Alternatively, if you just get it from a component, at some point, that may or may not be aligned with what you want, and then you will have to redo it.

In this post, we will build a hamburger menu together, that serves as the Global Navigation of our App as well on various form factors.

By the way, this topic belongs to the series to set up a Single Page Application using React, Redux and Asp.NET 5.0.

End Result

The menu of this website has literally been built using the same method I explain here, so if you like it, you will like the end result.

And here is the mobile version:

And where it is open in Mobile mode:

Having that said, as it is not relying on any other component or library, you can whatever you want with it, or change the style to match yours.

Design

There are a few points you need to consider when you design your global navigation.

Style: Global Navigation should probably be visible to users even if they scroll, as you should provide them with an easy mechanism to navigate from one feature to the other. So unlike the footer, it needs to be sticky to the top.
Content: You generally have your logo, you hierarchical menu items, user space buttons such as Login/Logout, and action items such as call button.
Depth: The menu in this post, can go 2 level deep. You really need to think about how many levels you include. The approach I have taken here is if there are going be deeper menu items, perhaps you should include them within the selected page. (i.e. you can include secondary navigation, which is not part of the GlobalNavigation. You only include them within each feature). This approach keeps your menu structure clean, and it won’t lead to crowded multi-level complex menus.
Data: I have separated the data from the render functions into an array. This means you can easily fetch your menu items and its hierarchy from a backend API, or include them here in code in a static way. Dynamic menu items could also help you from the security stand point, if you decided to run some business rules on when to show/hide them.
Roles: Another variation, when it comes to showing the menu items based on who has logged in, is to restrict user’s access. So the user will see the menu item, but they can’t access it, if the intention is to motivate them to upgrade their membership plan. I will cover Restricted Routes in another post.

Code

Now let’s go through the implementation of we talked about. First of all, the separation of data elements from the render function. This is how I have defined my menu items here, which you can easily fetch it from your backend APIs, where each menu item contains all the elements such as title, URL, icon, etc.

Note
Configuration, plumbing and troubleshooting your software foundation take a considerable amount of time in your product development. Consider using Pellerex which is a complete foundation for your enterprise software products, providing source-included Identity and Payment functions across UI (React), API (.NET), Pipeline (Azure DevOps) and Infrastructure (Kubernetes).

Next is the actual render method, which takes the data, and create the structure that have talked about.

As you can see, it is a really simple logic of going through menu items and rendering necessary elements. Below also is the helper method I have used above:

And finally he are the styles for both desktop, and responsive modes.

https://gist.github.com/MahdiKarimipour/590ae97300c6fd60d63fa1582b2c64eb

For the variables file, refer to Styling React Apps with CSS Module.

Pellerex Foundation: For Your Next Enterprise Software

How are you building your current software today? Build everything from scratch or use a foundation to save on development time, budget and resources? For an enterprise software MVP, which might take 8–12 months with a small team, you might indeed spend 6 months on your foundation. Things like Identity, Payment, Infrastructure, DevOps, etc. they all take time, while contributing not much to your actual product. These features are needed, but they are not your differentiators.

Pellerex does just that. It provides a foundation that save you a lot development time and effort at a fraction of the cost. It gives you source-included Identity, Payment, Infrastructure, and DevOps to build Web, Api and Mobile apps all-integrated and ready-to-go on day 1.

Check out Pellerex and talk to our team today to start building your next enterprise software fast.