https://github.com/vpodk/react-hamburger-drawer

🍔 Simple lightweight react hamburger navigation drawer.
https://github.com/vpodk/react-hamburger-drawer

hamburger javascript navigation-drawer react

Last synced: about 1 year ago
JSON representation

🍔 Simple lightweight react hamburger navigation drawer.

• Host: GitHub
• URL: https://github.com/vpodk/react-hamburger-drawer
• Owner: vpodk
• License: apache-2.0
• Created: 2021-09-20T00:18:57.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2025-02-06T04:30:06.000Z (over 1 year ago)
• Last Synced: 2025-03-29T08:06:20.762Z (over 1 year ago)
• Topics: hamburger, javascript, navigation-drawer, react
• Language: CSS
• Homepage: https://npmjs.com/react-hamburger-drawer
• Size: 2.13 MB
• Stars: 29
• Watchers: 3
• Forks: 21
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
# Navigation drawer

[![Build Status](https://github.com/vpodk/react-hamburger-drawer/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/vpodk/react-hamburger-drawer/actions/workflows/npm-publish.yml) [![License](https://img.shields.io/:license-apache-blue.svg?logo=apache)](https://www.apache.org/licenses/LICENSE-2.0.html) [![NPM version](https://img.shields.io/npm/v/react-hamburger-drawer.svg?logo=npm)](https://npmjs.org/package/react-hamburger-drawer) [![NPM downloads](https://img.shields.io/npm/dm/react-hamburger-drawer.svg?style=flat)](https://npmjs.org/package/react-hamburger-drawer)

Simple lightweight react hamburger navigation drawer (based on [navigation-drawer](https://github.com/vpodk/navigation-drawer)).

### Key points

- Hidden `` as a toggle;

- Fullscreen `` 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:

```bash

npm install react-hamburger-drawer

# Or

yarn add react-hamburger-drawer

```

```js

import HamburgerDrawer from "react-hamburger-drawer";

```

```html



  

    

      

      


        
Home

        
About

        
Contact

        
Privacy Policy

      

    

    
Your Application Header

    ...

  

  ...



```


## Component props

- `useFocusBounder` - An optional property to enable or disable [FocusBounder](https://github.com/wayfair-incubator/react-focus-bounder) 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