Documentation Insight Menu Block

Documentation for the Insight Menu Block plugin

How the block works

  • Inner blocks for the mobile overlay
  • Custom breakpoint
  • Most right dropdown optionally opens left
  • 6 different icons
  • Adjustable icon height
  • Toggle menu label
  • Mobile overlay editing mode
  • Complete or partial mobile overlay
  • Classic-style menu builder
  • Classes per item
  • Logged in/out options
  • Aria label
  • Open the mobile submenu by clicking the menu-item
  • Easy, stable and fast
  • The plugin has two blocks; the Insight Menu Block and the Mobile Menu Items sub-block.
  • Place the Insight Menu Block anywhere in your header, just like the native navigation block.
  • Place the Mobile Menu Items sub-block anywhere on the mobile overlay; you can insert blocks before and after the Mobile Menu Items sub-block. Think about a logo, heading, socials, etc.
  • Every menu-item has its own class. Ideal for targeting per item, for translation plugins (notranslate) etc.
  • Hide menu-items based on logged-in / logged-out status, without an additional plugin.

Free versus Pro in short

  • Free version: The free version already offers good functionality.
  • Pro version: will be required to unlock all the options.
  • The Pro requires the free version to be installed.

Insight Menu Block

Limitations

  • The Insight Menu Block plugin is for FSE (full site editing) themes only.

Installation

  • Upload the Free ‘Insight Menu Block’ folder to /wp-content/plugins/
  • Or activate the plugin through the Plugins menu in WordPress.
  • If you have a Pro license, install the Pro version as well.
  • Edit site.
  • Click on the header.
  • In the settings choose to edit the original header (Edit original).
  • Place the ‘Insight Menu Block’ block in the header.
    • Search for ‘dynamic’ or ‘classic’ in the blocklist.
  • Remove the native navigation block (important).
  • Create a classic-style menu (Admin menu, Appearance / Menus).
  • Select the location at the bottom of the classic style menu:
    • Insight Menu Block (plugin).
  • Go to the header / Insight Menu Block.
    • Select the correct menu in the ‘Classic menu’ field.

Blocks

FREE
The plugin provides two blocks:
  • Insight Menu Block
  • Mobile Menu Items.
Insight Menu Block
  • The Insight Menu Block is placed in the header and replaces the native navigation block.
  • Sometimes you have to reset the rowblock flex settings after placement.
  • The settings or the Insight Menu Block are in the block settings on the right.
Mobile Menu Items sub-block
  • This block is placed automatically in the Insight Menu Block.
  • What is does is show the menu in the mobile overlay.
  • The Pro version allows you to decide where the mobile menu is displayed within the overlay and lets you place Gutenberg blocks above and below it.
  • The Mobile Menu items block doesn’t need any settings, since it inherits the settings of the main block.
  • The Mobile Menu items block cannot be used outside the Insight Menu Block.

Alignment

FREE
  • Left, Center, Right, Space in Between.
  • Keep in mind that the Insight Menu Block is usually placed inside a group or row block, and that the settings of the latter often take precedence. If you want the menu block in the header—for instance, right-aligned—place it in a separate row block or a div, and set the parent row block to space items out (e.g., space-between).
FREE
  • There are different styles for showing the submenu type:
    • Hover – opens submenu on hover (desktop, not mobile).
    • Click menu item (default) – opens the submenu on click (desktop) and makes the whole menu-item clickable on mobile.
    • Click toggle – opens the submenu on toggle click only (both desktop and mobile).

Last dropdown behaviour

PRO
  • ‘Last dropdown opens left’ does exactly that.
  • If the last menu-item on the right is a dropdown, it occasionally touches the window edges or even hides partially behind.
  • ‘Last dropdown opens left’ makes sure that the dropdown opens left, with a right alignment.

Mobile breakpoint (px)

FREE
  • The mobile breakpoint determines the point at which the standard menu switches to the mobile menu. This value is in px.
  • Default value: 768px
  • Effect: Any window width of 768 or wider shows the standard desktop menu. Anything smaller shows the mobile menu.

Mobile menu type

FREE
PRO
  • Full overlay – covers the entire mobile screen, top to bottom). Default.
  • Partial overlay [PRO] – starts after the header and covers the entire mobile screen, header to bottom.
  • Flyout (sideways) [PRO] from left to right.
  • Flyout (sideways) [PRO] from right to left.
  • The Sideway options provide a field to set the width of the flyout in px, % or rem.

Open sub-menus on mobile

PRO
  • Some website designs prefer the submenu’s closed (collapsed) while other designs opt to have it open.
  • The toggle changes this behavior.

Hamburger icon

FREE
PRO
  • You have a choice of 6 hamburger icon designs (2 in the free version).
  • The height is totally adjustable.
  • The value field accepts px or rem. If not specified, the value is treated as px.
  • In the color section you can set a color and hover color.

Show toggle label

PRO
  • It is possible to show a menu name on mobile, like ‘Menu’ or anything you like.
  • The menu name is shown after the icon.

Spacing & width

Partly PRO
FREE
Horizontal spacing
  • Desktop main menu only — left/right padding inside top-level links (larger tap/click area).
  • Does not affect dropdowns or mobile.
Vertical spacing
  • Desktop dropdown rows and mobile menu rows (main + submenu) — top/bottom padding inside links.
  • Does not change desktop main bar height.
  • Desktop dropdown only — left and right padding inside submenu links (one value for both sides).
Mobile submenu indent
  • Extra left indent for nested items in the mobile overlay only.
  • Dropdown width.
  • 220px is a good startingpoint.
  • Width for desktop view only.
  • Width on mobile overlay is limited only by the width of the mobile screen minus padding and the set indent.

Editable Mobile Overlay

PRO
  • Insight Menu Block PRO offers a completely editable mobile overlay.
  • You can place other Gutenberg blocks in the overlay.
  • The location of the mobile menu on the overlay is determined by the placement of the “Mobile menu items” block.
  • You can place other blocks above or below the mobile menu items block as desired. For example, placing an image block with a logo above the mobile menu works well; below the menu, you might consider adding social media icons.
Show mobile overlay
  • On top of the block settings there is a toggle ‘Show mobile overlay’.
  • The overlay then expands to show all placed blocks.
  • In this mode, you can also add or edit other blocks.

Colors

Partly PRO
FREE
  • You can configure colors for all elements, and they are self-explanatory.
  • Accepted values: Hex, RGB and HSL.
  • Copy and paste is possible.

ARIA label

FREE
  • The ARIA label is intended to indicate the purpose—the function—of this menu. Google reads it aloud, as do devices for the blind and visually impaired.

Classic style menu builder

FREE
  • Create menu’s easily
  • Switch between menus
  • Class per menu-item
  • Target per menu-item

Show logged-in / logged out

PRO
  • Every menu-item and submenu-item has the option to show when logged-in / logged out / both

Caching

  • The header and its content are usually cached by the caching plugin.
  • More and more hosting companies are offering an internal cache that typically includes the page structure, including the header.
  • Make sure you empty the cache after making changes.
Back to the Insight Menu Block