Show WordPress Navigation Sub-Menus Expanded by Default

In a WordPress block theme, the Navigation block keeps sub-menus collapsed. They only open on hover, focus or click. That works for a header dropdown. It doesn’t work for a footer sitemap, a sidebar menu or a docs navigation, where you want every child link to show without any interaction. The block has no setting for this, and the core CSS hides sub-menus with visibility, opacity and zero width and height, so a single display: block override won’t bring them back.

The snippet below registers a block style called Expanded sub-menus for the Navigation block. Select a Navigation block, open the Styles panel and choose it. Every sub-menu in that menu then shows as a nested list under its parent. Other Navigation blocks on the site are not affected. It uses no JavaScript and no template overrides, and the setting is saved in the block markup like any other block style.

The snippet

Put this in a small plugin or your theme’s functions.php.

<?php
/**
 * Navigation block style: show all sub-menus expanded.
 */
add_action( 'init', 'dpc_register_expanded_submenus_style' );

function dpc_register_expanded_submenus_style(): void {
	register_block_style(
		'core/navigation',
		array(
			'name'         => 'dpc-expanded-submenus',
			'label'        => __( 'Expanded sub-menus', 'dpc' ),
			'inline_style' => dpc_expanded_submenus_css(),
		)
	);
}

function dpc_expanded_submenus_css(): string {
	$nav  = '.wp-block-navigation.is-style-dpc-expanded-submenus';
	$item = '.wp-block-navigation-item.wp-block-navigation-submenu.has-child';

	return "
		{$nav} {$item} {
			flex-wrap: wrap;
		}
		{$nav} .wp-block-navigation__container {$item} > .wp-block-navigation__submenu-container {
			position: static;
			flex-basis: 100%;
			width: auto;
			min-width: 0;
			height: auto;
			opacity: 1;
			visibility: visible;
			overflow: visible;
			padding: 0.25em 0 0 1em;
			border: 0;
			background-color: transparent;
		}
		{$nav} .wp-block-navigation__submenu-icon {
			display: none;
		}
	";
}

How it works

• register_block_style() adds the option to the Navigation block’s Styles panel. When you pick it, WordPress adds the class is-style-dpc-expanded-submenus to the <nav> element and loads the inline_style CSS only on pages where the block is rendered.
• Core hides each .wp-block-navigation__submenu-container with position: absolute, opacity: 0, visibility: hidden and zero width and height. The second rule undoes all of that and puts the list back in the normal flow with position: static.
• flex-wrap: wrap on the parent item, plus flex-basis: 100% on the sub-menu, pushes the nested list onto its own line under the parent link. Without them, the list would sit next to the link.
• The selector chain is long on purpose. The core hover and :focus-within rules set min-width: 200px and other values with fairly high specificity. Ours is higher, so the layout doesn’t jump when someone hovers or tabs through the menu.
• The chevron toggle is hidden because there is nothing left to toggle. display: none also removes it from the tab order, so keyboard users don’t land on buttons that do nothing.

The mobile overlay already shows sub-menus expanded. The rules match what core does there, so the overlay looks the same with or without the style. If you also want to restyle that overlay, see changing the Navigation overlay menu background.

Customise it

• Indentation: change padding: 0.25em 0 0 1em to adjust how far child links are indented. Use 0 if you want a flat list.
• Top-level alignment: in a horizontal menu, a parent with a long sub-menu can make its siblings centre vertically. Add {$nav} .wp-block-navigation__container { align-items: flex-start; } to line every column up at the top.
• Desktop only: wrap the rules in @media (min-width: 600px) { … } if you want sub-menus expanded only above the overlay breakpoint, and normal dropdowns on small screens where the overlay is turned off.
• Keep the sub-menu colours: remove background-color: transparent if you set sub-menu colours on the block and want to keep them.

Gotchas

• The style is set per block. If a template part uses the same menu twice, for example a header dropdown and a footer sitemap, pick the style on the footer block only.
• If Open on click is enabled, the parent item is a <button>, not a link. With every sub-menu already open, that button does nothing. For a sitemap-style menu, turn the option off so parents stay real links.
• If your theme or another plugin restyles .wp-block-navigation__submenu-container with !important, those rules will still win. Search your stylesheet for that selector first.
• The CSS also loads in the editor, so the expanded layout usually shows there too. While you edit a sub-menu, the editor opens it on its own, so check the front end for the final result.

// newsletter

Three tested WordPress snippets a week

Blocks, security, performance, Tailwind, PHP and React. Copy, paste, ship. You’ll also get DPlugins product updates. No spam, and you can unsubscribe anytime.

Leave this field empty

Email address Subscribe