mini-burger

Mini-burger

Mini-burger is a React component that allows you to add a simple minimalistic side menu with an animated hamburger icon to your application.

Installation

npm i mini-burger

Usage

Import the NavBar component and add it as the first child of your root element. Add links to the menu by passing them as children of the NavBar component:

import React from 'react'
import ReactDOM from 'react-dom/client'
import { NavBar } from 'mini-burger'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <NavBar side='right' bgColor='black' burgerSize={30} hamColorClosed='black' hamColorOpen='white'>
        <a style={{color: 'white'}} href='https://www.google.com'>Link 1</a>
        <a style={{color: 'white'}} href='https://www.google.com'>Link 2</a>
        <a style={{color: 'white'}} href='https://www.google.com'>Link 3</a>
    </NavBar>
    <div>
      <h1>Hello there.</h1>
    </div>
  </React.StrictMode>
)

Any elements (not just <a>) can be passed to the NavBar:

<NavBar> 
    <MyComponent1 />
    <MyComponent2 />
    <MyComponent3 />
</NavBar>

Customizations

Mini-burger allows you to make some basic customizations via props:

prop	what it customizes	valid options
side	Which side of the page the menu appears on	'left','right'
bgColor	The background color of the sidebar menu	Any valid css color names
burgerSize	The size of the hamburger icon	Any number between 20 and 50
hamColorClosed	The color of the hamburger icon when the menu is closed	Any valid css color names
hamColorOpen	The color of the hamburger icon when the menu is open	Any valid css color names

Please note that you are responsible for the styling of the elements that you pass into the NavBar as children.

Inspiration

Shout out to Kevin Powell for his awesome animated hamburger tutorial: https://youtu.be/R00QiudbD4Y