# Customizing Menus

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

```json
{
  "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

```json
{
  "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

```json
{
  "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

```json
{
  "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

```json
{
  "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

```json
{
  "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 `footerBlock` section:

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

3. Update the text to match your brand
4. Repeat for other language files if applicable