Skip to content

Navigation Block - Add setting to show submenus on arrow button click (not hover) #65214

@patrickwc

Description

@patrickwc

What problem does this address?

At the moment it is not possible to add a navigation block with submenus that show on click if you also want that link to be a normal a href link. I know you can toggle Submenus -> Open on Click in the navigation block settings, but this changes the menu item link into a button, meaning you can no longer access that menu item link.

It should be possible to have a navigation link with a submenu arrow, where the link text is clickable as a link and the arrow on the right acts as a button to show/hide the submenus.

What is your proposed solution?

Add a setting which allows a user to disable showing a submenu on hover, only showing the menu on submenu-icon (arrow) click. If this was selected, the user would have to click the arrow to show the submenu.

In WP 6.3 it was possible to override this behaviour with CSS, but since WP 6.4 JavaScript is used to change the .wp-block-navigation-submenu__toggle's aria-expanded attribute to true, so you cannot override this behaviour (to my knowledge).

I have done this myself by overwriting the CSS in WP 6.3, but because the JS listening event triggers a change to the aria-expanded value on hover (since WP 6.4, I don't know what benefit this has...), I had to overwrite all of the CSS which triggers the menu to show on aria-expanded=true and create my own JS listener event with a custom data-expanded attribute and my own custom CSS (as well as overriding the core CSS) to get submenus to show on submenu toggle click.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions