How to Build a Drag-and-Drop Navigation Menu in Filament without Third-Party Packages?
Hi everyone,
I'm working on a Laravel Filament project, and I want to create a drag-and-drop navigation menu management system directly within the admin panel without relying on third-party packages like filament-navigation.
Here's what I aim to achieve:
Dynamically manage menu items with parent-child relationships.
Allow sorting of menu items using a drag-and-drop interface.
Save the updated menu order to the database.
I've already considered using Sortable.js for the frontend drag-and-drop functionality, but I'm unsure about the best practices for integrating this into Filament, especially for handling hierarchical menu structures (nested menus).
If anyone has experience or suggestions on how to implement this, or can provide a starting point for the migration, model relationships, or Filament resources, I’d greatly appreciate it!
1 Reply
I would use dragula for the drag and drop management on the front end
and make it remember in an object, the order of the elements before and after the drags. create a button with a post request action for saving the data on position back to the database, and filter the listing on filament by the positioning ASC or DESC based on your preferences