{"id":894,"date":"2023-09-26T09:54:24","date_gmt":"2023-09-26T07:54:24","guid":{"rendered":"https:\/\/wypo.io\/documentations\/%taxomony%\/gutenberg-navigation\/"},"modified":"2024-07-22T07:19:21","modified_gmt":"2024-07-22T05:19:21","slug":"gutenberg-navigation","status":"publish","type":"wypo_documentations","link":"https:\/\/wypo.io\/en\/documentations\/gutenberg-navigation\/","title":{"rendered":"Gutenberg Navigation"},"content":{"rendered":"            <div class=\"hf_animated fade_bottom none default wp-block-habefast-advanced-layout-group is-layout-constrained wp-block-habefast-advanced-layout-group-is-layout-constrained\">\r\n                <div class=\"wp-block-habefast-advanced-group-container is-style- is-layout-constrained\"  style='--_hfal-cg-d-lg:flex;--_hfal-cg-d-md:flex;--_hfal-cg-d-sm:flex;'>\r\n                                        <div class=\"wp-block-habefast-advanced-group-inner is-layout-flow\">\r\n                        \n\n<h2 class=\"wp-block-heading   \" datalink=\"content-prerequis\">Requirements<\/h2>\n\n\n\n<ul class=\"is-style-important wp-block-list\">\n<li class=\"\"><strong>WordPress<\/strong> : Version 5.9 or higher<\/li>\n\n\n\n<li class=\"\"><strong>PHP<\/strong> : Version 7.0 or higher<\/li>\n<\/ul>\n\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \n\n            <div class=\"hf_animated fade_bottom none default is-style-smallbordertop wp-block-habefast-advanced-layout-group is-layout-constrained wp-block-habefast-advanced-layout-group-is-layout-constrained\">\r\n                <div class=\"wp-block-habefast-advanced-group-container is-style- is-layout-constrained\"  style='--_hfal-cg-d-lg:flex;--_hfal-cg-p-t-lg:var(--wp--preset--spacing--50);--_hfal-cg-m-t-lg:var(--wp--preset--spacing--50);--_hfal-cg-d-md:flex;--_hfal-cg-d-sm:flex;--_hfal-cg-p-t-md:var(--wp--preset--spacing--50);--_hfal-cg-p-t-sm:var(--wp--preset--spacing--50);--_hfal-cg-m-t-md:var(--wp--preset--spacing--50);--_hfal-cg-m-t-sm:var(--wp--preset--spacing--50);'>\r\n                                        <div class=\"wp-block-habefast-advanced-group-inner is-layout-flow\">\r\n                        \n\n<div class=\"wp-block-group   hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading   \" datalink=\"content-installation\">Installation<\/h2>\n\n\n\n<p class=\"\">To install the plugin, please refer to the &#8220;<a href=\"https:\/\/wypo.io\/en\/complete-guide-installing-wordpress-plugin\/\">Installing a plugin<\/a>&#8221; documentation.  <\/p>\n<\/div>\n\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \n\n\n<div class=\"wp-block-group is-style-smallbordertop  hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--50)\">\n<h2 class=\"wp-block-heading   \" datalink=\"content-usage\">Usage<\/h2>\n\n\n\n<h3 class=\"wp-block-heading   \" datalink=\"content-menu-selector-block\">Menu Selector\u2019 block<\/h3>\n\n\n\n<p class=\"\">The \u2018Menu Selector\u2019 block is used to select a classic menu already created in WordPress. This block can be used on its own on a page to display a menu, for example to create a table of contents.<\/p>\n\n\n\n<ol class=\"wp-block-list   \">\n<li class=\"\">Go to the Gutenberg editor of the page or article where you want to add the menu.<\/li>\n\n\n\n<li class=\"\">Click on the <strong>Add a block<\/strong> button.<\/li>\n\n\n\n<li class=\"\">Find and select the <strong>Menu Selector<\/strong> block.<\/li>\n\n\n\n<li class=\"\">In the block options, select the menu you want to display from the available menus.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading   \" datalink=\"content-block-parameters-menu-selector\">Block parameters Menu selector<\/h4>\n\n\n\n<ul class=\"wp-block-list   \">\n<li class=\"\">Class and ID for the menu HTML tag<\/li>\n\n\n\n<li class=\"\">Class and ID for the menu container<\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/walker\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Walker<\/a>, used to fill in a PHP class to customise the menu rendering; this class must be declared in the theme.<\/li>\n<\/ul>\n\n\n\n<p class=\"is-style-note   \">The rendering will only be displayed on the online site and not in the administration interface.<\/p>\n\n\n      <div style=\"--_hfal-s-h-lg:var(--wp--preset--spacing--50);\" class=\"wp-block-habefast-spacer\"><\/div>\r\n      \n\n\n<h3 class=\"wp-block-heading   \" datalink=\"content-navigation-block\">Navigation\u2019 block<\/h3>\n\n\n\n<p class=\"\">The \u2018Navigation\u2019 block uses the \u2018Menu Selector\u2019 block to transform a site menu into an adaptable menu.<\/p>\n\n\n\n<p class=\"\">The block automatically manages several aspects to optimise menu display:<\/p>\n\n\n\n<ul class=\"wp-block-list   \">\n<li class=\"\"><strong>Mobile menu display<\/strong>: The plugin detects the screen size and switches to the mobile menu when necessary.<\/li>\n\n\n\n<li class=\"\"><strong>Sub-menu display<\/strong>: Sub-menus are automatically supported for smooth navigation.<\/li>\n\n\n\n<li class=\"\"><strong>Fixed menu margins<\/strong>: If the menu is fixed, the plugin automatically adds the necessary margins to avoid overlapping with the page content.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading   \" datalink=\"content-navigation-block-parameters\">Navigation block parameters<\/h4>\n\n\n\n<ul class=\"wp-block-list   \">\n<li class=\"\"><strong>Layout<\/strong>\n<ul class=\"wp-block-list   \">\n<li class=\"\"><strong>Simple<\/strong>: Creates a menu with a logo and a menu<\/li>\n\n\n\n<li class=\"\"><strong>Top Header<\/strong>: Adds an additional top bar to the simple menu<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"\"><strong>Fixed<\/strong>: Activate this option to make the menu fixed at the top of the page.<\/li>\n\n\n\n<li class=\"\"><strong>Breakpoint<\/strong>: Specify the breakpoint for the moving menu (in pixels).<\/li>\n\n\n\n<li class=\"\"><strong>Overlay<\/strong>: Activate this option to allow your fixed menu to overlay the page content. If not, an internal margin will be added to prevent overlapping.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading   \" datalink=\"content-sub-blocks\">Sub-blocks<\/h4>\n\n\n\n<ul class=\"wp-block-list   \">\n<li class=\"\"><strong>Row<\/strong>: Block used to add row blocks.<\/li>\n\n\n\n<li class=\"\"><strong>Menu Content<\/strong>: Block dedicated to managing the mobile menu. Content added in this block will appear in the mobile menu if the \u2018Breakpoint\u2019 field in the Navigation block is defined.<\/li>\n\n\n\n<li class=\"\"><strong>Top Header<\/strong>: Block used to create a top (or bottom) header for the menu. This block includes the Row block as a child element.<\/li>\n<\/ul>\n<\/div>\n","protected":false},"featured_media":0,"parent":0,"menu_order":53,"template":"","meta":{"_habefastfse_class":"","hf_wpseo_meta_title":"Dynamic and responsive menus [separator] [sitetitle]","hf_wpseo_meta_description":"Discover the complete documentation for the Gutenberg Navigation plugin for WordPress. Learn how to use blocks to create fixed and mobile menus, customise your header, and optimise the display of your menus on all devices.","hf_wpseo_meta_robots_index":"","hf_wpseo_meta_robots_follow":true,"hf_wpseo_meta_robots_advanced":"{}","hf_wpseo_meta_canonical_url":"","documentation_description":"The \u2018Gutenberg Navigation\u2019 plugin for WordPress lets you use the classic WordPress menus in the Gutenberg editor, making it easy to create mobile menus in the header of a site. ","documentation_menu_text":"","documentation_related_pageid":184,"wypo_hidden_role_wypo_users_not_logged":false,"wypo_visibility_role_wypo_users_not_logged":false,"wypo_hidden_role_administrator":false,"wypo_visibility_role_administrator":false,"wypo_hidden_role_habefast":false,"wypo_visibility_role_habefast":false,"wypo_hidden_role_customer":false,"wypo_visibility_role_customer":false,"wypo_hidden_role_habefast_manager":false,"wypo_visibility_role_habefast_manager":false,"wypo_hidden_for_role":false,"wypo_visibility_for_role":false},"class_list":["post-894","wypo_documentations","type-wypo_documentations","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/wypo_documentations\/894","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/wypo_documentations"}],"about":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/types\/wypo_documentations"}],"wp:attachment":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/media?parent=894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}