For both the content region and the footer region the submenu items in the sidebar are aligned to the top of the sidebar when the sidebar is expanded on hover. The content region:
The footer region:
The distance between the top-level menu item for the user page up to the submenu items is too far apart, mostly an issue for people with low-vision relying on zoom software (see also https://scottvinkle.com/blogs/work/proximity-and-zoom). On macOS there are several approaches how to zoom in your screen (an analog alternative is the straw test, see the blog post by scott vinkle). With the full screen setting (full_screen.mp4) the submenu items are “just” too far apart from the top-level menu item. With the picture in picture setting (picture_in_picture.mp4), depending on the mode set in the advanced settings, the user is also more likely to unintentionally collapse the submenu (see “When pointer reaches edge”) - a user with tremors will struggle even more in this context. And the small zoom display window is white most of the time while scrolling up, the guard rail on the left is only a light gray border with a contrast of ~1.3:1 while the drop shadow on the right is easier to distinguish.
*We've discussed the problem in the weekly Drupal CMS a11y track meeting last Wednesday. For the record the attendees were, @katannshaw, @rkoller, and @the_g_bomb
One idea we came up with, while the submenu items are aligned to the top for top level menu items within the content region, it might be worth to consider to align the submenu items for top level menu items in the footer region to the bottom instead?
In regard to the problem with hover and the unintentional collapse of the submenu, one option might be to follow the suggestion of point 1 in #3439012: Usability review and feedback from testing and add a user setting where the user is able to choose the desired interaction pattern. One might be the current mixed interaction, the other a click only approach. But that is out of the scope for this issue and better be suited for a followup issue.
| Comment | File | Size | Author |
|---|---|---|---|
| #19 | submenu-white-background.png | 72.91 KB | benjifisher |
| #19 | submenu-no-background.png | 79.84 KB | benjifisher |
| #11 | 2cbeaac0be03d3dabf453abbc15ec78c.gif | 1.4 MB | finnsky |
| #6 | navigation-menu.mp4 | 692.99 KB | libbna |
| footer.jpg | 50.46 KB | rkoller |
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
Comments
Comment #2
rkollerComment #3
mgiffordMoving it closer to the rest of the content would make it easier for a zoom text user to spot for sure. https://www.digitala11y.com/understanding-sc-1-3-3-sensory-characteristics/
Comment #4
katannshaw commentedI agree with the proposed resolution from @rkoller:
I also think that https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus applies, especially for users with tremors or other motor disabilities, especially if they use touch devices. I could also see this being an issue for users with cognitive disabilities.
Comment #5
rkollergood point, i am adding SC1.4.13 as a tag per #4
Comment #6
libbna commentedHi, I tried to reproduce the issue but everything appears to be working fine on my end. Am I possibly missing something? The submenus seem to be correctly aligned with the top-level menus. I've attached a screen recording for reference.
Comment #7
rkoller@libbna the problem is that if you are expanding the submenu in the footer region the action sub menu menu items are not in close proximity to your cursor and focus, you have to to scroll up until you reach the actual menu items. for sighted users not a problem but if you have to rely on zoom (as illustrated in for example picture_in_picture.mp4) or you are trying the straw test to simulate the situation manually you will have a hard time to reach the sub menu aligned to the top. and there is also the danger that the hover state is lost if someone with is trying to reach the submenu at the top in case of tremors or other motor disabilities added in #4 by @katannshaw
Comment #8
catchTo be honest I have noticed this in regular usage too, if the menu item is at the bottom, and the link you want to click is at the top of the sub-menu, it's a long way to go.
Comment #11
finnsky commentedHello all!
Definitely agree.
I added quick try with footer menu alignment.
Please take a look!
Comment #12
finnsky commentedComment #13
smustgrave commentedthere a way to revert this or turn off if you don't want this functionality? Get the reasoning to make it appear at the bottom but seems "odd" and kinda looks weird now.
Comment #15
mgiffordIn discussion with @mherchel @rkoller & @kat-shaw we decided that this was not a barrier. So not a stable profile blocker, but we should get this fixed.
Comment #16
finnsky commentedI think so! This was a quick try. We need to formulate what we want.
Personally, I like the submenu headings to be at the top and the menu items to be vertically centered.
Comment #17
smustgrave commentedGuess needs usability review. To me just seems very odd to be at the bottom. Almost feels like a regression
Comment #18
benjifisherWe discussed this issue at #3571990: Drupal Usability Meeting 2026-02-13. That issue will have a link to a recording of the meeting.
The attendees at the usability meeting were @benjifisher and @rkoller. I am giving them credit on this issue.
If you want more feedback from the usability team, a good way to reach out is in the #ux channel in Slack.
Comment #19
benjifisherUsability review
At the 2026-02-13 usability meeting, we decided that there are only two solutions (or one solution with two variants). When you open a submenu, it should align with the triggering item in the main menu. I will leave that a little vague: maybe the tops of the bounding boxes should align, or maybe the baseline of the submenu's title should align with the baseline of the triggering element.
If the submenu is too tall to fit with that alignment, then align the bottom of the submenu with the bottom of the page content.
One variant has just the submenu, with appropriate padding and/or border, leaving the rest of the page content visible. The second variant has the submenu inside a full-height, opaque block that hides more of the page content.
I made a couple of crude screenshots to illustrate the layout. I edited the navigation blocks, moving the Create menu near the bottom of the page. Then I used browser tools to position a copy of the submenu and to add some borders.
First variant:
Second variant:
I am not sure which variant I prefer. If someone can implement this suggestion, then we can look at it at another usability meeting and decide. (It is probably enough to implement the second variant. Then we can use browser tools to make it look like the first variant.)