Skip to content

Navigation Submenus should have better vertical display options #70832

@tellthemachines

Description

@tellthemachines

What problem does this address?

The Navigation block Submenus always display as dropdowns (unless the Overlay option is selected for all screen sizes). This layout is optimised for horizontal navs, but it doesn't work great on vertical ones. This is a fairly common website pattern:

Image

But ideally, instead of the submenu displaying in a dropdown, it should either be visible at all times, or expand/collapse in an accordion pattern.

What is your proposed solution?

I tried solving this problem with some hacky CSS to always display the submenus:

.wp-block-navigation.is-vertical {
    .wp-block-navigation-submenu {
        display: block !important;
    }
    .wp-block-navigation__submenu-icon {
        display: none !important;
    }
    .wp-block-navigation__submenu-container {
       /* reset submenu dropdown styles */
        visibility: initial !important;
        opacity: initial !important;
        position: initial !important;
        height: initial !important;
        width: initial !important;
    }
}

It doesn't take a huge amount of restyling 😄

But a better solution for the block might be to add another configuration option to disable the submenu dropdowns (and maybe make that the default if the nav has a vertical orientation?)

We could also consider adding an accordion option.

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Block] NavigationAffects the Navigation Block[Block] SubmenuAffects the Submenu Block - for submenus in navigation[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions