[Block] Navigation - Improve hierarchical display of Overlay Submenus that are justified center or right

[cuemarie]

What

When the Navigation Block is justified center, it's submenu items appear very similar to parent menu items, unlike when the nav block is justified left or right. This is most noticeable on submenus with additional submenus, where padding/spacing make things look even harder to distinguish.

1. On a site with a block theme, set up a Navigation Block > Submenu > Child Menu Links + Another Submenu > Child Menu Links
2. Justify the Navigation block center
3. Set the Settings > Overlay Menu to "Mobile"
4. Save and view the site on a mobile device or in a browser using Responsive Design Mode

The Submenu's child items in the overlay aren't noticeably different than parent items, with some confusing spacing that makes it hard to tell what is a child item and what is a parent item.

Why

Some sites put quite a bit of hierarchical organization into their menus, with the intention of helping their visitors find the content they need. This organization is lost, and the result can be quite confusing to look at.

Examples

Desktop View of Menu with submenu hierarchy

How the Overlay menu works if the menu is Justified LEFT or RIGHT

The hierarchy of the menu is preserved on the overlay menu.

Overlay menu when Justified CENTER

Notice how "Submenu 2", which is a child of the "Getting Started" parent item, appears just under the child items of Submenu 1, obscuring the hierarchy. Further, the odd padding between elements makes things harder to follow.

How

This seems to touch on a few different factors:

• Navigation block: default spacing issue with sub menus  WordPress/gutenberg#44714
• Navigation: Using different item justification on main menu and overlay menu WordPress/gutenberg#35612
• Navigation block's responsive modal can't be customized WordPress/gutenberg#34514 , which was closed in favor of Ability to have different links in the "mobile" menu vs the standard menu. WordPress/gutenberg#38201

Update - A core request was submitted here as well: WordPress/gutenberg#45612

[cuemarie]

@mdtanjid0 reported this issue here: #75549 for a user following this interaction: 6133315-zen

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 6133315-zen

[masperber]

I think there is also need for improvement of the display when the hierarchical menu is justified to the right.

Here is a screen capture of a hierarchical menu justified to the right on an FSE theme as of April 2024. In the image, the top-level menu items appear to the far right. Sub-menu items appear indented to the left.

I received customer feedback that this display looks strange, and I agree that to someone who is used to reading text left to right it does look strange, and hard to determine what is a top-level menu item and what is a submenu item.

The flip side of this is how to give support to people who use languages that read right to left, but I think those languages might find the appearance on left-indent as similarly strange.

I think the Navigation Block needs more customization options. For instance, it would be useful to be able to justify items one way for the non-overlay menu and another way for the overlay menu. It would also be useful to be able to have greater control over the appearance of the overlay menu, such as padding around the left and right sides of the links, and controlling how the sub-menu items are indented with respect to the top-level menu items.