Skip to content

7. Nav‐Bar Customization

Euge Stumm edited this page Aug 16, 2026 · 2 revisions

The nav-bar Tab 🟡

nav-bar builds your site's navigation menu — the row of links (and dropdowns) across the top of every page. It's marked yellow: you're meant to edit it, including adding and removing menu items, but it's a bit more structural than pages or main-metadata, so it rewards reading this page first.

Structure

Column What it holds
translate_id_nav An ID linking this menu item to its actual display text. Must match a row on the translation tab exactly (case-sensitive) — that's where the real label text ("Home", "Browse", "Timeline"...) lives, once for each language.
stub The path or URL the item links to. A leading-slash path for an internal page (/browse.html), or a full https://... address for an external link. Left blank for items that are dropdown headers rather than links (see below).
dropdown_parent Blank for a top-level menu item. To nest this item inside a dropdown, put the parent item's translate_id_nav value here.

One clarification on the grey translate_id_nav column: unlike config's category column, this one isn't a fixed list — building your nav menu means adding and removing rows here. The grey fill just flags it as an ID value rather than free text: whatever you type must have a matching entry on translation, or the site won't know what label to show.

The three roles a row can play

  1. A top-level link — dropdown_parent blank, stub filled. Shows up directly in the navbar. In this template: nav-home (→ /), nav-browse, nav-map, nav-timeline, nav-data.
  2. A dropdown header — both dropdown_parent and stub blank. Doesn't link anywhere itself; it just creates a labeled dropdown that groups whichever child rows point to it. In this template: nav-visualization, nav-tags, nav-about, nav-learn.
  3. A dropdown child — dropdown_parent filled with a header row's translate_id_nav, stub filled with the destination. Appears nested under that header. For example, nav-about-this-project, nav-method, nav-how-to-cite, and nav-contribute all set dropdown_parent to nav-about, so they appear together in an "About" dropdown.

Dropdown children don't have to point to a local page — nav-gender-in-spanish and nav-on-gender-inclusive-spanish (both nested under nav-learn) link out to https://www.genderinlanguage.com/..., showing external links work the same way as internal ones.

Row order matters

Top-level items appear left to right in the order their rows appear in the sheet, and — by the convention this template follows — each dropdown header is immediately followed by its own children in the rows underneath it. Keeping children grouped right after their parent isn't strictly required for the linking to work (that's driven by dropdown_parent matching, not position), but it keeps the sheet readable and is worth sticking to as you add your own items.

Where the actual text comes from

nav-bar only stores structure and IDs — no visible label text lives on this tab. To add a brand-new menu item, you need a row in both places:

  1. A row here on nav-bar with a new translate_id_nav (e.g. nav-glossary), its stub, and optionally a dropdown_parent.
  2. A matching row on the translation tab with that same ID in translate_id, plus the actual label text for each language.

Miss the second step and the menu item will appear with a blank or broken label instead of real text.

Common mistakes to avoid

  • Adding a translate_id_nav with no matching row on translation — the label won't resolve.
  • A typo in dropdown_parent that doesn't exactly match an existing header's translate_id_nav — the child item won't nest where you expect.
  • Leaving stub blank on an item that's meant to be clickable — it'll render as a dead link.
  • Reusing the same translate_id_nav on two different rows — the site won't be able to tell which one you mean.

As with every tab, changes here don't reach your live site until you run Sync content from Spreadsheet in GitHub Actions.

Clone this wiki locally