Skip to content

Minimalistic React side menu with animated hamburger icon

License

Notifications You must be signed in to change notification settings

egithinji/mini-burger

Repository files navigation

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

Releases

No releases published

Packages

No packages published