# Customizing Menus

## **Customizing Menus**

The navigation menus throughout your site are managed using the `menu.en.json` file located in the `src/config` folder. By modifying this file, you can customize the main navigation, dropdowns, mega menus, and footer links. Here's how you can structure and customize the menus.

### **Main Menu**

The `main` array defines the primary navigation menu items. Looka's main menu ships with a mega menu, a multi-level **Pages** dropdown, a **Components** link, and a **Contact** link. Here is a trimmed version of the real structure:

```json
{
  "main": [
    {
      "enable": true,
      "name": "Mega Menu",
      "hasMegaMenu": true,
      "testimonial": {
        "enable": true,
        "image": "/images/customer-image.png",
        "content": "Looka strategic planning helped us streamline operations and unlock new market opportunities. We've seen a remarkable 25% increase in revenue within the last year."
      },
      "services": {
        "enable": true,
        "name": "SERVICES"
      },
      "menus": [
        {
          "name": "REGULAR PAGES",
          "enable": true,
          "children": [
            {
              "name": "",
              "enable": true,
              "children": [
                {
                  "enable": true,
                  "name": "Services",
                  "url": "/services/"
                },
                {
                  "enable": true,
                  "name": "Case Studies Single",
                  "url": "/case-studies/case-studies-01/"
                },
                {
                  "enable": true,
                  "name": "Career",
                  "url": "/career/"
                }
              ]
            }
          ]
        },
        {
          "name": "BLOG",
          "enable": true,
          "children": []
        },
        {
          "name": "PORTFOLIO LAYOUTS",
          "enable": true,
          "children": []
        }
      ]
    },
    {
      "name": "Pages",
      "enable": true,
      "hasChildren": true,
      "children": [
        {
          "enable": true,
          "name": "Home",
          "url": "/"
        },
        {
          "enable": true,
          "name": "Services",
          "hasChildren": true,
          "children": [
            {
              "enable": true,
              "name": "Services",
              "url": "/services/"
            },
            {
              "enable": true,
              "name": "Services Single",
              "url": "/services/service-01/"
            }
          ]
        }
      ]
    },
    {
      "enable": true,
      "name": "Components",
      "url": "/elements/",
      "badge": {
        "enable": true,
        "label": "NEW",
        "color": "primary",
        "type": "text"
      }
    },
    {
      "enable": true,
      "name": "Contact",
      "url": "/contact/",
      "badge": {
        "enable": true,
        "label": "NEW",
        "color": "danger",
        "type": "dot"
      }
    }
  ]
}
```

> The mega menu is attached to the item literally named `"Mega Menu"` via `hasMegaMenu: true`. The `"Pages"` item is a regular multi-level dropdown (`hasChildren: true`). Open `src/config/menu.en.json` to see the full set of `BLOG`, `PORTFOLIO LAYOUTS`, and nested children.

### **Footer Menus**

The footer menus are defined under `footerMenu`, `footerMenuQuickLink`, `footerMenuResources`, and `footerMenuLegal` arrays. Each array represents a section in the footer.

**Example of Footer Menu:**

```json
{
  "footerMenu": [
    {
      "enable": true,
      "name": "Terms & Conditions",
      "url": "/terms-conditions/"
    },
    {
      "enable": true,
      "name": "Privacy & Policy",
      "url": "/privacy-policy/"
    }
  ]
}
```

### **Configuration Options**

- `name`: The display name of the menu item.
- `url`: The URL the menu item links to.
- `enable`: Set to `false` to hide the menu item.
- `hasChildren`: Indicates if the menu has sub-items (For dropdown menu only).
- `hasMegaMenu`: Enables mega menu for the item.
- `badge` Displays a badge next to the menu item
  - `label` The text inside the badge
  - `color` The color of the badge - `primary`, `info`, `success`, `danger`
  - `type` The type of badge - `text`, `dot`

### **Services List in Mega Menu**

In `Looka` theme, you will see the services list is displayed in the mega menu. You can modify the `services` array in the `menu.en.json` file.

```json
{
  "services": {
    "name": "SERVICES",
    "enable": true
  }
}
```

> Services List Comes From `src/content/services/` folder

### **Testimonial in Mega Menu**

In `Looka` theme, you will see the testimonial is displayed in the mega menu. You can modify the `testimonial` content in the `menu.en.json` file.

```json
"testimonial": {
  "enable": true,
  "image": "/images/customer-image.png",
  "content": "Looka strategic planning helped us streamline operations and unlock new market opportunities. We've seen a remarkable 25% increase in revenue within the last year."
},
```

### **Adding New Menu Items**

To add a new menu item:

1. Locate the appropriate section in the `menu.en.json` file (e.g., `main` for primary navigation).
2. Add a new object with the required fields (`name`, `url`, etc.).
3. Save the file, and the new item will appear in the corresponding menu on your site.

### **Disabling Menu Items**

To disable any menu item, set the `enable` property to `false`.

```json
{
  "enable": false,
  "name": "Old Page",
  "url": "/old-page/"
}
```

This will hide "Old Page" from the navigation.

---

By following the above structure, you can easily manage and customize your site's menus through the `menu.en.json` file.