React Headless Nested Menu
A useful headless component (hook) that gives you all the functions you need to create a multi-level menu using your own components!
Features
- Only functionality, no need to fight with CSS classes and overrides to customize your menu.
- Created in TypeScript, so you get types out of the box.
- Fully configurable behavior (open on click or hover).
Installation
yarn add react-headless-nested-menu
Usage
You can import the generated bundle to use the whole library generated by this starter:
;; { const getToggleButtonProps getMenuProps getItemProps getOpenTriggerProps getCloseTriggerProps getMenuOffsetStyles isOpen isSubMenuOpen toggleMenu } = ; const item setItem = useState<MenuItem>; // your custom function to render items const renderItem = <div ... className="relative my-1 first:mt-0 last:mb-0" ... onClick= { event; ; ; } > <div className= > itemlabel itemsubMenu && <Chevron /> </div> /* Only show submenu when there's a submenu & it's open */ itemsubMenu && && </div> ; // your custom function to render menus (root menu & sub-menus) const renderMenu = <div ... style= position: "absolute" ... className= ... > <div>items</div> /* add hit area */ parentItem && <div style= position: "absolute" top: -8 bottom: -8 left: -8 right: -8 zIndex: -1 ></div> </div> ; return <div className="w-64 p-4 rounded-lg flex flex-col ms-4 mt-4"> <button className="text-gray-600 border-2 border-gray-600 rounded-lg h-10 focus:outline-none" ... > item ? itemlabel : "Open Menu" </button> isOpen && </div> ;} const rootElement = document;React;
To do
- Improve documentation.
- Add more example.
- Add tests.
- Use popper for positioning menus.