Drag and Drop Nav Menu Items in WordPress

Earlier this week, Sajjad Hossain Sagor released the first version of his Drag & Drop Menu Items plugin in the WordPress plugin repository. The plugin is a one-off, single-use plugin that does exactly what its name describes — it allows end-users to drag menu items from the meta boxes on the nav menu screen to the menu they are currently editing.

Sagor is a freelance web developer from Bangladesh. Drag & Drop Menu Items is the latest of his 18 contributions to the free plugin directory.

The plugin is simple in nature and does its one job well. To use it, users merely need to open the Appearance > Menus screen in the WordPress admin. Menu items from the meta boxes under the “Add menu items” section can then be dragged into the menu under the “Menu structure” section.

Screenshot of the Drag & Drop Menu Items WordPress plugin.
Dragging an item into a custom menu.

When dragging a menu item over, a drop-box appears between each of the existing items in the menu. It is worth noting that you cannot drag items into a sub-menu slot directly from the meta boxes. This is on par with the default functionality and could be a limitation of WordPress. However, sub-menu organization works as usual.

The Drag & Drop Menu Items plugin is limited to the Menus screen in the WordPress admin. It does not work in the customizer, which sports a different interface and method of adding menu items.

The plugin code is minimal and does not appear to have any issues. The additional JavaScript, at less than 4 kb, should not add much weight to the page either.

By default, WordPress requires two mouse clicks to add an item to a menu: one click to tick the checkbox and a button click to add the item. However, the default method also allows users to append multiple items at once.

On the whole, the plugin is a good option for users who prefer the drag-and-drop method of adding items or those who prefer to have both methods at their disposal. It adds a nice touch that would make sense as an existing part of WordPress.

An Uncertain Future

Screenshot of the experimental Navigation screen in the Gutenberg plugin.
Experimental Navigation screen from the Gutenberg plugin.

Eventually, Drag & Drop Menu Items may no longer function. The Gutenberg plugin team has already built an early experimental version of a new Navigation screen in the admin. The plan is to incorporate this new screen into core WordPress in the future.

The new screen will work within the block system and likely use the work that has gone into the existing Navigation block. This will provide consistency in how menus are added across the site.

For now, if you would like the ability to drag and drop menu items, this plugin is a solid solution.

3

3 responses to “Drag and Drop Nav Menu Items in WordPress”

  1. I like that it has one single purpose, and only does that :)

    I’m also surprised that this hasn’t been implemented it before. It seems like a logical way to handle menus.

  2. This part of wordpress admin needed improvements from a long time ago, so I am very happy to read this. And it’s just the beginning.

  3. The Exact plugin i was looking for.. Plugin is very helpful for those (like me) needs to add lots of menu items in different sites… with each one selected and then add kills much time.. with dragging option one by one i can easily add menu items directly even faster than ever… Thanks!

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: