Folex Theme Documentation

Customizing Menus in Folex Theme

Folex provides a flexible and structured way to manage navigation and footer menus using the menu.en.json file located in the src/config directory.

This file allows you to control:

• Header (main) navigation
• Mega menus
• Dropdowns
• Footer menus (primary, secondary, tertiary)

---

Header Navigation (Main Menu)

The headerPrimary array holds the items for your main navigation bar.

Example

{
  "name": "Pages",
  "enable": true,
  "hasChildren": true,
  "children": [
    {
      "name": "Home",
      "enable": true,
      "children": [
        {
          "name": "Digital Agency",
          "url": "/"
        }
      ]
    }
  ]
}

Key Properties

• name: Menu label displayed in the header.
• url: Where the menu item links to.
• enable: Set to false to hide this item.
• hasChildren: If the menu item has a dropdown or submenu.
• children: An array of submenu items.
• badge: Optional visual badge (e.g., “NEW”, “FREE”) with label, color, and type.

Badge Settings

You can highlight menu items using badges — small visual markers such as “NEW”, “FREE”, or colored dots.

Example:

{
  "name": "Pricing",
  "enable": true,
  "url": "/pricing/",
  "badge": {
    "enable": true,
    "label": "NEW",
    "color": "primary",
    "type": "text"
  }
}

• enable: Set to true to show the badge.
• label: Text displayed inside the badge (e.g., "NEW").
• color: Visual style of the badge. Supported values: "primary", "accent", "success", "danger", "warning", "info".
• type: Choose "text" for a label or "dot" for a simple indicator.

---

Mega Menu Setup

To enable a mega menu, use the hasMegaMenu property and optionally include a testimonial or service list.

Example

{
  "name": "Megamenu",
  "enable": true,
  "hasMegaMenu": true,
  "testimonial": {
    "enable": true,
    "name": "TESTIMONIAL",
    "image": "/images/customers/image.png",
    "content": "Folex strategic planning helped us..."
  },
  "services": {
    "enable": true,
    "name": "SERVICES"
  }
}

---

Footer Menus

Folex includes 3 sections of footer menus:

1.footerPrimary

Main links in the footer.

2.footerSecondary

For policies, terms, etc.

3.footerTertiary

Additional bottom links.

Each footer array includes objects like:

{
  "enable": true,
  "name": "Privacy Policy",
  "url": "/privacy-policy/"
}

---

How to Edit Menus

1. Open the menu.en.json file in src/config.
2. Locate the section you want to edit: headerPrimary, footerPrimary, etc.
3. Update the name, url, or enable fields.
4. Save the file — your changes will appear immediately on your site.

---

Disabling a Menu Item

To hide a menu item without deleting it:

{
  "enable": false,
  "name": "Careers",
  "url": "/careers/"
}

Update Footer Menu Titles

The footer on our themes typically includes titles such as Links, Contact. You can easily customize these titles by editing your i18n language files.

Steps to Update

1. Open the file: src/i18n/en.json

2. Find the footer section, which looks like this:

   "footer": {
       "menuTitleLinks": "Links",
       "contact": "Contact",
       "copyright": "Copyright © {{ year }} Folex / Theme By [Getastrothemes](https://getastrothemes.com/)",
     }

3. Modify the text values to suit your brand. For example:

   "footer": {
     "menuTitleLinks": "Quick Links",
     "contact": "Contact Us",
     "copyright": "© {{ year }} YourBrandName. All rights reserved."
   }

4. If your site uses multiple languages, remember to update the corresponding footer entries in other language files (e.g., fr.json, es.json) to keep the footer consistent for all users.