Skip to content
Type something to search...
to navigateto selectESC to close
Ultimate Astro Theme GuidesDocs
Techbyte Theme Documentation

Customizing Menus

Techbyte manages navigation through src/config/menu.en.json and src/config/menu.fr.json. These files control the main header navigation, the industries mega menu, nested dropdowns, badges, and the footer link groups.

Header Menu

The headerPrimary array defines the primary navigation. Items can be simple links, dropdowns (via hasChildren), or a mega menu (via hasMegaMenu), and dropdowns can be nested one more level deep.

{
  "headerPrimary": [
    {
      "enable": true,
      "name": "Home",
      "weight": 0,
      "url": "/"
    },
    {
      "name": "Pages",
      "enable": true,
      "weight": 2,
      "hasChildren": true,
      "children": [
        {
          "enable": true,
          "name": "Home",
          "hasChildren": true,
          "children": [
            { "enable": true, "name": "Home 01", "url": "/" },
            { "enable": true, "name": "Home 02", "url": "/home-two/" }
          ]
        },
        { "enable": true, "name": "About Us", "url": "/about/" }
      ]
    },
    {
      "enable": true,
      "name": "Components",
      "url": "/components/",
      "badge": {
        "enable": true,
        "label": "New",
        "color": "accent",
        "type": "text"
      }
    }
  ]
}

The Industries Mega Menu

The “Case Studies” item ships as a full mega menu (hasMegaMenu: true with megaMenuLayout: "industries"). Each child is an industry card with its own icon, description, and accent color, and the right side carries a CTA block with stats:

{
  "enable": true,
  "name": "Case Studies",
  "hasMegaMenu": true,
  "megaMenuLayout": "industries",
  "menus": [
    {
      "enable": true,
      "name": "Industries",
      "children": [
        {
          "enable": true,
          "name": "Healthcare",
          "description": "Integrate your systems to get cleaner data, faster workflows, and better patient outcomes.",
          "icon": "Stethoscope",
          "accent": "emerald",
          "url": "/projects/",
          "badge": { "enable": true, "label": "Popular", "color": "accent", "type": "text" }
        }
      ]
    }
  ],
  "cta": {
    "enable": true,
    "eyebrow": "Case Studies",
    "title": "Proven Results Across Every Industry",
    "description": "Discover how we've helped organizations like yours overcome challenges and achieve measurable success.",
    "stats": [
      { "enable": true, "value": "120+", "label": "engagements" },
      { "enable": true, "value": "6", "label": "industries" }
    ],
    "link": { "enable": true, "label": "Talk to our team", "url": "/contact/" },
    "button": { "enable": true, "label": "Explore Case Studies", "url": "/projects/", "variant": "fill" }
  }
}
  • icon takes a Lucide icon name.
  • accent tints the card icon (amber, blue, violet, rose, emerald, sky).
  • The cta object drives the promo panel: eyebrow, title, description, stats, a text link, and a button.

Techbyte’s footer links are split across three groups — footerPrimary (Footer 1 link column), footerSecondary (Footer 2 link row), and footerPrivacy (policy links in the copyright bar). See Customizing Footer for details.

Configuration Options

  • name: Visible menu label.
  • url: Link target.
  • enable: Set to false to hide the menu item.
  • weight: Used for sorting.
  • hasChildren: Enables a nested dropdown (children array).
  • hasMegaMenu + megaMenuLayout: Enables the grouped mega menu.
  • description, icon, accent: Extra fields for mega menu cards.
  • badge: Optional badge next to an item. Supports label, color (primary, accent, info, success, danger), and type (text).
  • cta: Right-side promo block inside the mega menu.

Adding New Menu Items

  1. Open src/config/menu.en.json or src/config/menu.fr.json.
  2. Find the group you want to extend: headerPrimary, footerPrimary, footerSecondary, or footerPrivacy.
  3. Add a new object with enable, name, url, and any optional fields such as hasChildren, children, 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.