Lumio Theme Documentation

Customizing Menus

Lumio manages navigation through src/config/menu.en.json and src/config/menu.fr.json. These files control the main navigation, mega menu groups, nested dropdowns, footer menus, and the large CTA block displayed inside the mega menu.

Main Menu

The main array defines the primary header navigation items.

{
  "main": [
    {
      "enable": true,
      "name": "Home",
      "weight": 0,
      "url": "/"
    },
    {
      "enable": true,
      "name": "Mega Menu",
      "weight": 1,
      "hasMegaMenu": true,
      "menus": [
        {
          "enable": true,
          "name": "Core Services",
          "description": "Delivery work for companies shipping websites, products, and conversion-focused redesigns.",
          "weight": 0,
          "children": [
            {
              "enable": true,
              "name": "Web Platforms",
              "description": "Marketing sites, corporate websites, and CMS builds that stay fast under load.",
              "icon": "Monitor",
              "url": "/services/",
              "weight": 0
            }
          ]
        }
      ],
      "cta": {
        "enable": true,
        "eyebrow": "Delivery Partner",
        "image": "/images/case-studies/case-study-1.jpg",
        "title": "Need a team that can design, build, and launch without extra layers?",
        "description": "Use the menu to explore service lines, then move to a real scope conversation when the fit is clear."
      }
    }
  ]
}

Footer Menus

Lumio’s footer menus are defined under the footer array:

{
  "footer": [
    {
      "label": "Links",
      "list": [
        {
          "enable": true,
          "name": "Home",
          "url": "/",
          "weight": 0
        }
      ]
    },
    {
      "label": "Services",
      "list": [
        {
          "enable": true,
          "name": "App Development",
          "url": "/services/",
          "weight": 0
        }
      ]
    }
  ]
}

Configuration Options

• name: Visible menu label.
• url: Link target.
• enable: Set to false to hide the menu item.
• weight: Used for sorting.
• hasChildren: Enables nested dropdown items.
• hasMegaMenu: Enables Lumio’s grouped mega menu.
• description: Extra supporting text used in mega menu groups/items.
• icon: Lucide-style icon name used in mega menu children.
• badge: Optional badge next to a menu item.
• cta: Right-side promo block inside the mega menu.

Mega Menu Groups

Lumio’s mega menu does not pull a dedicated services list automatically. Instead, each column is defined explicitly through the menus array, and each item can include its own label, description, icon, badge, and URL.

That makes the menu flexible enough to point to services, pricing, about, contact, or case-study pages without changing component code.

Mega Menu CTA Block

The big promo card on the right side of the mega menu comes from the cta object:

"cta": {
  "enable": true,
  "eyebrow": "Delivery Partner",
  "image": "/images/case-studies/case-study-1.jpg",
  "title": "Need a team that can design, build, and launch without extra layers?",
  "description": "Use the menu to explore service lines, then move to a real scope conversation when the fit is clear.",
  "items": [
    "Strategy, design, and engineering in one workflow"
  ]
}

Adding New Menu Items

1. Open src/config/menu.en.json or src/config/menu.fr.json.
2. Find the section you want to extend: main or footer.
3. Add a new object with enable, name, url, and any optional fields such as description, icon, or badge.

Disabling Menu Items

To disable any item, set enable to false:

{
  "enable": false,
  "name": "Old Page",
  "url": "/old-page/"
}

This removes it from the rendered navigation without deleting the config.