[Resolved] Navigation Menu in block

[Website Psychiatrist]

Hello,
I’m using generate press to create headers and sidebar elements and I feel like I’m completely missing something.

I would expect that I could insert a navigation menu block into one of these elements, but I’m not finding a navigation menu block.

It would seem to me that a navigation menu block would exist, and I find articles that seem to be from WordPress developers discussing the existence of a navigation menu block, but I can’t find one anywhere.

The only thing I seem to be finding is a collection of blocks from HayyaBuild, but I was wanting to build my sites exclusively in native WordPress and GeneratePress, and not have to install multiple block libraries. Am I missing something? Am I doing something wrong?

Thanks,
Bill

[Leo]

Hi there,

The navigation menu block doesn’t exist currently unfortunately – we feel like this is something WordPress should add to the core so we are holding out on it currently.

Do you have an example of a header you are trying to create?

I can try to see if we can do it without using the block element to build it.

Let me know 🙂

[Website Psychiatrist]

Okay, so I’m not crazy? 🙂

It seems like something so obvious that I would have expected it to be in Gutenberg 1.0. The articles written by WP developers give the impression that it exists, but apparently only in a beta version somewhere.

You can see in this sidebar where I’m currently using widgets to get a menu in it, but I’d rather build a sidebar block element so that I can completely control the look and functionality.

https://mr3.cincsolutions.com/managed-it-services/

This site isn’t switched over to GeneratePress yet, but I will be needing to recreate the category and industry menus in the header block element.

https://www.floormat.com/

Thanks!
Bill

[Elvin]

Hi Bill,

If I may suggest:

Since there’s no navigation menu block, consider installing a plugin that lets you display your navigation menus with a shortcode.

You then use that shortcode within the Gutenberg editor by placing the shortcode of navigation menu from a plugin to a Gutenberg Shortcode block.

This may be the closest alternative to having a navigation menu block.

[Website Psychiatrist]

Any suggestion on a plugin to display a menu via a shortcode? It seems like most of the stuff out there is for incorporating a shortcode into a menu. The one plugin I found was 3 years out of date and didn’t work correctly.

For the time being, I just manually built the links in the sidebar element.

[Elvin]

We don’t exactly have a specific plugin recommendation but here’s a fast one.

This PHP snippet allows you to use [portable_menu menu_name="Your menu name or menu ID"] anywhere on the site that allows shortcodes to run.

add_shortcode('portable_menu', function($atts){
	ob_start();
        $atts = shortcode_atts( array(
            'menu_name' => ''
        ), $atts, 'portable_menu' );
        wp_nav_menu(
        array(
            'menu' => $atts['menu_name'],
            'container' => 'div',
            'container_class' => 'portable-nav',
            'menu_class' => '',
            'fallback_cb' => 'generate_menu_fallback',
            'items_wrap' => '<ul class="portable-nav-menu ' . join( ' ', generate_get_element_classes( 'menu' ) ) . '">%3$s</ul>',
            )
        );
	return ob_get_clean();
});

You then style it with CSS:

Example: Making the portable_menu display horizontally with margin for spacing.

ul.portable-nav-menu.menu.sf-menu li:not(last-child) {
    margin-left: 15px;
}
ul.portable-nav-menu.menu.sf-menu {
    list-style: none;
    display: flex;
}

[Website Psychiatrist]

Awesome. Thank you! That will give me a good foundation to move a couple of different projects forward.

[Elvin]

Awesome. Thank you! That will give me a good foundation to move a couple of different projects forward.

Familiarity with WordPress Codex helps a lot. 🙂

But if the menu gets a bit complex you may also need a bit of scripting and CSS knowledge on top of the WordPress core functions.

No problem. 😀

[Website Psychiatrist]

Howdy! I’m back on this experiment and I’ve got answers!!!

