How to build a Responsive 📱 React Navigation Menu with Styled-Components 💻

Building a React Menu does't have to be daunting. And let's use style-components while we're at it! 🔥

This may not be the most advanced React Nav, or showcase best practices, but it will get you up and running in no time!

Let's just get right into it D:

Check Out The Demo!

The Repo

Things I'll assume you have some knowledge of

1. Dev Environment. Ex. Node, VSCode..etc.
2. Know how to install NPM packages
3. Have some knowledge of React
4. Have some knowledge of React Router
5. Some basic CSS or SCSS

1. Starting with Create-react-app

Start with a clean project. Remove the create-react-app pre-loaded files and don't forget to remove the lines of code related to testing in index.js. I also remove everything in App.js other than App.css. Remove everything inside of App.css leaving only the .App css selector with min-height: 100vh , background-color: #282c34, and position: relative

Your project should look like this

And App.css should look like so

2. A Clean directory

1. Create a components folder and a pages folder.

2. Inside the components folder include 2 files: Menu.js and Toggle.js.

3. Inside the pages folder include 3 files: HomePage.js , ExamplePage.js , ContactPage.js.

3. Turn files into functional components

Your HomePage.js , ExamplePage.js , and ContactPage.js should now look like this.

HomePage

ExamplePage

ContactPage

4. Install styled-components

I prefer using Yarn package manager, so to install styled-components run this command: yarn add styled-components. If you are using NPM use this command: npm install --save styled-components. Make sure to import styled-components in each of our three pages like so: import styled from styled-components.

5. Adding styled-components our pages

The HomePage, ExamplePage and ContactPage should all share the same layout and styled-components. So just copy and paste. Don't forget to change the appropriate page name in Heading component.

They should like this

6. Install react-router-dom

1. Install react-router-dom into our project. yarn add react-router-dom. Or npm install --save react-router-dom.
2. Import react router like so: import { BrowserRouter as Router, Route, Switch } from react-router-dom.
3. Import our pages files into App.js so we can make use of React Router. Import the pages like so: import HomePage from ./pages/HomePage; import ExamplePage from ./pages/ExamplePage; import ContactPage from ./pages/ContactPage;
4. Refer to the photo below on how to use React Router in App()

So far App.js should look like this

If everything has gone smoothly so far, react router should be working. In the URL, try changing the path to localhost:3000/example or to /contact

7. Complete Menu and Toggle components

1. In step 2 we created a Menu.js and Toggle.js files in the components folder. Let's turn those into functional components.

2. Starting with Menu.js let' import Link from react-router-dom like so: import { Link } from 'react-router-dom'). We're also going to make use of some Icons. I prefer https://react-icons.github.io/react-icons/ because of simplicity. So let's install react-icons like so: yarn add react-icons Also, be sure to import the icons like so: import { FaBars, FaTimes} from 'react-icons/fa'. Don't forget to add /fa as we are importing from the Font Awesome library. Feel free to use any library, just browse the website mentioned above. If you were to use an Icon from the Material library, you would import the file like so: import { MdBars} from 'react-icons/md'. Files should like like this
   
   

3. Starting with Menu.js lets once again import styled components like so: import styled from styled-components.
   You'll notice I passed Link directly into StyledLink rather than having to create an <a>anchor/</a> tag in the DOM. All we need to do is add the to attribute to our StyledLink.

4. Then let's create our styled components for Menu.js. Starting with the StyledMenu component. It should like like this

5. Followed by our StyledMenu we need links for our Menu so users can click to navigate pages. Should look like this

6. Now we need a way to switch toggle states. If the Menu is toggled or it's state is set to true, we need a way to close the Menu by toggling the state to false. Let's add a simple toggle button to our Menu. It should look like this

7. Last thing for our Menu is to add our styled-components to our Menu() like so. Don't forget to add the to='*' attribute to your links. These are required for our Router in App.js to understand which views should be rendered once a user clicks the corresponding link. For ex. if your user was to click on the /contact link, the Contact component in App.js would be rendered as we declared it's path to look like this path='/contact'.
   

8. Lastly we have Toggle.js. The Toggle component is the most basic. It's only responsible for changing our toggle state for our Menu. We have already turned it into a functional component, so let's first begin with importing styled-components and react-icons like so import styled from 'styled-components' and import { FaBars } from 'react-icons/fa'. Lastly, let's create the StyledToggle component, add it to our empty Toggle() component then add our FaBars icon like so
   

8. Let's make use of our newly made components

1. Back in App.js, just like we imported our pages components, let's import our Menu.js and Toggle.js components like so
   

