Create Mobile-Friendly Navigation with React

This post is a continuation of my previous post about the reasons why we, developers, should implement a friendly navigation experience for mobile users.

In this post we will be learning how to build mobile-friendly navigation, applying what we learned.

I'll be using React.js since it is a popular and easy to use library. I will make it as straightforward as possible so you can use it in your favorite framework or vanilla.

The next initial steps consist of creating a new React project with Create React App. You can skip this if you already know how to or you can use a sandbox template. Skip the setup.

Creating our workspace

To start immediately and without hassle, let's create a Create React App using its CLI:

Now, go to our newly created React build:

Next, let's install Styled Components to style our components directly in the file. Don't feel pressured to use styled-components; you can use your preferred styling solution.

Finally, let's start our project:

You should see something like this:

Great!! Now we can start working with our app

Setting up our development environment

First, we will delete these files which are irrelevant for our project: index.css, logo.svg, App.css, App.test.js, setupTests.js, and serviceWorker.js.

Now, let's change index.js to this:

And, App.js to this:

Here we deleted the initial content and created a global style that normalizes our CSS (makes browsers render all elements consistently and in line with current standards) and a wrapper for our future navbar.

Creating the Navbar

Now that we have set up our development environment we can finally start creating our navbar.

Let's say we are creating a navbar for a blog website. It will have 3 main routes: Home, Blog, and About.

First, let's create its HTML:

And some basic styling:

We now have something like this:

Making it responsive

To create a mobile-friendly responsive experience we will have to move the navbar to the bottom of the screen so it can be easily reachable with the thumbs. We can go three ways about this:

1. Create a normal tab bar with conditional rendering.
2. Move the navbar to the bottom and hide all items in a hamburger button.
3. Create a hybrid between 1 and 2.

All approaches favor thumb-driven design. Choosing one depends on what situation you are in. Choose 1, if you don't have many items and have the liberty of using a framework, or library. Choose 2, if you are creating a pure vanilla site, and have too many items to put in a tab bar. (caveat: since all elements are hidden users most likely won't find relevant routes). Finally, choose 3, if you have a lot of navigation elements and need some of the most important ones visible to the users.

For the sake of the tutorial, I will recreate the first two approaches (skipping the third because we don't have that many navigation elements, however by reading the two approaches, you can mix them and come up with it).

• First approach
• Second approach

First Approach: Creating a Normal Tab Bar

To get started with this approach we need to detect the current width of the screen so we can render the tab bar whenever we are on mobile. To do this we can use window.innerWidth, however, since we want to mimic CSS, which changes anytime the user resizes, we need to create an event listener which watches for the resize event:

In production, debouncing the handleResize would be a good idea.

Now that we know when the user is on mobile, we can move to create the skeleton of the mobile nav:

By reusing some of the styles from our Navbar we can save up some redundant CSS. Let's style the mobile navigation to fit our needs:

When we resize we should see our new navigation bar.

Congratulations! We've created mobile-friendly navigation.

Bonus!

To make it more like a mobile navbar we could add some SVG icons. Add the following dependency.

Let's import our icons and create a wrapper for it:

Finally, add some styles:

And that's it! We have our new tab bar which is closer to what we are used to seeing in mobile apps.

This is our final product:

Second Approach: Creating navigation with Hamburger Button

To get started with this approach we must move the navbar to the button. With media queries we can accomplish this quickly:

Let's create our hamburger button. First, its HTML:

And, its styles:

Furthermore, let's convert our items into a drawer:

Now all that's left is add our logic to open and close our drawer. One thing to look out for here is that if we add a normal toggle, then, when we open the drawer, we won't be able to close it. One option would be to add a close button, however, since this drawer's width is not the whole screen, the user would expect to be able to close it by clicking outside the drawer. So, we will add a listener that detects outside clicks:

Congratulations!! We have our drawer with all our items, now we can rest assured that the mobile user will have a better time navigating our site.

This is our final product:

Conclusion

Learning how to create friendly mobile navigation on the browser is really important, especially with the growing use of mobile phones. Applying this in production means our users will have a pleasant experience on our website, thus leading to a larger conversion rate.

For more up-to-date web development content, follow me on Twitter, and Dev.to! Thanks for reading! 😎