Burger-Menu

A modern, flexible menu component that provides navigation for pages and features. Quickly build beautiful React apps.

🎉 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