Navigation drawer

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

Key points

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

Accessibility

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

Usage example:

1npm install react-hamburger-drawer
2# Or
3yarn add react-hamburger-drawer

1import HamburgerDrawer from "react-hamburger-drawer";

1<div className="App">
2  <header>
3    <HamburgerDrawer>
4      <!-- Your navigation drawer content here: -->
5      <ul>
6        <li><a href="/">Home</a></li>
7        <li><a href="/about">About</a></li>
8        <li><a href="/contact">Contact</a></li>
9        <li><a href="/privacy-policy">Privacy Policy</a></li>
10      </ul>
11    </HamburgerDrawer>
12    <h1>Your Application Header</h1>
13    ...
14  </header>
15  ...
16</div>

Component props

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

Next.js v13+ and other SSRs

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:

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

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

1import 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

Screenshots