2. Now let's add our components to our App() like so
   

3. You should notice our Menu is being rendered. It's already working. You should also notice our CloseToggle button in the top right corner of our Menu. However, what you won't see is our Toggle button, because the Menu is blocking it. Let's fix this by adding state to our App with the useState() hook. At the top of your app, import the hook like so: import { useState } from 'react'. Now for our state, we need to be able to the hold the value of our toggled state, and be able to switch toggle states. It should look like this
   
   We initially have our navToggled state set to false, because when a user lands on our website, the Menu should not be rendered. So logically, it makes to most sense to have the state initially set to false.

4. To further make use of our useState hook, let's create a function for toggling our state. Let's call it setNavToggle. This functions only responsibility is to toggle the opposite state of whatever our current navToggled state is. For instance, if our current navToggled state is set to false, when the function is called, it'll set the new state to the opposite of false, making it true. If the navToggled state was true, the function will change the state to the of that value, making it true. It should look like this
   

5. Now that we have a way to handle our Menus toggle state, let's make use of it by adding it to our Menu component. That way we can toggle our Menu to false. To do so, we are going to pass handleNavToggle to our Menu component as a prop. Like so
   

6. Now that we have passed our handler function to our Menu component as a prop, we now have the ability to change our state from within the Menu component. But first let's accept the passed in prop from within our Menu component first. Like so
   

7. Now our intention is to be able to close the Menu, or toggle the Menus state to false. Let's do that by adding a click event listener our CloseToggle component, then pass in our handleNavToggle. In React, you need to use camelCase, so it should like so onClick={handleNavToggle}
   

8. You'll notice if you click the CloseToggle button, nothing is happening. That's because back in App.js we are forcing the render of our Menu component, no matter the state. Let's fix that by dynamically rendering our Menu component by using a ternary operator. It should look like this
   
   I'll explain in pseudocode. Here we are saying, if the navToggle state is true ? render <Menu/> : if its not, then return null. We're looking to see if the value of what's on the left of the ? is true. In this case, we're looking to see if the NavToggled state is true. If the navToggle state is indeed true, we're then going to render whatever is on the right side of the ?. And if it is not true, just like an if else statement, we're going to render whatever is on the right side of the :. In this case, we want to render nothing. So we use null. Essentially, it's if ? do this : else do this.
   You should also notice that if you try to toggle the CloseToggle button, that it works. Because we are only rendering the Menu if the state is true. You'll also notice if we attempt to toggle the Menu again, nothing happens.

9. Let's add functionality to our Toggle component! Back in App.js, we just pass in our handler function as a prop to our Toggle component like so
   

10. Back in Toggle.js lets again accept our passed in handler function by restructuring it like so
    

11. Now add our function as a click event to the StyledToggle like so
    

If everything has gone smoothly so far, it should be fully
functional, and fully responsive!

9. 👏 Congrats! 🔥

You have successfully built a fully responsive React navigation with Styled-components! If it's not exactly turning out as planned, I am more than happy to help you find the solution! Either use the comments section below, or DM me on Twitter!

10. Bonus animations!

Let's make our React app even better with some swanky animations.

1. We're going to use animate.css. It's a lightweight animation library, and it's very easy to implement into react apps. Install like so yarn add animate.css, or npm install --save animate.css

2. Inside of index.js below import App from './App'; add import 'animate.css';

3. And just like that our entire app has access to animate.css.

4. Let's first add some animations to our Link components and our single CloseToggle component in Menu.js. Like so className="animate__animated animate__fadeInRight"
   
   Just like that, we should have some slick animations in our Menu. Be careful to not get carried away with animations. It's not recommended to add animations to the entire parent div. For example, you should not add these sort of animations to the entire StyledMenu component as it can cause some performance issues!

5. Lastly, back in HomePage.js, ExamplePage.js and ContactPage.js, let's do something similar. Let's add some animations to our Heading component. Like this className="animate__animated animate__fadeInLeft". Heres an example of HomePage.js
   

Conclusion! 👋

That's a wrap on How to build a Responsive 📱 React Navigation Menu with Styled-Components 💻. If you made it this far, you have a lot of time on your hands. Lol 🤣 Thank you so much for your time, and I hope it was successful!

Please don't hesitate to hit me up on Twitter in regards to any questions, concerns or if you just wanna talk code!

Happy coding! ✌️

Are you a beginner web developer!?

How to stay focused 🔍 as a self taught Frontend Web Developer 💻

Chris Hansen ・ Jul 29 '21

#beginners #webdev #productivity #devjournal