Simple lightweight react hamburger navigation drawer (based on navigation-drawer).

• Hidden <input type="checkbox"> as a toggle;
• Fullscreen <label> element for veil;
• Google Material spec for sizes, animations, and colors.

• Support keyboard navigation (Tab, Esc and Enter);
• Prevents page scrolling when the navigation drawer is open.

npm install react-hamburger-drawer
# Or
yarn add react-hamburger-drawer

import HamburgerDrawer from "react-hamburger-drawer";

<div className="App">
  <header>
    <HamburgerDrawer>
      <!-- Your navigation drawer content here: -->
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
        <li><a href="/privacy-policy">Privacy Policy</a></li>
      </ul>
    </HamburgerDrawer>
    <h1>Your Application Header</h1>
    ...
  </header>
  ...
</div>

• useFocusBounder - An optional property to enable or disable FocusBounder component. Default false.

All components inside the app directory are React Server Components by default. To use useRef or useEffect hooks, the component must be marked as client component: "use client".

Create a "drawer.js" file with the following content:

"use client";
import HamburgerDrawer from "react-hamburger-drawer";
export default HamburgerDrawer;

And import the HamburgerDrawer component from the "drawer.js" module:

import HamburgerDrawer from "./drawer";

Links:

• https://nextjs.org/docs/messages/react-client-hook-in-server-component
• https://nextjs.org/docs/app/building-your-application/rendering
• https://react.dev/reference/react/use-client