# Menus

## Menus

**Files:** `src/config/menu.<language>.json`, `src/content/sections/<language>/footer.md` · **Skill level:** Beginner

The header menu and the footer link groups live in one JSON file per language: `menu.en.json`, `menu.fr.json`, and `menu.ar.json`. Keep the files in the same shape: same items, same order, same URLs. Only the `name` and `label` texts differ.

Each file has two lists:

```json
{
  "headerPrimary": [ ... ],
  "footer": [ ... ]
}
```

This page covers everyday edits. [Navigation](/margo/features/navigation/) is the full reference for the header menu: every field, mega menus, and how the menu behaves on screen and with the keyboard.

### Header Menu
Each item in `headerPrimary` is one entry in the top menu, and the items show in the order of the file. Margo ships five: **Work** (a dropdown several levels deep), **Services** (a mega menu), **About**, **Journal**, and **Pages** (a mega menu). There are three kinds of item.

**A plain link:**

```json
{ "enable": true, "name": "About", "url": "/about/" }
```

**A dropdown.** Set `"hasChildren": true` and list the links in `children`. A child with its own `hasChildren` and `children` opens a flyout to the side. This is the start of the shipped **Work** menu:

```json
{
  "enable": true,
  "name": "Work",
  "hasChildren": true,
  "children": [
    { "enable": true, "name": "All projects", "url": "/projects/" },
    { "enable": true, "name": "Archive", "url": "/archive/" },
    {
      "enable": true,
      "name": "Photo series",
      "hasChildren": true,
      "children": [
        { "enable": true, "name": "North Atlantic", "url": "/projects/north-atlantic/" },
        { "enable": true, "name": "Dune Light", "url": "/projects/dune-light/" }
      ]
    }
  ]
}
```

**A mega menu.** Set `"hasMegaMenu": true` and list groups of links in `menus`. Each group has a heading (`name`, which can be empty) and its own `children`:

```json
{
  "enable": true,
  "name": "Pages",
  "hasMegaMenu": true,
  "menus": [
    {
      "enable": true,
      "name": "Homes",
      "children": [
        { "enable": true, "name": "Solo designer", "url": "/" },
        { "enable": true, "name": "Studio", "url": "/home-studio/" },
        { "enable": true, "name": "Photographer", "url": "/home-photo/" }
      ]
    }
  ]
}
```

| Key           | What it does                                                                                     |
| ------------- | ------------------------------------------------------------------------------------------------ |
| `enable`      | `false` hides the item without deleting it. An item without `enable` shows                       |
| `name`        | The text in the menu                                                                             |
| `url`         | Where it links. Write paths without the language: `/about/`, not `/fr/about/`. The other languages add their prefix themselves. An item with children opens its menu and has no link of its own, so put its page in a child ("All projects") |
| `hasChildren` | `true` makes the item a dropdown                                                                 |
| `children`    | The links inside the dropdown. A child can have its own `hasChildren` and `children`             |
| `hasMegaMenu` | `true` makes the item a mega menu                                                                |
| `menus`       | The groups of a mega menu, each with `enable`, `name`, and `children`                            |
| `description` | A short line under a dropdown or mega menu link, on large screens                                |
| `cta`, `bar`  | A project card beside the links of a mega menu, and a strip of links along its bottom. See [Navigation](/margo/features/navigation/) |

No menu link has an icon. The mega menu groups in the shipped files still have a `weight` number, kept for the standard menu shape, but the header doesn't read it, so move an item in the file to move it in the menu.

<Aside type="caution" title="New pages don't appear on their own">
  The header menu is plain data. When you add a project, a service, or a page
  that should be in the menu, add its link in every language file.
</Aside>

### Hide The Pages Menu
**Pages** is a catalog of the demo: the three homepages, the inner pages, sample detail pages, and `/elements/`. Before you launch, set its `"enable"` to `false` in every menu file, or replace its links with the pages you keep.

The strip along the bottom of **Pages** holds the **Search** link, a `bar.links` item with `"action": "search"`. If you hide Pages, visitors can still open search with <kbd>⌘</kbd> + <kbd>K</kbd> or <kbd>/</kbd>. To keep a search link in the menu, add that item to the `bar` of another mega menu, such as Services. See [Navigation](/margo/features/navigation/).

### Footer Link Groups
`footer` is a list of link groups. Each has a `label` (the group heading) and a `list` of links:

```json
"footer": [
  {
    "label": "Work",
    "list": [
      { "enable": true, "name": "All projects", "url": "/projects/" },
      { "enable": true, "name": "Case study", "url": "/projects/ceramic-forms/" },
      { "enable": true, "name": "Testimonials", "url": "/testimonials/" }
    ]
  },
  {
    "label": "Legal",
    "list": [
      { "enable": true, "name": "Terms", "url": "/terms-conditions/" },
      { "enable": true, "name": "Privacy", "url": "/privacy-policy/" },
      { "enable": true, "name": "Cookies", "url": "/cookie-policy/" },
      { "enable": true, "name": "Cookie settings", "url": "#cookie-settings" }
    ]
  }
]
```

The shipped file has four groups, in this order: **Work** (0), **Services** (1), **About** (2), and **Legal** (3). The footer layouts pick groups **by their position**, counted from 0, in `src/content/sections/<language>/footer.md`:

| Key in `footer.md` | Ships as | Used by                                        |
| ------------------ | -------- | ---------------------------------------------- |
| `bottomMenu`       | `[3]`    | `columns` and `email`: the links next to the copyright (Legal) |
| `linkColumns`      | four columns, two of them `menu: 2` and `menu: 0` | `columns`: the ruled link columns |
| `smallMenu`        | `[2]`    | `email`: the small menu row                    |

The `wordmark` footer shows the links of every group in one row, each address once.

So if you add, remove, or move a group, check the numbers in `footer.md` in every language folder. A group whose links are all disabled is skipped, and the groups after it move up one place. See [Footer](/margo/customization/footer/).

The **Cookie settings** link (`#cookie-settings`) reopens the cookie banner. If you turn the banner off in `[settings.cookieConsent]`, set this item's `enable` to `false`.

### Keep Every Language In Step
When you add, remove, or move a menu item, do it in every menu file, and translate the `name` and `label` texts. JSON is strict: every item but the last in a list needs a comma after it, and every name and URL needs double quotes. A missing comma stops the site from building. See [File Formats](/margo/beginner/file-formats/).

### Do It With AI
```text
In each src/config/menu.<language>.json: set "enable": false on the "Pages" item in
headerPrimary, and add a link "[NAME]", translated for each language, to [URL] after About. In
the footer, make the Work group list only: [PAGES]. Keep the Legal group last, keep every file in
the same structure, and check that bottomMenu, linkColumns, and smallMenu in each
src/content/sections/<language>/footer.md still point at the right groups.
```