Navigation

Wire builds its whole navigation from the two menus Ghost already gives you. Where a label starts decides what it becomes: a plain link, an item inside a dropdown, a heading, a rule — or a mega menu panel with live post covers in it.

Nothing here needs a theme setting. You type labels and URLs in Ghost, and the theme reads them.

Managing Navigation Items#

1. Go to ⛭ Settings → Navigation
2. Click Customize
3. Add, remove or reorder items
4. Click Save

The primary menu is your header. The secondary menu is your footer.

Label Prefixes#

The first characters of a label are an instruction, and the theme strips them before your visitors see anything.

The space matters. -About is a normal item with an odd name; - About is a dropdown item.

Dropdown Menus#

A top-level item opens a dropdown as soon as the item below it is prefixed. So this:

Journal
- Essays
- Interviews
- Reviews

gives you one header item, Journal, with three items inside it. Keep adding prefixed items to extend the dropdown; the next unprefixed label ends it and starts a new header item.

Dropdowns have no heading unless you write one. A # row placed first in the dropdown becomes its panel head — see below.

Section Headers#

A # label groups the items under it:

Journal
- Essays
# Archive
- 2025
- 2024

Where you put it decides what it titles. First row of the dropdown, it reads as the title of the whole panel. Anywhere further down, it captions the group of links under it. The styling is the same either way — only the spacing differs. A dropdown with no # row simply has no heading, which is the right answer for a short list of links.

Its URL decides whether it is a link. Point it at # and it is a plain caption. Point it somewhere real and the caption text itself becomes the link, with a chevron after it:

Journal                 →  /journal/
# Journal               →  /journal/          caption, links to /journal/
- Essays                →  /tag/essays/
- Interviews            →  /tag/interviews/
# Archive               →  #                  caption, not a link
- 2025
- 2024

A caption is the same size as a link row and sits in the same column, so adding one never pushes a mega block down — the block stays beside it.

The heading is yours to write rather than something the theme fills in: the parent item's name and URL are often not what you want at the top of the panel.

Separators#

A label of exactly --- draws a rule. Use it to split a long dropdown into blocks without naming them:

Journal
- Essays
---
- Subscribe

In the footer menu, # and --- do something different: each one starts a new column. That is how the footer gets its multi-column layout.

Mega Blocks#

An @ label is not a link at all — it is a slot the theme fills with content. Its URL picks which content, its label captions the result, and the whole of the next section is about that.

Mega Menus#

This is the part worth learning. An @ row inside a header dropdown does not draw a link — it fills the panel with real content, chosen by its own URL. The dropdown widens into a mega menu automatically: links stay in a rail down the left, the block sits beside them.

Because it is the URL that chooses, one menu can hold several different mega menus. Point one row at a tag and another at /tags/, and you get a different panel under each header item.

The row's label becomes the block's caption, with a View All beside it leading to the same URL the block is drawing from. So one row gives you the caption, the link and the content — you do not pair it with a # row:

@ Latest in Design      →  /tag/design/

titles the block Latest in Design, puts a View All to /tag/design/ beside it, and fills the panel with the three newest design posts.

The two captions differ on purpose: a # row in the link rail turns its own text into the link, while a block caption keeps its title plain and gives the archive its own View All — the grid underneath is a set of things to choose from, so the link out reads better as a separate control.

The signup form is the exception: it does not widen the dropdown, because a single form in a wide column leaves more empty space than it fills. It sits under the links instead, closing the panel. Everything else widens it.

One block per dropdown gives you the layout mega menus are known for: links in a narrow rail down the left, the block filling the panel beside them. Add a second block to the same dropdown and there is no longer room for that rail, so the panel lays everything out in the order you wrote it instead — links, then blocks, stacked full width. Both read well; the single-block panel simply reads better.

Leave the links out altogether and you get the third shape: a dropdown holding nothing but one @ row. With no rail to sit beside, the block takes the full width of the panel and the panel narrows by exactly the width the rail would have used — and where the block is one of the widgets, it drops the card border it wears next to links, so its rows line up straight under the caption. It is the shape to reach for when the menu is the content: a Masthead item that opens onto your authors rather than onto a list of links about them.

Blocks Your Content Already Fills#

