Navbar is one of the important elements to make your website more accessible for users and help users to quickly find the information they want to see. Today, I’m going to show you how to create a custom navbar and Hamburger menu.
First, we need to create the Navbar component and initialize a state with a property open and default value will be false. We’re going to use this state to toggling the navbar in mobile view. With each ul tag, we need to add the following code.
className={this.state.open ? “hamburger active” : “hamburger”}
We may read this line of code this way, if the state’s property open is true, then we add hamburger and active to className, Otherwise only hamburger. We can use the active class as an indicator to decide when to show the Hamburger menu.
Then, we can start to write the basic HTML code with two unordered lists. The first unordered list will be the body of the hamburger menu, and the second unordered list is the navbar itself. You may reverse the order, that’s totally fine, but make sure you add the right class name.
PS: make sure you add a function to handle the user’s click to toggle the hamburger menu.
You may refer to my code shown below. 👇
We need to import the Navbar component to the App.js.
Now, We are going to start with the CSS part, which is a lot, but please bear with me. I will break down the CSS code into a smaller piece.
- Here is the hamburger class.
You may notice that I added display property to none. Because I don’t want the hamburger menu to be displayed in the desktop view.
2. Here is the items class.
3. Here is the Mobile CSS, and I set the max-width to 780px.
if you need help with CSS. Please visit my CSS animation Blog.
Here is the demo below 👇
Please feel free to try it on your own!
