# 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
```json
{ "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):

```json
{
  "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
```json
"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](/taskly/customization/footer/)).

<Aside type="tip">
  Icons are Lucide names, in either form: `"LifeBuoy"` or `"life-buoy"`. Browse
  them at [lucide.dev/icons](https://lucide.dev/icons/).
</Aside>

<Aside type="caution">
  JSON has no comments and no trailing commas. The `_comment` key at the top of
  the file is ignored by the theme; leave it or delete it. A missing comma
  breaks the whole site: VS Code underlines it in red.
</Aside>

### Do It With AI
```text
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.
```