Since my last update to this ticket, I’ve discovered Gutenberg Navigation Blocks — and more importantly (for any of you beating your head against the wall) the fact that you have to INSTALL the Gutenberg Plugin (even though it’s part of WP core). Apparently Navigation Blocks are not currently part of core Gutenberg, and almost all articles that talk about Gutenberg Navigation blocks fail to mention this one little detail. </rant>

So you can see pure GeneratePress & Gutenberg drop down menus added to a Header Block here (Categories and Industries are individual menus):
https://fm.nearorbit.com/

There’s a good chance that some of the functionality that allowed this to actually work is in Gutenberg plugin Version 10.3.1 from the end of March 2021. So if you can’t create Header Block menus, make sure that the Gutenberg plugin is installed and updated.

[Elvin]

Since my last update to this ticket, I’ve discovered Gutenberg Navigation Blocks — and more importantly (for any of you beating your head against the wall) the fact that you have to INSTALL the Gutenberg Plugin (even though it’s part of WP core). Apparently Navigation Blocks are not currently part of core Gutenberg, and almost all articles that talk about Gutenberg Navigation blocks fail to mention this one little detail. </rant>

I’d check around the site with that plugin installed. Some users have reported issues w/ the Gutenberg plugin conflicting with some of their plugins.

I’ve made a shortcode for you incase the issue I’ve mentioned happens.

add_shortcode('portable_menu',function(){
ob_start();
    // Start your PHP below
	wp_nav_menu(
					array(
						'container' => 'div',
						'container_class' => 'main-nav',
						'container_id' => 'primary-menu-shortcode',
						'menu_class' => '',
						'fallback_cb' => 'generate_menu_fallback',
						'items_wrap' => '<ul id="%1$s" class="%2$s ' . join( ' ', generate_get_element_classes( 'menu' ) ) . '">%3$s</ul>',
					)
				);
	// End your PHP above
return ob_get_clean();
});

With this PHP snippet, you can use [portable_menu] on a shortcode block to place it within your content area. It generates the primary menu only.

This way, perhaps you won’t be needing the Gutenberg editor plugin for its navigation block. 🙂

Thanks for sharing it with us. 🙂

[Matthias]

Elvin, This PHP snippet is great, I was searching for hours to find a solution using a navigation in a sidebar with Elements.

[Elvin]

@Matthias

No problem. Glad to be of any help. 😀

[Aaron]

@Elvin ‘s snippet helped me, since the gutenberg plugin caused some issues with generate blocks.
It is posible to display any menu if we provide a name in the arguments array

I altered the snippet it to

/**
 * GeneratePress Menu Shortcode
 * Usage: [addmenu name="Primary Menu"]
*/
function akdev_menu_shortcode($attr){
    ob_start();
    // Start your PHP below
    $args = shortcode_atts([
        'name'  => '',
        ], $attr);
 
    wp_nav_menu([
        'menu'             => $args['name'],
        'container' => 'nav',
        'container_class' => 'menu-'. $args['name'] .'-container',
        'container_id' => $args['name'].'-menu-shortcode',
        'menu_class' => '',
        'fallback_cb' => 'generate_menu_fallback',
        'items_wrap' => '<ul id="%1$s" class="%2$s ' . join( ' ', generate_get_element_classes( 'menu' ) ) . '">%3$s</ul>',
        ]);
    // End your PHP above
    return ob_get_clean();
}
add_shortcode('addmenu', 'akdev_menu_shortcode');

[Elvin]

Hi Arron,

You can definitely do that but I don’t think name is the one to use.

You can use this page as reference – https://developer.wordpress.org/reference/functions/wp_nav_menu/

Looking at this page, you can use this to specify the menu –

$args = shortcode_atts([
        'menu'  => '',
        ], $attr);

[Thomas]

Quick question … for the arrays that can be added, I’d like to see about adding in an aria-label.
I’ve changed the 'container' to be 'nav',

Then I was looking to add in:
'container_aria_label' => '',

I just wasn’t sure how can I add in the class and aria-label attribute into the shortcode?

[portable_menu aria-label="custom-label" menu_name="name-of-menu"]

Where the output,

[Author]

Posts