# 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.

```json
{
  "main": [
    {
      "enable": true,
      "name": "Home",
      "weight": 1,
      "url": ""
    },
    {
      "name": "Pages",
      "enable": true,
      "weight": 3,
      "hasChildren": true,
      "children": [
        {
          "enable": true,
          "name": "Nested Menu",
          "hasChildren": true,
          "weight": 2,
          "children": [
            {
              "enable": true,
              "name": "Menu 01",
              "weight": 1
            },
            {
              "enable": true,
              "name": "Nested Menu",
              "hasChildren": true,
              "weight": 4,
              "children": [
                {
                  "enable": true,
                  "name": "Nested Menu Item",
                  "weight": 1
                }
              ]
            },
            {
              "enable": true,
              "name": "Menu 02",
              "weight": 2
            },
            {
              "enable": true,
              "name": "Menu 03",
              "weight": 3
            }
          ]
        },
        {
          "enable": true,
          "name": "Features",
          "url": "/features/",
          "weight": 1
        },
        {
          "enable": true,
          "name": "Pricing",
          "url": "/pricing/",
          "weight": 2
        },
        {
          "enable": true,
          "name": "Faq",
          "url": "/faq/",
          "weight": 3
        },
        {
          "enable": true,
          "name": "Changelog",
          "url": "/changelog/",
          "weight": 4
        },
        {
          "enable": true,
          "name": "Integration",
          "url": "/integration/",
          "weight": 5
        },
        {
          "enable": true,
          "name": "Integration Single",
          "url": "/integration/discord/",
          "weight": 6
        },
        {
          "enable": true,
          "name": "Blog",
          "url": "/blog/",
          "weight": 7
        },
        {
          "enable": true,
          "name": "Blog Single",
          "url": "/blog/post-1/",
          "weight": 8
        }
      ]
    },
    {
      "enable": true,
      "name": "Features",
      "weight": 2,
      "hasMegaMenu": true,
      "cta": {
        "enable": true,
        "image": "/images/menu-cta.png",
        "title": "Gain Actionable Insights",
        "description": "Upstart is self-hosted, meaning your website data stays on your server.",
        "ctaBtn": {
          "enable": true,
          "label": "Get Free Trial",
          "url": "/contact/",
          "rel": "",
          "target": ""
        }
      },
      "menus": [
        {
          "enable": true,
          "children": [
            {
              "enable": true,
              "icon": "/images/icons/svg/focus.svg",
              "name": "Focus on What Matters",
              "description": "Upstart tracks the essential website metrics you care about.",
              "url": "/features/"
            },
            {
              "enable": true,
              "icon": "/images/icons/svg/privacy.svg",
              "name": "Put Privacy First",
              "description": "Upstart doesn't track users across websites or collect data.",
              "url": "/features/"
            },
            {
              "enable": true,
              "icon": "/images/icons/svg/data.svg",
              "name": "Own Your Data",
              "description": "Upstart is self-hosted, meaning your website data stays on your server.",
              "url": "/features/"
            },
            {
              "enable": true,
              "icon": "/images/icons/svg/time.svg",
              "name": "Instant Data Available",
              "description": "Upstart collected data is immediately available on your dashboard",
              "url": "/features/"
            }
          ]
        }
      ]
    },
    {
      "enable": true,
      "name": "Elements",
      "url": "/elements/",
      "weight": 4,
      "badge": {
        "enable": true,
        "label": "NEW",
        "color": "primary",
        "_color_comment": "color expected value - primary, info, success, danger",
        "type": "text",
        "_type_comment": "type expected value - text, dot"
      }
    },
    {
      "enable": true,
      "name": "Contact",
      "url": "/contact/",
      "weight": 5,
      "badge": {
        "enable": true,
        "label": "NEW",
        "color": "danger",
        "_color_comment": "color expected value - primary, info, success, danger",
        "type": "dot",
        "_type_comment": "type expected value - text, dot"
      }
    }
  ]
}
```

### **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.
- `weight`: The position of the menu item in the menu.
- `url`: The URL the menu item links to.
- `enable`: Indicates if the menu item is enabled.
- `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`

### **Features Mega Menu**

In `Upstart` theme, you will see the feature list is displayed in the mega menu. You can modify the `Features` object in `main` array in the `menu.en.json` file.

```json
{
  "enable": true,
  "name": "Features",
  "weight": 2,
  "hasMegaMenu": true,
  "cta": {
    "enable": true,
    "image": "/images/menu-cta.png",
    "title": "Gain Actionable Insights",
    "description": "Upstart is self-hosted, meaning your website data stays on your server.",
    "ctaBtn": {
      "enable": true,
      "label": "Get Free Trial",
      "url": "/contact/",
      "rel": "",
      "target": ""
    }
  },
  "menus": [
    {
      "enable": true,
      "children": [
        {
          "enable": true,
          "icon": "/images/icons/svg/focus.svg",
          "name": "Focus on What Matters",
          "description": "Upstart tracks the essential website metrics you care about.",
          "url": "/features/"
        },
        {
          "enable": true,
          "icon": "/images/icons/svg/privacy.svg",
          "name": "Put Privacy First",
          "description": "Upstart doesn't track users across websites or collect data.",
          "url": "/features/"
        },
        {
          "enable": true,
          "icon": "/images/icons/svg/data.svg",
          "name": "Own Your Data",
          "description": "Upstart is self-hosted, meaning your website data stays on your server.",
          "url": "/features/"
        },
        {
          "enable": true,
          "icon": "/images/icons/svg/time.svg",
          "name": "Instant Data Available",
          "description": "Upstart collected data is immediately available on your dashboard",
          "url": "/features/"
        }
      ]
    }
  ]
},
```

### **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.