# Menu Builder

### Overview

Rokanthemes Menu Builder allows you to create multiple custom menu by drag and drop operation. **Menu Builder** provides an easier and faster way to manage menus. The menus can appear anywhere in the frontstore like header or inside the Page.

### Introduction to Theme Design

Learn how you can use **Theme Design** :

### How to Use

#### 1. Admin

Adminstrators can easily manage menus in Admin panel.

![](https://blueskytechmage.com/kalles/pub/documentation/images/adminHowtoUse.png)

#### 2. Customer

Customers can interact with 3 types of menus in the frontstore.

* **Horizontal Menu**

![](https://1242906408-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBXrqfpQ0UM92vks6wPvh%2Fuploads%2FHjX7qvPfXokylySgAGzb%2Fmenuinpage.png?alt=media\&token=5863bb54-2a70-4322-b23c-00635995674f)

* **Vertical Menu**

![](https://blueskytechmage.com/kalles/pub/documentation/images/menuinpagev.png)

* **Menu in Page**

### How to Configure

Login to your backend page, then go to <mark style="color:red;">`BLUESKYTECHCO > MenuBuilder`</mark>

#### 1. Menu Builder

In this option, you can show, create, edit, delete menus.

**1.1 Create a Menu**

Click to the **Add New Menu** button to direct to create page.

![](https://i.imgur.com/u2UUq39.gif)

* &#x20;**Menu Name:** Setting name of the menu. \*
* &#x20;**Menu Type:** Setting type of the menu. There are two types of menu: Veritcal and Horizontal.\*

After menu created. We need to add Cms Page, Categories or Custom Links to **Menu structure**.

* **Add menu items**

  There are three types of menu items you can add: Cms Page, Categories or Custom Links

  Select items you want to add then click to **Add to Menu** button. All the items you have just selected will be called to layout **Menu Structure** in the right.

![](https://1242906408-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBXrqfpQ0UM92vks6wPvh%2Fuploads%2FxIyTixqtKyS0q9K5ZJD0%2Fo3XfJGE.gif?alt=media\&token=d580e4d4-427f-49b2-8cbd-ab29bf2e1397)

* **Menu structure**

  All the items you just selected will appear here as tags. You can drag and drop those item tags to move the position, determine parent menus, submenus and setting more options for each menus.

![](https://1242906408-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBXrqfpQ0UM92vks6wPvh%2Fuploads%2Fi70o9aNWUDjf4eI2Tgia%2F9NZEjiP.gif?alt=media\&token=4051a172-ce91-45dd-854c-3ccb39ed38b7)

* **Setting menu item**

![](https://1242906408-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBXrqfpQ0UM92vks6wPvh%2Fuploads%2F518c4IK1cnUrKmKpWlJk%2Fsettingitemmeni.png?alt=media\&token=90461464-fac9-4678-a0e3-13770b2ca273)

* In the  **Title** field: You can rename the title of the menu.
* In the  **Add Class** field: You can add your custom class to each menu.
* In the  **Add Label** field: There are three types of label: New, Sale and Hot

![](https://1242906408-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBXrqfpQ0UM92vks6wPvh%2Fuploads%2F3Qi75VCAxHIMnZiURwKb%2Faddlabel.png?alt=media\&token=66516a99-2ce5-446e-a16a-c5652859577d)

![](https://1242906408-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBXrqfpQ0UM92vks6wPvh%2Fuploads%2FaUydlcg4eSZ1yJxAnWaj%2Flabelfrontend.png?alt=media\&token=77905c0f-0647-43ef-ba7c-9dac098d98f6)

* In the **Icon Image** field: You can upload Icon Image to each menu.
* In the **Icon Font Class** field: you can add the font class of the third-party icon provider
* In the **Submenu Type** field: you can select type of submenu dropdown animation when hover.

![](https://blueskytechmage.com/kalles/pub/documentation/images/optiondropdown.png)

* In the seciton **Add Block Content Html**: You can add your custom block content html to each menu

**1.2 Customize Menu in Page**

If you want to add a vertical menu in your content of page as the following picture, **MenuBuilder** module provides you an easy way to do that.

![](https://blueskytechmage.com/kalles/pub/documentation/images/frontMenuinpage.png)

* Login to your backend page, then go to <mark style="color:red;">`CONTENT > Pages`</mark>
* Select the page you want to add menu, then click **Edit**, or click **Add New Page** if you want to create a new page.
* Select <mark style="color:red;">`Content > Edit with Page Builder`</mark>, the Page Builder section will appear.

![](https://1242906408-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBXrqfpQ0UM92vks6wPvh%2Fuploads%2FGmTQFgn8gBCQulbW08JW%2Feditpagebuilder.png?alt=media\&token=dc18ff08-c934-43cc-a9a6-a22a54e85508)

* Drag Row then drag a Text inside it. Click to the Text then choose **Insert Widget**.

![](https://i.imgur.com/ywV1YRq.gif)

* In the **Insert Widget** section, choose **Menus Page Builder** widget then fill all the field as you need.

![](https://1242906408-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBXrqfpQ0UM92vks6wPvh%2Fuploads%2FzKfnZzVV2EpNKDOS82nZ%2FinsertMenuWidget.png?alt=media\&token=cd72d0e9-b9a7-44dd-a0d1-51e005fee4e0)

* After completing these steps, click **Save** to save your configuration. Then go to <mark style="color:red;">`ROKANTHEMES > MenuBuilder > Menus Setting > Config Vertical Menu`</mark> to make sure that you disable the Vertical menu.

![](https://blueskytechmage.com/kalles/pub/documentation/images/disableverticalmenu.png)

* Go to your frontstore and you can see the result.

#### 2. Menu Setting

In this option, you can configure more about the menu.

**2.1 Config Horizontal Menu**

![](https://blueskytechmage.com/kalles/pub/documentation/images/horizontalmenuconfig.png)

* In the **Enabled** field: Select **Yes** if you want to enable Horizontal Menu
* In the **Horizontal Menu** field: Select the menus which created in **Menu Builder**
* In the **Dropdowms Animation** field: Select animation for Dropdown submenu.

![](https://blueskytechmage.com/kalles/pub/documentation/images/dropdownanimation.png)

**2.2 Config Vertical Menu**

![](https://blueskytechmage.com/kalles/pub/documentation/images/verticalmenuconfig.png)

* In the **Enabled** field: Select **Yes** if you want to enable Vertical Menu
* In the **Title** field: Set the title for your Vertical Menu
* In the **Veritcal Menu** field: Select the menus which created in **Menu Builder**
* In the **Limit show items** field: Set number of submenu items will be shown in Veritcal Menu. Excess items will be included in **Hide Menus**
* In the **Limit show items by screen** field: Select **Yes** and set number of submenu items in small desktop if you want customize limit show items by screen

![](https://blueskytechmage.com/kalles/pub/documentation/images/llimititemscreen.png)

* In the **Dropdowms Animation** field: Select animation for Dropdown submenu.

![](https://blueskytechmage.com/kalles/pub/documentation/images/dropdownanimation2.png)

**2.3 Config Label Menu**

You can customize color of menu, submenu items and label as you need.

| ![](https://blueskytechmage.com/kalles/pub/documentation/images/labelconfig.png) | ![](https://blueskytechmage.com/kalles/pub/documentation/images/labelfrontend.png) |
| -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |

Copyright © 2022 [Blueskytechco.com](https://blueskytechco.com/). All Rights Reserved.<br>