Skip to content

vpodk/react-hamburger-drawer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Navigation drawer

Build Status License NPM version NPM downloads

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:

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>

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:

"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:

Screenshots