[Resolved] Navigation Menu in block

Home Forums Support [Resolved] Navigation Menu in block

Home Forums Support Navigation Menu in block

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1642310
    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

    #1642319
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #1642327
    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

    #1642645
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1643669
    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.

    #1643680
    Elvin
    Staff
    Customer Support

    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;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1643711
    Website Psychiatrist

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

    #1643713
    Elvin
    Staff
    Customer Support

    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. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #1720273
    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.

    #1721411
    Elvin
    Staff
    Customer Support

    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. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #1964968
    Matthias

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

    #1966792
    Elvin
    Staff
    Customer Support

    @Matthias

    No problem. Glad to be of any help. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #2079360
    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');
    #2082678
    Elvin
    Staff
    Customer Support

    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);

    A wise man once said:
    "Have you cleared your cache?"

    #2193964
    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,

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.