Skip to content

Latest commit

 

History

History
123 lines (92 loc) · 5.18 KB

README.md

File metadata and controls

123 lines (92 loc) · 5.18 KB
Raw

Burger-Menu

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

NPM LICENSE CODECOV

🎉 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