GutenKit Nav Menu block is a robust solution to easily add and customize menu and submenu items on the Gutenberg editor. Also, it has features to design a mobile menu for your mobile devices.

Go through this doc to learn how to use GutenKit Nav Menu block from your block editor.

How to Use GutenKit Nav Menu Block? #

Get started with installing the GutenKit plugin fra dit WordPress-dashboard.
You can follow the video tutorial:

Or, follow the below steps and create your desired Nav Menu with GutenKit.

Step 1: Add GutenKit Nav Menu Block #

Take a new page or go to the existing one.

• Find "+” icon at the top of the editor screen
• Clicking it will open the block library

• Søg efter GutenKit Nav Menu
• Once it appears, click or drag & drop the block in the editor screen

Step 2: Add Navigation Menu Item #

After you’ve added the Nav menu block on the editor screen. Now, you can choose from patterns or start blank to create a nav menu.

Start Blank: If you go with the blank option, it’ll display all your published menu items. Also, you’ll see a + icon to add more items.

Ready Pattern: Check GutenKit nav menu patterns and import one.

However, to access all the GutenKit patterns, you’ll need to activate GutenKit Pro plugin.

Step 3: Customize Nav Menu Block #

Whether you start with the blank option or pick a pattern, you can cuztomize it based on your preferences. Let’s learn how you can do it.

Adjust menu items #

Det content tab of Nav Menu Item lets you cuztomize –

Menu link: This is the URL the navigation menu item points to, where visitors go when they click it.

Add SubMenu: Click this toggle button to enable sub-menu. A “+” icon will appear below the menu item on the editor screen.

Submenu Type: There are two types –

• Dropdown: Choose Dropdown for a simple list of sub-links
• Mega menu: Choose Mega Menu for a wider, multi-column submenu layout

Clicking the sub-menu item will open the settings options. Under the Indstillinger option:

• Beholderbredde: Use this slider to increase the submenu width to the right side.

It also offers, Stil kontroller.

Submenu Wrapper –

• Justering: Define the submenu text position within the submenu wrapper.

Undermenu Vare -

• Item Space Between: Use this slider to define the gap between submenu items.
• Typografi: Use these settings to change the font family, weight, transform, style, decoration, spacing, etc.

You can apply the following settings individually to the Normal, Svæv, og Aktiv modes for the submenu.

• Baggrund: Give a between a solid color or gradient background type.
• Tekst farve: Select a text color using the color picker.
• Grænse: Choose a color for the border.
• Polstring: Enter a value manually to increase spaces inside the border.
• Grænseradius: Use this option to define the roundness of the border.

You will also see a new option named “Undermenuindikator” in the setting area.

• Submenu indicator Icon: Choose an icon from the library or upload your SVG file as the submenu indicator icon.
• Indicator Icon Size: Use the slider to define the size of the submenu indicator icon.
• Indicator Left Space: Adjust the gap between the menu name and icon using this slider.
• Grænse: Give a border around the icon and select its color, style, and thickness.
• Polstring: Add inner space within the icon border.
• Grænseradius: Set the roundness of the icon border.

Next, we’ll move on to the parent settings or the Nav Menu block customization. 

Configure the Nav Menu #

In this part, we’ll start to function the parent menu settings.

Fanen Indhold #

Menu –

• Menu Breakpoint: Control the responsiveness of the menu by selecting the device type or adding a custom value. This means devices smaller than your given value or selecting type will show a hamburger or mobile menu.
• Scroll Lock For Offcanvas: Disable the scrolling when the menu is open.
• Begrund indholdet: Set the menu item text position based on six different options.
• Juster elementer: Align the entire nav menu to different positions.

Mobilmenuindstillinger –

• Mobilmenu-logo: You can add a different logo for the mobile device using this option.
• Menu link: Include the default home page link or a custom link with the mobile menu logo.
• Hamburger ikon: Choose an icon from the icon library or upload your SVG file to add an icon for the hamburger menu.

Style Navigation Menu #

From here, you’ll get all the settings for customizing the navigation menu. 

Menu Wrapper –

• Menu Background: Add a solid color, gradient, or an image for the menu background.
• Sidebar Background: Choose a background type between solid and gradient.
• Sidebar Menu Content Align: Select the position of the sidebar menu text.
• Polstring: Adjust the inner space around the navigational menu.
• Grænseradius: Define the roundness of the border.

Menu Items –

• Menu Item Spacing: Adjust the horizontal gap between menu items.
• Typografi: Get all the typography customizations for the menu items.
• Baggrundstype: Use a background type between color and gradient.
• Tekst farve: Apply a color to the menu text.
• Grænse: Give a border to the menu item and define its style, color, and thickness.
• Grænseradius: Juster kantens rundhed.
• Polstring: Increase the inner spaces within the menu border area.
• Margin: Add a value manually to add spaces between the menu items.

Hamburger Style –

• Ikonposition: Select the position for the hamburger icon in the page. (Let/ Right/ Icon)
• Ikon størrelse: Use this slider to determine the hamburger icon size.
• Icon Width: Use this slider to adjust the width of the hamburger icon.
• Højde: Define the height of the hamburger icon.
• Grænseradius: Determine the roundness of the hamburger icon border.

The remaining options of this settings area are applicable to the both Normal and Hover options.

• Baggrund: Add a background color to the hamburger menu.
• Ikon farve: Give a color to the hamburger icon.
• Grænse: Get border settings for the hamburger icon.

Close Button

• Ikon størrelse: Use this slider to determine the icon size.
• Margin: Include a value manually to add spaces around the close button.
• Bredde: Use this option to increase the width of the close button.
• Højde: Determine the height of the close button.
• Grænseradius: Use the slider to adjust the roundness of the border.

The following three options can applied to both Normal og Svæv muligheder.

• Baggrund: Add a background type between solid color and gradient.
• Ikon farve: Give color to the close button icon.
• Grænse: Use this settings area to add and style border around the close button.

This was our tutorial for easily adding a nav menu on the block editor of your WordPress website.