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 from your WordPress dashboard. Then, drag & drop the Nav Menu to the block editor screen.

Step 1: Add GutenKit Nav Menu Block #

우리 여정의 첫 번째 단계는 GutenKit 플러그인을 설치하는 것입니다. 그런 다음 다음 작업을 수행합니다.

• 새로운 페이지를 열거나 기존 페이지로 이동하세요.
• 블록 편집기를 활성화하고 "+편집기 화면 상단에 있는 ”아이콘을 클릭하세요.
• 클릭하면 블록 라이브러리가 열립니다.
• 다음을 검색하세요. GutenKit Nav Menu.
• 블록이 나타나면 편집기 화면에서 클릭하거나 끌어서 놓습니다.

Step 2: Add Navigation Menu Item #

After you add the Nav menu block on the editor screen, it’ll automatically show up with all the published pages as navigation menu items. And, there is a “+” icon to add a new menu item. 

Now, if we focus on this block’s settings, it has a few more functions than other GutenKit blocks. Click on a navigation item on the editor screen and its settings control will appear in the right sidebar. 

Here you will see:

콘텐츠: #

• Menu Type: Choose a menu type between custom and dynamic.
• Select Dynamic Link: Choose the page you want to link with this menu item from the dropdown.
• Add Custom Label: Toggle this button if you want to add a different label for the menu item. Enabling it will reveal a Custom Label field to enter your custom text.
• Add SubMenu: Click this toggle button to enable sub-menu. A “+” icon will appear below the menu item on the editor screen. You will also see a new option named “하위 메뉴 표시기” 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.
• 국경: Give a border around the icon and select its color, style, and thickness.
• 심: Add inner space within the icon border.
• 테두리 반경: Set the roundness of the icon border.

Add Sub-menu Item: #

Similar to the menu item, clicking the sub-menu item will open the settings in the right sidebar.

• Menu Type: Choose a menu type between custom and dynamic. 
• Menu Label: Enter the name of your menu.
• 메뉴 링크: Insert the link you want to drive visitors 
• Add Sub Menu: Enable this option to add another menu item under the submenu. This action will also open the “Submenu Indicator” icon like before.

Next, we’ll move on to the parent settings of a menu or submenu item. To do this, click the “Go to Parent” option from the menu or submenu settings. But, menus and submenus have different functions.

While clicking on the “Go to Parent” option from a 하위 메뉴 item, you will see different customizing options for a submenu in the 설정 & 스타일 tabs.

아래의 설정 option:

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

이제 스타일 탭:

아래의 Submenu Wrapper:

• 조정: Define the submenu text position within the submenu wrapper.

아래의 Submenu Item:

• 항목 간격: Use this slider to define the gap between submenu items.
• 타이포그래피: Use these settings to change the font family, weight, transform, style, decoration, spacing, etc.

You can apply the following settings individually to the 정상, 호버, 그리고 활동적인 modes for the submenu.

• 배경: Give a between a solid color or gradient background type.
• 텍스트 색상: Select a text color using the color picker.
• 국경: Choose a color for the border.
• 심: Enter a value manually to increase spaces inside the border.
• 테두리 반경: Use this option to define the roundness of the border.

Selecting the “Go to Parent” option from a 메뉴 item will take you to the global block settings (Content/ Style/ Advanced). 

Step 3: Configure Menu Settings #

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

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.
• 콘텐츠 정당화: Set the menu item text position based on six different options.
• 항목 정렬: Align the entire nav menu to different positions.

Step 4: Configure Mobile Menu Settings #

Now, we’ll configure the menu for mobile devices.

• 모바일 메뉴 로고: You can add a different logo for the mobile device using this option.
• 메뉴 링크: Include the default home page link or a custom link with the mobile menu logo.
• 햄버거 아이콘: Choose an icon from the icon library or upload your SVG file to add an icon for the hamburger menu.

Step 5: Style Navigation Menu #

이제, Style Tab. 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.
• 심: Adjust the inner space around the navigational menu.
• 테두리 반경: 테두리의 둥글기를 정의합니다.

Menu Items: #

• Menu Item Spacing: Adjust the horizontal gap between menu items.
• 타이포그래피: Get all the typography customizations for the menu items.
• 배경 유형: Use a background type between color and gradient.
• 텍스트 색상: Apply a color to the menu text.
• 국경: Give a border to the menu item and define its style, color, and thickness.
• 테두리 반경: 테두리의 둥근 정도를 조정합니다.
• 심: Increase the inner spaces within the menu border area.
• 여유: Add a value manually to add spaces between the menu items.

Step 6: Style the Mobile Menu #

The following settings are applied to customize the menu look and feel for mobile devices.

• 아이콘 위치: Select the position for the hamburger icon in the page. (Let/ Right/ Icon)
• 아이콘 크기: Use this slider to determine the hamburger icon size.
• Icon Width: Use this slider to adjust the width of the hamburger icon.
• 키: Define the height of the hamburger icon.
• 테두리 반경: Determine the roundness of the hamburger icon border.

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

• 배경: Add a background color to the hamburger menu.
• 아이콘 색상: Give a color to the hamburger icon.
• 국경: Get border settings for the hamburger icon.

Close Button,

• 아이콘 크기: Use this slider to determine the icon size.
• 여유: Include a value manually to add spaces around the close button.
• 너비: Use this option to increase the width of the close button.
• 키: Determine the height of the close button.
• 테두리 반경: Use the slider to adjust the roundness of the border.

The following three options can applied to both 정상 그리고 호버 옵션.

• 배경: 단색과 그라데이션 사이에 배경 유형을 추가합니다.
• 아이콘 색상: Give color to the close button icon.
• 국경: 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.