Finzo Theme Documentation

Customizing Menus in Finzo Theme

Finzo uses a single, structured configuration file to manage header navigation, mega menus, nested dropdowns, and footer menus.

The menu configuration file is located at:

src/config/menu.en.json

This file allows you to control:

• Main header navigation
• Mega menus with CTA blocks
• Multi-level dropdown menus
• Footer menu columns

---

Header Navigation (Main Menu)

Header navigation items are defined inside the main array. Each object represents a top-level menu item.

Basic Menu Item Example

{
  "enable": true,
  "name": "Home",
  "weight": 0,
  "url": ""
}

Key Properties

• name: Text displayed in the header
• url: Link destination (empty string points to homepage)
• enable: Toggle visibility
• weight: Sorting order (lower values appear first)
• hasChildren: Enables dropdown menus
• hasMegaMenu: Enables mega menu layout
• children: Nested menu items
• badge: Optional visual indicator

---

Mega Menu Configuration

To enable a mega menu, set hasMegaMenu: true and define menu blocks using menus and an optional CTA.

Mega Menu Example

{
  "enable": true,
  "name": "Features",
  "weight": 0,
  "hasMegaMenu": true,
  "cta": {
    "enable": true,
    "image": "/images/menu-cta.png",
    "title": "Gain Actionable Insights",
    "description": "Launch faster, grow smarter, and scale effortlessly.",
    "button": {
      "enable": true,
      "hoverEffect": "text-flip",
      "label": "Get A Free Trial",
      "url": "/contact/"
    }
  },
  "menus": [
    {
      "enable": true,
      "children": [
        {
          "enable": true,
          "icon": "Focus",
          "name": "Real-Time Reporting",
          "description": "Monitor live data streams.",
          "url": "/features/"
        },
        {
          "enable": true,
          "icon": "Shield",
          "name": "Seamless Collaboration",
          "description": "Keep your team aligned.",
          "url": "/features/"
        }
      ]
    }
  ]
}

Mega Menu Structure

• menus: Groups of menu items
• icon: Lucide icon name https://lucide.dev/icons/
• description: Supporting text
• cta: Promotional section displayed in the mega menu

---

Dropdown & Nested Menus

Finzo supports unlimited nesting using hasChildren and children.

Nested Menu Example

{
  "name": "Pages",
  "enable": true,
  "hasChildren": true,
  "children": [
    {
      "enable": true,
      "name": "About",
      "url": "/about/"
    },
    {
      "enable": true,
      "name": "Nested Menu",
      "hasChildren": true,
      "children": [
        {
          "enable": true,
          "name": "Menu 01"
        },
        {
          "enable": true,
          "name": "Nested Menu",
          "hasChildren": true,
          "children": [
            {
              "enable": true,
              "name": "Nested Menu Item"
            }
          ]
        }
      ]
    }
  ]
}

---

Menu Badges

Badges highlight important links such as updates or new sections.

Badge Example

{
  "name": "Changelog",
  "url": "/changelog/",
  "badge": {
    "enable": true,
    "label": "NEW",
    "color": "accent",
    "type": "text"
  }
}

Badge Options

• label: Badge text
• color: accent, info, success, danger, dark
• type: text or dot

---

Footer Menus

Footer navigation is defined using the footer array. Each object represents a footer column.

Footer Column Example

{
  "label": "Services",
  "list": [
    {
      "enable": true,
      "name": "Cards",
      "url": "/"
    },
    {
      "enable": true,
      "name": "Accounts",
      "url": "/"
    }
  ]
}

Footer Properties

• label: Footer column title
• list: Array of links
• enable: Toggle visibility per link

Finzo automatically renders all footer columns defined here.

---

How to Edit Menus

1. Open src/config/menu.en.json
2. Edit the main or footer arrays
3. Update name, url, enable, weight, or badge
4. Save the file — changes apply instantly

---

Disable a Menu Item

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

---

Update Footer Text Content

Footer descriptive text is managed via i18n files.

Steps

1. Open: src/i18n/en.json

2. Locate the footer section:

   "footer": {
     "description": "We provide seamless solutions to Small and Medium Businesses.",
     "copyright": "Copyright © 2024 Finzo. All Rights Reserved."
   }

3. Update the text to match your brand

4. Repeat for other language files if applicable