Menus

Kivo Theme Documentation

Files: src/config/menu.en.json, src/config/menu.fr.json · Skill level: Beginner

Each language has one menu file with two lists: header (the top menu and its dropdown panels) and footer (the link columns). Change both files when you change a link, so English and French stay in step.

The order of items in the file is the order on the page. There are three kinds of item:

1. A plain link

{ "enable": true, "name": "Pricing", "url": "/pricing/" }

2. A dropdown with featured links. Set "hasChildren": true and list the links in children. A child with a description and an icon is shown as a large link with its icon:

{
  "enable": true,
  "name": "Product",
  "hasChildren": true,
  "children": [
    {
      "enable": true,
      "name": "Platform overview",
      "url": "/services/",
      "description": "Everything you need to ship and scale",
      "icon": "Layers"
    }
  ]
}

3. A labeled group inside a dropdown. A child that has its own "hasChildren": true becomes a column with a heading. Its links can have an icon too:

{
  "enable": true,
  "name": "Features",
  "hasChildren": true,
  "children": [
    { "enable": true, "name": "Autoscaling", "url": "/services/service-01/", "icon": "Activity" },
    { "enable": true, "name": "Private networking", "url": "/services/service-02/", "icon": "Network" }
  ]
}

A dropdown can mix featured links and groups: the featured links show first, the groups beside them.

Field	What it does
`enable`	Required in the header. `true` shows the item, `false` hides it
`name`	The text shown
`url`	Where it goes: `/pricing/` for your pages (the language prefix is added for you) or a full `https://` address
`hasChildren`	`true` for a dropdown or a group
`children`	The links inside a dropdown or group
`description`	A short line under a featured link
`icon`	Any Lucide icon name, such as `"Rocket"` or `"Building2"`

On small screens the same items appear in the mobile menu, with each dropdown’s links listed under its name. The simple header layout shows only the top level: a dropdown becomes one link to its first link.

The last header item, Pages, links to every page template so buyers can explore the demo. Most sites hide it:

{ "enable": false, "name": "Pages", "hasChildren": true, "children": [ ... ] }

Several demo links point to # (Guides, Webinars, Glossary, Partners, Brand assets). Point them at real pages or set them to "enable": false before you launch.

footer is a list of columns. Each column has a label and a list of links:

"footer": [
  {
    "label": "Company",
    "list": [
      { "enable": true, "name": "About", "url": "/about/" },
      { "enable": true, "name": "Careers", "url": "/careers/" }
    ]
  }
]

In the footer, links are shown unless "enable": false. A column with no visible links is hidden.
The default and large footers show every column. The minimal footer shows only the last column, so keep your legal links last.
The Cookie settings link uses "url": "#cookie-settings", which reopens the cookie preferences. Disable it if you turn the cookie banner off.

Do It With AI

Update the menus in src/config/menu.en.json and menu.fr.json. Header: [Product (dropdown: ...),
Pricing, Docs (https://docs.example.com), Company (dropdown: About, Careers, Contact)]. Hide the
"Pages" menu. Footer columns: [Product, Resources, Company, Legal], with Legal last. Use Lucide icon
names, keep "enable": true on every visible header item, and translate the names for French.

Menus

Header Menu

The Demo “Pages” Menu

Footer Menu

Do It With AI