brunozito / react-hamburger-drawer

🍔 Simple lightweight react hamburger navigation drawer.

Navigation drawer

Simple lightweight react hamburger 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 --save

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.

Screenshots