Header & Announcement Bar

Files: src/config/config.toml, src/config/menu.en.json, src/content/sections/english/announcement-bar.md · Skill level: Beginner

The header is the same on every page (except the log-in, sign-up, and reset screens, which have none): the logo, the menu, a search button, the dark mode switch, a text link (“Log in”), and a button (“Get started”). On small screens the menu folds into a menu button.

Choose A Header Layout

[settings.layout]
  header = "default"   # default | simple | centered

All three read the same menu file, so you can switch at any time. To use another layout on one page, add it to that page’s frontmatter:

---
title: "Launch week"
headerLayout: "simple"
---

The Button And The Link

[settings.navigationButton]
  enable = true
  label  = ""          # empty uses navigation.buttonLabel from src/i18n/en.json ("Get started")
  url    = "/signup/"

[settings.navigationSecondaryLink]   # the text link before the button (default and centered layouts)
  enable = true
  label  = ""          # empty uses navigation.secondaryLabel ("Log in")
  url    = "/login/"

To change the words in both languages, edit navigation in src/i18n/en.json and src/i18n/fr.json. To point them at your real app, change url, for example "https://app.example.com/login".

Sticky Header

[settings]
  stickyHeader = true   # the header stays at the top while scrolling

The announcement bar scrolls away; the header stays pinned.

Search And Dark Mode Buttons

• The search button opens the ⌘K / Ctrl+K search modal. Turn it off with [settings.search] enable = false. See Search.
• The sun/moon button switches dark mode. See Colors, Fonts & Dark Mode.

The language switch (EN | FR) is in the footer, in all three footer layouts.

Menu Links

The links and dropdown panels come from src/config/menu.en.json and menu.fr.json. See Menus.

Announcement Bar

The thin strip above the header. Edit src/content/sections/english/announcement-bar.md (and the French file):

---
enable: true   # false hides the bar
text: "New: preview environments can now start from a database snapshot."
link:
  enable: true
  label: "See what changed"
  url: "/changelog/2026-08-preview-database-snapshots/"
---

text accepts Markdown, so **bold** works. Use it for launches, events, or a sale, and set enable: false when you have nothing to announce.

Do It With AI

Switch the header to the [simple | centered] layout in src/config/config.toml. Point the header
button to "[URL]" with the label "[LABEL]" and the log-in link to "[URL]", in English and French
(update navigation in src/i18n/en.json and fr.json). Change the announcement bar in
src/content/sections/english/announcement-bar.md and french/ to: "[TEXT]" linking to "[URL]".