paint-brush
Create a fancy burger menu using reactjs-popupby@yjose
12,583 reads
12,583 reads

Create a fancy burger menu using reactjs-popup

by Youssouf El Azizi
Youssouf El Azizi HackerNoon profile picture

Youssouf El Azizi

@yjose

Ingénieur d'étude et développement

February 19th, 2018
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

<a href="https://react-popup.netlify.com/" target="_blank">Reactjs-popup</a> is a new and simple react popup component built using react fragments which is one of the new features that comes with react 16. And it can handle multiple use cases.By using this tiny react popup component you can create a Tooltips, Modals and Menus.

Company Mentioned

Mention Thumbnail
Few
featured image - Create a fancy burger menu using reactjs-popup
Youssouf El Azizi HackerNoon profile picture
Youssouf El Azizi

Youssouf El Azizi

@yjose

Ingénieur d'étude et développement

This article is a step by step tutorial to create a simple burger menu for your website by using reactjs-popup

image

burger menu deom

Reactjs-popup is a new and simple react popup component built using react fragments which is one of the new features that comes with react 16. And it can handle multiple use cases.By using this tiny react popup component you can create a Tooltips, Modals and Menus.

By the end of this article you will be able to create your custom burger menu with reactjs-popup.

Ready!! Let’s get started.

Step 1: Create the burger Icon component.

We will start by building a burger icon component,

As you see we pass the ‘open’ prop to the component so we can permute the icon class name as the preview example explains

image

burger Icon state

You can find some good examples for burger icon with animation here

Step 2: Customize CSS Menu

Our menu will be a simple list, so let’s take the reactjs-popup home page menu and use it as an example.

As you see this menu is a simple ul element, nothing special.

Step 3:integrate all stuff with reactjs-popup

All we need to do in this part is to import the reactjs-popup component and set the burger menu as a trigger prop for the popup component and the menu as the popup children. simple, is it ? magic !!

Thanks to the ‘function as a children pattern’ the trigger can access to the popup state easily. we need also to pass props to the burger component like the following.

Adding some custom css and this is the final result.

image

final result

If you read this article from your smartphone , you can see the burger button to launch the menu in reactjs-popup home page.

image

Demo Code source


yjose/reactjs-popup-burger-menu_reactjs-popup-burger-menu - reactjs-popup burger menu example_github.com

Read more from my articles :


Introducing reactjs-popup 🎉 —React popup, Modals, Tooltips and Menus — All in one_This article is about giving you a simple overview of what you can do with react popup and how to use it effectively._hackernoon.com


Frontend Performance Check-list For Production_In web development and exactly front-end web, we spend more time searching for the best design and content to our…_hackernoon.com


A step-by-step guide to making pure-CSS tooltips_I recently worked through a short tutorial about creating simple tooltips using pure CSS (and no additional HTML…_medium.freecodecamp.org

Thanks for reading! If you think other people should read this post and use this component,tweet and share the post.

Remember to follow me on Medium so you can get notified about my future posts.

If you liked this story, feel free to 👏👏👏 a few times (Up to 50 times. Seriously).

L O A D I N G
. . . comments & more!

About Author

Youssouf El Azizi HackerNoon profile picture
Youssouf El Azizi@yjose
Ingénieur d'étude et développement

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Bitcoininsider
Unni
Statuscode
Unni
X REMOVE AD