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:

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

This page covers everyday edits. Navigation is the full reference for the header menu: every field, mega menus, and how the menu behaves on screen and with the keyboard.

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:

{ "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:

{
  "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:

{
  "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

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.

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 ⌘ + K or /. To keep a search link in the menu, add that item to the bar of another mega menu, such as Services. See Navigation.

footer is a list of link groups. Each has a label (the group heading) and a list of links:

"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.

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.

Do It With AI

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.

Menus

Menus

Header Menu

Hide The Pages Menu

Footer Link Groups

Keep Every Language In Step

Do It With AI