Three of the blocks are the sidebar widgets, moved into the menu and laid out in two columns instead of one. They read the content you are already keeping for the sidebar, so there is nothing new to fill in — Sidebar widgets covers each one in full.

Each shows four entries, two across, and each keeps the sidebar's own row — the author avatar and post count, the recommendation favicon and description, the project thumbnail and one-line excerpt. Use them in the menu, in the sidebar or in both; they draw from the same place either way.

A block that finds nothing still renders its caption and View All, so a menu that opens onto an empty panel is telling you the content behind it is missing rather than that the row is wrong.

Usage Examples#

A section with its latest stories#

Design                  →  /tag/design/
- Typography            →  /tag/typography/
- Colour                →  /tag/colour/
@ Latest in Design      →  /tag/design/

Design opens a wide panel: the two links on the left, the three newest design posts on the right under the caption Latest in Design.

A browse-everything menu#

Explore
- Blog                  →  /blog/
- Issues                →  /issues/
@ Popular Topics        →  /tags/

A block on its own#

Masthead
@ Who writes here       →  /authors/

Masthead opens onto the author list and nothing else: no rail, no links, the block across the whole panel. The same shape works for /recommendations/ and /projects/:

Reading list
@ Publications we read  →  /recommendations/

Two blocks in one panel#

Magazine
- Current issue         →  /issues/
- Back issues           →  /issues/
@ This Week             →  /tag/news/
@ Contributors          →  /authors/

Links first, then the week's posts, then the contributors — stacked down a wide panel rather than beside a rail.

A caption over the links#

# still earns its place when the rail needs a title rather than the block:

Magazine
# In this issue         →  #
- Current issue         →  /issues/
- Back issues           →  /issues/
@ This Week             →  /tag/news/

A plain dropdown, no mega menu#

About
- Our story             →  /about/
- Contact               →  /contact/
# Elsewhere             →  #
- Newsletter            →  /newsletters/

No @ row, so this stays a narrow dropdown with one caption in the middle.

Panel Sizes#

A dropdown sizes itself from what you put in it — you never set a width:

The signup form gets the narrower panel because it is one field, not a grid — a full mega width would leave empty space beside it. Inside a mega panel the link rail is 9rem–14rem wide and the block takes the rest.

A panel with no links has no rail to hold, so it gives back the widest the rail could have grown to plus the gap beside it — 15rem off whichever width the panel started from. Nothing to set: take the links out and the panel resizes.

Every panel is capped at 32rem tall and scrolls inside itself, so a long menu never runs off the screen, and every width shrinks to fit a narrow window before it overflows.

If you are comfortable with CSS, all six numbers are custom properties on :root in the theme's stylesheet — --popover--width, --popover--max-height, --popover--mega-width, --popover--mega-subscribe-width, --popover--mega-rail-min and --popover--mega-rail-max. Override them from ⛭ Settings → Code injection to retune the panels without touching the theme:

<style>
  :root {
    --popover--mega-width: 52rem;
    --popover--max-height: 26rem;
  }
</style>

What Readers See#

• Dropdown items are numbered 01, 02, 03 down the panel, with an arrow appearing on the row under the cursor.
• The panel opens on hover and on Enter, and closes when the pointer or the keyboard focus leaves it.
• On phones the header menu becomes a full-screen sheet. Dropdowns turn into tap-to-open accordions, headings and rules still show, and an @ row becomes a plain link so the sheet stays quick to scan.

Notes#

• A prefixed item needs an ordinary item above it to belong to. A menu that starts with - , # , @ or --- has nothing to attach to, and that item is skipped.
• Only one level of nesting exists. A dropdown inside a dropdown is not possible, and -- Label is not a deeper level — it is a normal item whose name begins with a dash.
• @ is a header-menu prefix. In the footer menu there is no panel to fill, so an @ row is just a link with an odd name — put mega blocks in the primary menu only.
• Ghost caps each menu; if you are running out of room, move reference links to the footer menu and keep the header for the sections readers actually browse.
• Every mega block runs a live query when a page is built, so keep them to the handful of menus that earn it rather than putting one under every header item.
• Post covers, tag colours and author avatars all come straight from Ghost — there is nothing to upload for the menu itself.