React DND Menu Builder 🚀

React DND Menu Builder is a user-friendly drag-and-drop menu builder for React, inspired by the simplicity and flexibility of the WordPress menu builder. It allows you to create and customize menus by dragging and dropping items from a list of available options, just like in WordPress. Easily add, remove, and rearrange items to suit your needs.

WordPress-Like Menu Builder for React and Nextjs

🖥 Demo

Check out a live demo.

📦 Installation

To go with the latest version please copy and paste in your terminal the following steps:

``bash
npm install react-dnd-menu-builder


or

yarn add react-dnd-menu-builder

or

pnpm install react-dnd-menu-builder
`

⚠️ NextJS Import ⚠️

`js
import dynamic from "next/dynamic";

const MenuBuilder = dynamic(() => import("react-dnd-menu-builder"), {
ssr: false,
});
`

Basic Usage

`js
import { useState } from "react";
import MenuBuilder from "react-dnd-menu-builder";

function App() {
const [menus, setMenus] = useState(initialMenus);
const [formData, setFormData] = useState(initialFormData);

const addMenu = () => {
setMenus([
...menus,
{
...formData,
id: Math.random().toString(36).substring(7),
},
]);
setFormData({ id: "", name: "", href: "", children: [] });
};

return (
style={{
display: "flex",
flexDirection: "column",
}}
>
onClick={() => {
addMenu();
}}
>
Add Menu

placeholder="Home"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
/>
placeholder="/home"
value={formData.href}
onChange={(e) => setFormData({ ...formData, href: e.target.value })}
/>