🎉 Features

• Written in Typescript, Friendly Static Type Support.

🔥 Demo

Live demo: burger-menu

🔥 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 | |

SubMenu

| Properties | Description | Type | Default | | ---------- | ----------------------------------------------- | --------- | ------- | | title | SubMenu copy | string | | | icon | Icon of SubMenu, will be displayed on the right | ReactNode | |

Item

| Properties | Description | Type | Default | | ---------- | -------------------------------------------------------- | --------- | ------- | | text | Content for item | string | | | icon | The icon of the menu item, will be displayed on the left | ReactNode | | | itemKey | Unique ID of the menu item | string | |

🎈 License

Burger Menu is MIT Licensed