Package Exports
- react-hamburger-drawer
Readme
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 --saveimport 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>
|
|