traversy-media-hamburger-menu's Introduction

Traversy Media's Hamburger Menu

A React Component based on Traversy Media's Hamburger menu & overlay

Credits

All credits related to the animations and styles in general go to Brad Traversy for his original tutorial, which you can find here -> https://www.youtube.com/watch?v=DZg6UfS5zYg&t=954s.

Original code:

https://codepen.io/bradtraversy/pen/vMGBjQ

Usage

Install the package: npm i --save traversy-media-hamburger-menu or yarn add traversy-media-hamburger-menu
import Menu and MenuItem to your component, like so:

import Menu, { MenuItem } from "traversy-media-hamburger-menu";

Now you can use it like any other react component:

<Menu>
    <MenuItem
        text="I'm a neat component!"
        href="http://pudim.com.br"
        onClick={() => alert("You have clicked me!")}
    />
</Menu>

Styling

You can style the hamburger menu, overlay and menu items with ease like this:

<Menu
    hamburgerStyles={{
        backgroundColor: "#d32f2f"
    }}
    hamburgerLinesStyles={{ backgroundColor: "#333" }}
    overlayStyles={{ backgroundColor: "#333" }}
>
    <MenuItem text="Google" href="https://google.com" />
    <MenuItem text="Bing" href="https://bing.com" />
    <MenuItem text="Yahoo" href="https://yahoo.com" />
    <MenuItem
        text="Click me"
        href="#"
        onClick={() => alert("You're Awesome!")}
        menuItemStyles={{
            backgroundColor: "#d32f2f",
            color: "white"
        }}
    />
</Menu>

Tips about the MenuItem

If you want to render a simple link ("a" tag), you can use MenuItem like shown previously. But what if you want to render some other component like react-router-dom's <Link>? Well, you can do it like this:

<MenuItem>
    <Link to="/" />
<MenuItem/>

easy peasy, right? Just have in mind that the onClick WILL NOT be called in this case.

Final words

Hope you enjoy using this component the same as I have while creating It! Give this repo a star if you liked it, and feel free to open an issue if you find any problems.

Recommend Projects