Looka Theme Documentation

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:

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

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

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