Gathering detailed insights and metrics for react-hamburger-menu
Gathering detailed insights and metrics for react-hamburger-menu
Gathering detailed insights and metrics for react-hamburger-menu
Gathering detailed insights and metrics for react-hamburger-menu
react-burger-menu
An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations
hamburger-react
Animated hamburger menu icons for React
react-hamburger-menu-responsive
A customizable and responsive hamburger menu for React
@types/react-hamburger-menu
TypeScript definitions for react-hamburger-menu
npm install react-hamburger-menu
Typescript
Module System
JavaScript (91.89%)
CSS (5.1%)
HTML (3.01%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
104 Stars
32 Commits
27 Forks
18 Branches
2 Contributors
Updated on Mar 10, 2025
Latest Version
1.2.1
Package Id
react-hamburger-menu@1.2.1
Size
17.09 kB
Published on
Apr 14, 2020
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Built for React, this is a handy UI component for a menu icon in a mobile site or application.
react-hamburger-menu requires React 0.14 or later.
npm install --save react-hamburger-menu
Live demo: cameronbourke.github.io/react-hamburger-menu
To build the example locally, clone this repo then run:
npm install
npm start
Then open localhost:8080 in a browser.
React Hamburger Menu only has two required props. They are isOpen
and menuClicked
. The other 7 props are optional.
Note: This prop is passed a function
. This function will be invoked when the component is clicked
. The function should responsible for updating the state that is passed to isOpen
. The function passed to menuClicked
could look something like the following:
1handleClick() { 2 this.setState({ 3 open: !this.state.open 4 }); 5}
An example use of React Hamburger Menu looks like:
1<HamburgerMenu 2 isOpen={this.state.open} 3 menuClicked={this.handleClick.bind(this)} 4 width={18} 5 height={15} 6 strokeWidth={1} 7 rotate={0} 8 color='black' 9 borderRadius={0} 10 animationDuration={0.5} 11/>
Note, not all props are required. All the props besides isOpen
and menuClicked
have defaults.
Property | Type | Default | Description |
---|---|---|---|
isOpen | bool | undefined | determines whether the menu is a hamburger or cross icon |
menuClicked | func | undefined | will be invoked when the component is clicked |
width | number | 36 | the width of the icon |
height | number | 30 | the height of the icon |
strokeWidth | number | 2 | the stroke width of the lines |
rotate | number | 0 | the rotation of the icon, eg {45} would be 45deg |
color | string | #000 | the color of both icons |
borderRadius | number | 0 | the border radius of the lines |
animationDuration | number | 0.4 | the length of time it takes for the icon transitions to complete. |
className | string | undefined | the class name for the container element |
MIT Licensed Copyright (c) Cameron Bourke 2016
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 4/25 approved changesets -- score normalized to 1
Reason
project is archived
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
101 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More