Adding a menu item to an existing menu is difficult, because selecting the correct parent item is awkward. Either find the parent in a select list or create the child and then click-and-drag.
Here is a screenshot showing the "Parent link" select list:
/admin/structure/menu/manage/admin/add).In the list of menu items, replace the Edit link with a drop button. Provide two options: Edit and "Add child". If there is already a drop button, then add the new option to it.
Here is a screenshot showing the new option. I used browser tools to expand all the drop buttons: normally, at most one would be expanded.
None
None
Currently, there are two ways a site administrator can specify the parent of a menu item or the parent(s) of a taxonomy term. The administrator can choose the parent from a select list on the edit form, or they can click and drag on the Menu or Vocabulary overview page. When there are a lot of items in the menu or terms in the vocabulary, both methods can be awkward.
Drupal 10.2 introduces New "Add child" links for menu items and taxonomy terms on the Menu and Vocabulary overview pages. Site administrators can use these links to set the parent when creating a new menu item or taxonomy term.
| Comment | File | Size | Author |
|---|---|---|---|
| #24 | menu-list-drop-button.png | 16.57 KB | benjifisher |
| #23 | Screenshot 2023-09-13 at 11.13.54 AM.png | 16.3 KB | smustgrave |
| #15 | 3379293-After.png | 133.66 KB | pooja saraah |
| #15 | 3379293-Befor.png | 151.84 KB | pooja saraah |
| #5 | menu-with-add-child-links.png | 60.84 KB | benjifisher |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes, plain diff MR !4570
Comments
Comment #2
benjifisherComment #3
benjifisherWe discussed this issue briefly at #3377568: Drupal Usability Meeting 2023-08-04. That issue will have a link to a recording of the meeting.
For the record, the attendees at today's usability meeting were @AaronMcHale, @Emma Horrell, @benjifisher, @rkoller, @simohell, and @worldlinemine.
The group agreed that the proposed resolution is a good idea. We also noticed that there is a single link (Edit) for menu links provided by modules, but that custom menu links already use a drop button. (The options are Edit and Delete.) Even the links that cannot be deleted get a drop button with a Reset option if one of the editable fields is changed (such as the weight).
Comment #5
benjifisherMR 4570 is ready for review.
I am a little nervous about adding Url objects to the form array: although I apply
setOption()each time, isn't it still the same object? But it seems to work, giving differenthrefvalues, in both manual and automated testing.I was not sure about the condition for adding an "Add child" link based on the maximum depth of the menu, but the automated test confirms that the condition is not off by one.
Comment #6
benjifisherComment #7
smustgrave commentedSo I tested this one out.
The child link operation appears. But when I select it the parent item appears to be selecting the wrong one. It selects the last level1 link.
Comment #8
benjifisher@smustgrave:
Thanks for testing. I think the problem is what I wrote in #5 about adding the same Url object many times to the form array. I did not test enough: it looks as though all sibling links will get the same URL. I think the update to the MR will fix that.
I added a screenshot in Comment #5, but I forgot to add it to the issue summary. I am doing that now.
Two notes for the sake of the code reviewer:
Drupal\Core\Entity\EntityListBuilder::getDefaultOperations(). Edit has weight 10 and Delete has weight 100.Drupal\Core\Entity\EntityListBuilder::getOperations().Comment #9
benjifisherComment #10
aaronmchaleI wonder if it's worth, in this issue, also including links for adding sibling menu items, as in a "Add above" and "Add below" links. I've seen that the ability to quickly add a link above or below the current one could be useful if there are a lot of menu links at the same level, it would reduce the number of steps to getting the link in the position that you want it. I would also be happy to leave that to a follow-up issue if we want to keep the scope here quite tight, but I also suspect that it probably wouldn't be much additional effort to do in this issue.
Comment #11
poker10 commentedThis looks like a nice feature - the selection of the parent menu link can be tricky if you have a big number of menu links.
I have tested this and the default selection is working in case you are creating a child for a custom menu link. But for some default links it does not work. For example on a clean D10 install, go to main menu and try to add a child to the "Home" link. On the menu link form in the parent link, there is preselected "Main navigation", instead of "--Home". And the URL looks like
admin/structure/menu/manage/main/add?parent=standard.front_page. On the other hand, if you create a new menu link "test" and then try to add a child to this link, it is preselected correctly. The same is happening also in other menus with the existig default links (for example in the "user menu", etc.).Beside the menu items, do you think that possibly the similar tweak could be done to taxonomy terms (of course in a separate issue)? The parent terms selection is very similar to the parent menu item one.
Comment #12
benjifisher@AaronMcHale:
It is tricky to add "Add above" and "Add below" links, since the order depends on weights and, when the weights are the same, alphabetical order. We might need to change weights on many menu items all at once to implement that. I am not sure that I want to implement that at all, and certainly not as part of this issue.
If you trigger the link to "Show row weights" on the listing page, then you can see the weights of the siblings-to-be. (You might have to scroll.) Then, after triggering the new "Add child" link, you can create a new menu item and set the weight on that form.
@poker10:
I am embarrassed that I missed that. Thanks for testing. The fix is simple: when sanitizing the query parameter, I was allowing alphanumeric characters and a few others, but I forgot to allow '.'.
I just added #3383606: Make it easier to add a child taxonomy term as a follow-up issue. I do not have time right now to add screenshots, but that issue should be a little simpler than this one.
Comment #13
poker10 commentedThanks for creating the issue for taxonomy terms!
I can confirm that the issue from #11 is now fixed in the MR.
Comment #14
smustgrave commentedShould the tests be expanded to test when the "Add child" option is clicked?
Comment #15
pooja saraah commentedReviewed and applied the MR on local. In the list of menu items we have a parent link and provide two options: Edit and "Add child". It is working as expected. Here are the before and after screenshots for the same.
Comment #16
benjifisherFrom #14:
Yes. Let's add an issue tag for that and set the status to NW.
Comment #17
benjifisherI rebased on the latest 11.x and resolved a little merge conflict (in the tests) from #3110371: When adding a new menu link, restrict the available parents to the current menu.
I also added test coverage as suggested in #14, so back to NR.
Comment #18
smustgrave commentedTested again by adding 3 menu links.
Clicking Add child link to link 2 and verified it saved under link 2
Created one under link 1 and verified it saved under 1
Created a link under the child link of link 2 and verified it saved under the correct link.
This was perfect timing too so thank you!.
Comment #19
poker10 commentedI confirm that the "Add child" functionality is still working on both custom and default menu links. This looks like a very nice usability improvement together with the #3110371: When adding a new menu link, restrict the available parents to the current menu already committed. LGTM, thanks!
Comment #21
benjifisherI am setting the status back to NR because @lauriii added a commit and asked a question on the MR.
IMO, the extra commit is fine.
Comment #22
benjifisherOn second though, the
preg_replace()is unnecessary, not just arbitrary. I added a commit that removes it (and rebased on the current 11.x).Comment #23
smustgrave commentedShould this be a follow up? I see this with or without the patch.
But the MR 4570 tested the same way as before
Still working!
Comment #24
benjifisherThe horizontal line through the drop button's select list is not related to this issue.
FWIW, I do not see it. (View the full-size version of the screenshot to see it clearly.)
I tested with Firefox/Linux and Drupal 11.x. I see the same thing with 10.1.2. I used a clean install of the Standard profile, so Claro is the admin theme.
Comment #25
smustgrave commentedI was on Umami, not sure that would impact it though.
Comment #28
lauriiiThe bug in #23 is: #3381770: \Drupal\views\Plugin\Menu\ViewsMenuLink::isDeletable returns TRUE even though it doesn't specify delete route.
Committed 246b571 and pushed to 11.x. Thanks!
Comment #29
benjifisherI have added this issue to the draft change record for #3383606: Make it easier to add a child taxonomy term, and I am copying the release-notes snippet from that issue to the issue summary here.