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
• 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

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 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 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 other language files (e.g., fr.json, es.json) to keep the footer consistent for all users.