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

Customizing Menus

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

Header Menu

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

{
  "header": [
    {
      "name": "Home",
      "enable": true
    },
    {
      "name": "Pages",
      "enable": true,
      "hasChildren": true,
      "children": [
        {
          "enable": true,
          "name": "Services",
          "hasChildren": true,
          "children": [
            { "enable": true, "name": "List", "url": "/services/" },
            { "enable": true, "name": "Single", "url": "/services/service-custom-slug/" }
          ]
        },
        { "enable": true, "name": "About", "url": "/about/" }
      ]
    },
    {
      "enable": true,
      "name": "Components",
      "url": "/components/",
      "badge": {
        "enable": true,
        "label": "NEW",
        "color": "accent",
        "type": "text"
      }
    }
  ]
}

Techlo’s footer columns are defined under the footer array. Each object is one column:

{
  "footer": [
    {
      "label": "Quick Links",
      "list": [
        { "enable": true, "name": "About Us", "url": "/about/" },
        { "enable": true, "name": "Contact Us", "url": "/contact/" }
      ]
    },
    {
      "label": "Services",
      "list": [
        { "enable": true, "name": "Web Development", "url": "/services/service-02/" }
      ]
    }
  ]
}

Configuration Options

  • name: Visible menu label.
  • url: Link target.
  • enable: Set to false to hide the menu item.
  • hasChildren: Enables a nested dropdown (children array).
  • children: Nested items; a child can itself have hasChildren for a second level.
  • badge: Optional badge next to a header item. Supports label, color (primary, accent, info, success, danger), and type (text).
  • label: Column heading (footer columns only).
  • list: Links inside a footer column.

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: header or footer.
  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.