Burger-menu NPM

🎉 Features

Written in Typescript, Friendly Static Type Support.

🔥 Demo

🔥 Install

# with npm
npm install burger-menu

# with yarn
yarn add burger-menu

👍 Usage

Here is a quick example to get you started, it's all you need:

import React, { useState } from "react";
import { createRoot } from 'react-dom/client';
import { Menu, SubMenu, Item } from "burger-menu";
import 'burger-menu/lib/index.css';

const App = () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <div onClick={() => setIsOpen(!isOpen)}>Icon</div>
      <Menu className="burger-menu" isOpen={isOpen} selectedKey={'entry'} onClose={() => setIsOpen(false)}>
        <Item itemKey={'manage'} text={'User Management'}></Item>
        <Item itemKey={'user'} text={'User Center'}></Item>
        <SubMenu title="Union Management">
          <Item itemKey={'notice'} text={'Announcement'}></Item>
          <Item itemKey={'union'} text={'Union Inquiries'}></Item>
          <Item itemKey={'entry'} text={'Entry information'}></Item>
        </SubMenu>
      </Menu>
    </>
});

createRoot(document.getElementById('root')).render(<App />);

How to import

import { Menu, SubMenu } from 'burger-menu';
import 'burger-menu/lib/index.css';

Animations

The usage above imported slide which renders a menu that slides in when the burger icon is clicked. To use a different animation you can substitute slide with any of the following (check out the demo to see the animations in action):

slide
fallDown

API Reference

Properties	Description	Type	Default
isOpen	Control open state	boolean	false
width	Width	number \| string	300
side	Sliding position	string	right
animate	animate type	string	slide
duration	transition duration	string	300ms
customCrossIcon	Icon for close button	ReactNode	false
customIcon	Custom icon or logo component, will be displayed on the head left	ReactNode	false
onOpen	The Callback function when animation end	function(e) => {}	() => {}
onClose	The callback function before the exit animation ends	function(e) => {}	() => {}
bodyClassName	Add className to body tag	string
htmlClassName	Add className to html tag	string
noOverlay	Toggle whether to show overlay	boolean	false
overlayClassName	Overlay style name	string