Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
When the navigation panel is collapsed, there's no indication as to which menu is which. This can be confusing for users to navigate.
- Navigate to
admin/config/user-interface/navigation-block - Edit/configure an existing navigation block
- Check the checkbox to enable the title for that menu and save
- That block will now have a title on the left toolbar.
- Collapse the toolbar: a dot will take the place of the title
Proposed resolution
When the navigation is collapsed, replace the text title with a dot icon, remove any hover interactions that match link hover effects, and instead have the menu title show in a tooltip (see Figma designs).
| Comment | File | Size | Author |
|---|---|---|---|
| #8 | tootlltip-final-design.png | 45.26 KB | ckrina |
| #3 | tooltip-title.png | 65.78 KB | ckrina |
Issue fork navigation-3435989
Show commands
Start 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
KeyboardCowboyWe need to get the design mocks for this one from Figma.
Comment #3
ckrinaComment #4
kostyashupenkoGonna try it
Comment #5
kostyashupenkoPostponed because this functionality is already partially done here https://www.drupal.org/project/navigation/issues/3427659
Comment #6
ckrinaThis has bee implemented in #3427659: Implement drawer functionality and #3427657: Implement the new designs to the drawer. But one small detail is missing: the pointer style should be defined so the browser doesn't show a "?".
Comment #8
ckrinaAdded styles based on the final designs, plus updated the issue summary to reflect the final designs and testing steps.
Comment #9
rkollerOne problem to note, if you try to tab through the collapsed sidebar, menu block titles are not focusable. with tabbing that structuring element is unavailable to screenreader users. the only cue screenreader users have is that there are four headers by default (in case the display of title is active):
shortcuts
content
administration
rkoller
just based on the announcement it is not clear that those are actual section headers, you would need the visual context. in addition tabbing is the only way to get all the menu block titles as well as menu items in consecutive order. in the voice over rotor the components are scattered, the block titles are headers, top level items with a sub menu are buttons and top level items without a submenu are links.
Comment #10
ckrina@rkoller thanks for the feedback! Could you open a follow-up issue for that and add it into the accessibility plan? It's not that I don't care about accessibility, but we need to move and iterate fast to get the navigation to a better point, and the classic core treatment of issues where nothing gets in until it's perfect will slow us down in this very key moment. :)
Comment #11
ckrina@rkoller opened #3439643: Improve how and what navigation block titles are communicating to screenreader users as a follow-up for the keyboard issue.
Comment #12
rkollerThere are only two concerns i have. For the first i've already opened up a follow up issue in the context of keyboard and screenreader accessibility (will add another comment about the needs for sighted keyboard users there as well).
the other detail is about the dot, but that concern shouldnt be a blocker for this issue. overall it is difficult to communicate with just an icon that the user should hover over the icon (when i first saw the dot i thought some icon was missing - like for a missing unicode glyph) . creating another follow up issue wouldnt make much sense since that issue wouldnt be actionable and with the navigation issue queue moving over into the core issue cue soon it would be cruft for the time being. @ckrina made a note about the dot and will continue ideating on it over with the folks in the design team. therefore no followup issue necessary in this case. therefore this issue could be set to rtbc
Comment #14
ckrinaThanks @rkoller! Merging this for now and we can make the improvements in a follow-up.