Navigation drawer

   

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

$3

- Hidden as a toggle;
- Fullscreen element for veil;
- Google Material spec for sizes, animations, and colors.

$3

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

$3

``bash
npm install react-hamburger-drawer


Or


yarn add react-hamburger-drawer
`

`js
import HamburgerDrawer from "react-hamburger-drawer";
`

`html



`

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:

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

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

`js
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

Screenshots