Ability to add Navigation menu items Into Group/Stack/Row

[PradViking]

Hi,

Currently we cannot add menu items inside Groups/Rows/Stacks. All items inside a menu item are together so we can't style it the way we want.

Example - I was trying to design a mobile menu where the menu items are the top and the Site Logo and a copyright at the bottom of the screen. Easiest way would have been to create a Stack block inside the Menu/Nvaigation block within which would be 2 groups, first containing the Menu Items and Second group containing the Site Logo and copyright text. But currently cannot do that out of the box.

Ability to group items inside the Navigation/Menu block can open a lot of design possibilities.

[t-hamano]

Hi,

Have you tried the code like this?

import { addFilter } from '@wordpress/hooks';

addFilter( 'blocks.registerBlockType', 'my-list-item', ( settings, name ) => {
	if ( name !== 'core/navigation' ) {
		return settings;
	}

	const { allowedBlocks = [] } = settings;

	return {
		...settings,
		allowedBlocks: [
			...allowedBlocks,
			'core/group',
		],
	};
} );

This JS hook allows you to insert the Group block inside the Navigation block.

Note that this hook allows any block to be inserted inside a Group block inside a Navigation block, so if you want to prevent this you may need to extend this code.

[PradViking]

@t-hamano

Thanks. I'll give this a try.

I hope this is made part of core so one doesn't need to add code or research on the topic to find the solution.