Stella Theme Documentation

Customizing Menus in Stella Theme

Stella 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 (and nested dropdowns)
• Footer menus (footerMenu, footerMenuOne, footerMenuTwo)

Note

If multilingual is enabled, edit the matching menu.fr.json for the French menu too. The keys are identical in both files.

---

Header Navigation (Main Menu)

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

Example

menu.en.json

{
  "name": "Pages",
  "enable": true,
  "weight": 0,
  "hasChildren": true,
  "children": [
    {
      "enable": true,
      "name": "Company",
      "url": "/company/",
      "weight": 0
    },
    {
      "enable": true,
      "name": "Pricing",
      "url": "/pricing/",
      "weight": 0
    }
  ]
}

Key Properties

• name: Menu label displayed in the header.
• url: Where the menu item links to.
• enable: Set to false to hide this item.
• weight: Controls ordering (lower weights appear first).
• hasChildren: Set to true when the item opens a dropdown or submenu.
• hasMegaMenu: Set to true to render a mega menu (see below).
• children: An array of submenu items. Submenus can themselves set hasChildren for nested dropdowns.
• badge: Optional visual badge (e.g., “NEW”) with enable, label, color, and type.

Badge Settings

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

Example:

{
  "enable": true,
  "name": "Components",
  "url": "/components/",
  "weight": 0,
  "badge": {
    "enable": true,
    "label": "NEW",
    "color": "accent",
    "type": "text"
  }
}

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

---

Mega Menu Setup

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

Example

menu.en.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",
      "hoverEffect_comment": "text-flip, creative-fill, magnetic, magnetic-text-flip",
      "label": "Get A Free Trial",
      "url": "/contact/",
      "rel": "",
      "target": ""
    }
  },
  "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/"
        },
        {
          "enable": true,
          "icon": "Database",
          "name": "Satisfaction Metrics",
          "description": "Keep track of your users satisfaction.",
          "url": "/features/"
        },
        {
          "enable": true,
          "icon": "Clock",
          "name": "Smart Automation Hub",
          "description": "Get everything done with AI tools.",
          "url": "/features/"
        }
      ]
    }
  ]
},

---

Footer Menus

Stella defines several footer menu arrays in menu.en.json:

1.footerMenuOne

The first footer link column (Stella ships this as the “Company” column: About Us, Careers, Blog, etc.).

2.footerMenuTwo

The second footer link column (Stella ships this as the “Resources” column: Help Center, API Status, Community, etc.).

3.footerMenu

The legal/bottom links shown in the footer bar (Terms & Conditions, Privacy & Policy).

Note

The column titles (“Company”, “Resources”, “Contact”) are not stored in menu.en.json. They live under the footer key in src/i18n/en.json — see Update Footer Menu Titles below.

Each footer array includes objects like:

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

---

How to Edit Menus

1. Open the menu.en.json file in src/config.
2. Locate the section you want to edit: main, footerMenu, footerMenuOne, or footerMenuTwo.
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": "/career/"
}

Update Footer Menu Titles

The footer on our themes typically includes titles such as Company, Resources. 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": {
      "colTitleOne": "Company",
      "colTitleTwo": "Resources",
      "colTitleThree": "Contact",
      "description": "We provide seamless solutions to Small and Medium Businesses. Whatever work you do, we can help.",
      "copyright": "Copyright © 2024 Stella. All Rights Reserved."
    }

3. Modify the text values to suit your brand.

4. If your site uses multiple languages, remember to update the corresponding footer entries in the other language file (src/i18n/fr.json) to keep the footer consistent for all users.