mini-burger v0.2.4

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:

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