React burger menu

react-burger-menu provides a zero dependency left sliding burger menu.

Usage

Install from npm

yarn add @jacobjonsson

import { ReactBurgerMenu } from '@jacobjonsson/react-burger-menu';
// Include the base styles
import '@jacobjonsson/react-burger-menu/ReactBurgerMenu.css';

function App() {
  const [open, setOpen] = useState(false);

  return (
    <ReactBurgerMenu show={open} onOverlayClick={() => setOpen(false)}>
      <ul>
        <li>
          <a href="https://www.facebook.com">Facebook</a>
        </li>

        <li>
          <a href="https://www.instagram.com">Instagram</a>
        </li>

        <li>
          <a href="https://www.twitter.com">Twitter</a>
        </li>
      </ul>
    </ReactBurgerMenu>
  );
}

Props

| Name | Description | Type | | -------------- | -------------------------------------------------- | ---------- | | show | Indicates if the menu should be shown or not | boolean | | onOverlayClick | Will be called when the user clicks on the overlay | () => void |