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