Where to place buttons to customize a navigation list (reorder/add/delete)?

Question

I have a subpage with a navigation list. This list can be changed by the user. The user can reorder, add or delete categories. This function is rarely used by clients, mostly only when they first create and make small changes if necessary.

My problem now is that I don't know where to place the buttons for the functions (reorder/add/delete).

Which of these ideas would be the best or do you have better ideas?

1. General List: the first idea would be to show another list in the general area on the page where the user could have all the functions. with drag and drop change the order. +Advantage: all the functions on one page as well as an overall view of the categories. -Disadvantage: two lists next to each other (navigation and change list) could be confusing for the user
2. In every category: The second idea would be to place the add category and delete button at the top of each category. The same applies to the subcategories. The drag-and-drop functionality would be omitted. +The advantage of this is that the user can add/delete categories directly where he is currently working. -Disadvantage Change order is missing and the user needs to go in the right category to change it
3. buttons in accordion: The third idea would be the same as 2 with the difference that subcategories could be also added via buttons in the accordion. +Advantage the same as 2 -Disadvantage: the add button in the accordion could be misinterpreted.

Answer 1

I think it's something very simple, maybe working on the actual design prevents you from seeing the function clearly.

I would recommend studying the function in a very basic table and then adapting it to the required design.

➕ Add rows
⬆️ Move rows up
⬇️ Move row down
❌ Delete row

_{Example from: Codepen}