Navigation block: New editable list makes it hard to see how to delete submenu items

[annezazu]

What problem does this address?

While writing the next call for testing for the FSE Outreach Program, I noticed that I don't see the three dot menu to delete sub menu items:

deleting.process.mov

What is your proposed solution?

Include the option to delete sub menu items OR have a consistent experience in some way with deletion.

---

EDIT:

To improve the user experience we should make the following updates to the navigation inspector:

• Add this custom minimal scrollbar to it
• The icons will align vertically, right up until the text pushes it

[scruffian]

I think the option is there but it's off to the right and therefore hidden. We need to find a better way to make that clear....

[annezazu]

Ah ha. You're right. I see there's a horizontal scrollbar. Is that by design? I was about to open another issue to report this based on the following feedback from the nineteenth call for testing for the FSE Outreach Program and couldn't find another issue similar on the project board:

I noticed a horizontal scrollbar which should not be there. Toolbar covers submenu, unneeded horizontal toolbar and a blue dash next to the Blog link.

Happy to open an issue but wanted to see what the current thinking was there first since this seems to be known @scruffian

[scruffian]

We can use this one to track it. I don't think the horizontal scrollbar is unnecessary but it's certainly not idea. I think @MaggieCabrera has some ideas to improve it.

[MaggieCabrera]

Yes, I was about to write up the design we are aiming for, I'll do it on this one and edit the issue

[MaggieCabrera]

/cc @jasmussen

[jasmussen]

Good issue. I think it's important we look at these as issues not just with the navigation inspector, but with the list view as well. The list view is just that much wider, so it's more uncommon for this to be a problem there.

Horizontal scrolling is likely inevitable, and I think a more controlled appearance for it is likely going to work well for the space available. Beyond that, as Maggie notes, it would be nice to find a design that vertically aligns the rightmost icons, up until space runs out, that's part of what the mockup above shows.

Another approach we can take, is to make the edit and elllipses items fixed position on the right edge of the item, with a little white scrim covering/eliding the text, like so:

There would still be a scrollbar to actually see the full text, but the items on the right would stay put. What do you think?

[scruffian]

I like this option, but we also have to consider what happens when it get so nested that you can't see the text at all...

[MaggieCabrera]

would the 3 dots menu be visible in this case or are they just represented on the mockup so that we know where they'll be?

[jasmussen]

I imagine the 3 dots and edit items are still only visible on hover or select.

I like this option, but we also have to consider what happens when it get so nested that you can't see the text at all...

Yes, and I think ultimately the best tools at our disposal here is being as responsible with the space as we can. The example shows groups, which would obviously not show up here, but submenus could go 3 levels deep to accomplish the same. Outside of limiting how deep we go, minimizing icons, revisiting nesting indentations et-al, I think ultimately we need a horizontal scrollbar, and as noted, the lightweight one manages prominence there as well.

In this closed branch, other options were explored, and none of them were really compelling.

[MaggieCabrera]

this is a very tricky problem indeed

[scruffian]

I think we should revisit this once Navigation: Remove OffCanvasEditor component is done.

[draganescu]

The navigation inspector tree should behave like the list view tree:

• the dot menu is aligned at all times to the right of the bounding box
• at a certain nesting level the nested items do not indent - notice in the screenshot above refund is nested under privacy policy, but it is not nested visually

[scruffian]

This component is now replaced by the List View component, so this isn't as much of an issue unless you have a nested menu. Any solution for that will need to be part of the wide list view efforts, so I think we should close this one.