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.

{
  "main": [
    {
      "name": "Pages",
      "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": {
        "name": "SERVICES",
        "enable": true
      },
      "menus": [
        {
          "name": "REGULAR PAGES",
          "enable": true,
          "children": [
            {
              "name": "",
              "enable": true,
              "children": [
                {
                  "enable": true,
                  "name": "Services",
                  "url": "/services/"
                },
                {
                  "enable": true,
                  "name": "Services Single",
                  "url": "/services/service-01/"
                },
                {
                  "enable": true,
                  "name": "Case Studies",
                  "url": "/case-studies/"
                },
                {
                  "enable": true,
                  "name": "Case Studies Single",
                  "url": "/case-studies/case-studies-01/"
                },
                {
                  "enable": true,
                  "name": "Career",
                  "url": "/career/"
                },
                {
                  "enable": true,
                  "name": "Career Single",
                  "url": "/career/job-01/"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "name": "Dropdown",
      "hasChildren": true,
      "children": [
        {
          "enable": true,
          "name": "Example 01"
        },
        {
          "enable": true,
          "name": "Example 02",
          "hasChildren": true,
          "children": [
            {
              "enable": true,
              "name": "Example 03"
            }
          ]
        }
      ]
    },
    {
      "enable": true,
      "name": "Pricing",
      "url": "/pricing/",
      "badge": {
        "enable": true,
        "label": "NEW",
        "color": "primary",
        "type": "text"
      }
    },
    {
      "enable": true,
      "name": "Contact",
      "url": "/contact/",
      "badge": {
        "enable": true,
        "label": "NEW",
        "color": "danger",
        "type": "dot"
      }
    }
  ]
}

Footer Menus

The footer menus are defined under footer_menu, footer_menu_quick_link, footer_menu_resources, and footer_menu_legal arrays. Each array represents a section in the footer.

Example of Footer Menu:

{
  "footer_menu": [
    {
      "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.
• disable: Set to true 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, secondary, success, danger, warning, info
  • 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.

{
  "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.

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

{
  "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.