Menus

Menus

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

Each language has its own menu file with two parts: header (the menus in the header) and footer (the link columns in the footer). Edit both files when you change a menu.

A Simple Link

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

• "enable": true is required: header items without it are hidden.
• url is an internal path (/pricing/, the /fr/ prefix is added for you), a full https:// address, or an anchor.

A Dropdown

Give an item children and it opens a dropdown. Each child can have a Lucide icon, a short description, and a color for its icon tile (sun | lime | sky | lilac | orchid | mint; without one, colors rotate):

{
  "enable": true,
  "name": "Solutions",
  "url": "/solutions/",
  "hasChildren": true,
  "children": [
    {
      "enable": true,
      "name": "Marketing",
      "url": "/solutions/marketing/",
      "icon": "Megaphone",
      "color": "sun",
      "description": "Campaigns that launch on time"
    }
  ]
}

A parent with a url keeps its label clickable; without one, the label only opens the dropdown.

Nested Flyouts

A child with its own children opens a flyout to the side, and flyouts can nest to any depth. The Resources menu uses this: Integrations → Communication → Chatnest.

A Mega Menu

Add "mega": true to a top item and its children become columns: each child is a column title and its own children are the links. A mega menu can also show:

• featured: a card with an image, for example a new release: { "enable": true, "tag": "New", "title": "...", "description": "...", "image": "/images/blog/task-template.svg", "url": "/changelog/...", "label": "Read the release" }
• footerLinks: a bottom bar of links with icons: [{ "enable": true, "name": "Help center", "url": "/help/", "icon": "LifeBuoy" }]

The Pages menu in the demo is a mega menu with four columns, a featured card, and a footer bar. Note that featured and footerLinks items need "enable": true too.

On Phones

You don’t configure anything for phones: the same tree becomes an accordion in the mobile menu, with dropdowns, flyouts, and mega menu columns as nested levels.

The Demo Menus

The shipped header has two menus that exist to show off the theme:

• Home links the three homepages.
• Pages links every page design, including the log-in screen, the 404 page, and a sample integration.

Most sites set "enable": false on both, or replace them with their own product menu. The footer’s Homepages column is a demo column too.

Footer Columns

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

• Footer links are shown unless "enable": false. A column with no visible links is hidden.
• The default footer has room for three columns next to the logo and the newsletter form. The newsletter footer shows one row and the tiles footer one card per column (Footer & CTA).

Do It With AI

Update the menus in src/config/menu.en.json and menu.fr.json. Header: [Product (dropdown: ...),
Solutions, Pricing, Resources (mega menu with columns: ...), Contact]. Hide the "Home" and "Pages"
demo menus. Footer columns: [Product, Resources, Company]. Use Lucide icon names, keep
"enable": true on every visible item (including featured and footerLinks), and translate the names
for French.