Requirements
- WordPress : Version 5.9 or higher
- PHP : Version 7.0 or higher
Installation
To install the plugin, please refer to the “Installing a plugin” documentation.
Usage
Menu Selector’ block
The ‘Menu Selector’ 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.
- Go to the Gutenberg editor of the page or article where you want to add the menu.
- Click on the Add a block button.
- Find and select the Menu Selector block.
- In the block options, select the menu you want to display from the available menus.
Block parameters Menu selector
- Class and ID for the menu HTML tag
- Class and ID for the menu container
- Walker, used to fill in a PHP class to customise the menu rendering; this class must be declared in the theme.
The rendering will only be displayed on the online site and not in the administration interface.
Navigation’ block
The ‘Navigation’ block uses the ‘Menu Selector’ block to transform a site menu into an adaptable menu.
The block automatically manages several aspects to optimise menu display:
- Mobile menu display: The plugin detects the screen size and switches to the mobile menu when necessary.
- Sub-menu display: Sub-menus are automatically supported for smooth navigation.
- Fixed menu margins: If the menu is fixed, the plugin automatically adds the necessary margins to avoid overlapping with the page content.
Navigation block parameters
- Layout
- Simple: Creates a menu with a logo and a menu
- Top Header: Adds an additional top bar to the simple menu
- Fixed: Activate this option to make the menu fixed at the top of the page.
- Breakpoint: Specify the breakpoint for the moving menu (in pixels).
- Overlay: Activate this option to allow your fixed menu to overlay the page content. If not, an internal margin will be added to prevent overlapping.
Sub-blocks
- Row: Block used to add row blocks.
- Menu Content: Block dedicated to managing the mobile menu. Content added in this block will appear in the mobile menu if the ‘Breakpoint’ field in the Navigation block is defined.
- Top Header: Block used to create a top (or bottom) header for the menu. This block includes the Row block as a child element.