Header & Announcement Bar

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

The header shows, from left to right: the logo, the menus, the search button, a text link (“Log in”), and a button (“Get started”). It floats over the top of the first section, slides away when visitors scroll down, and comes back when they scroll up. On phones the menus fold into a menu button.

Header Layouts

A page picks its header with headerLayout in its frontmatter. Pages without it use default.

`headerLayout`	Look	Used on
`default`	A floating white bar with rounded corners	`/` and every inner page
`bar`	A full-width white bar with a line under it, the menus centered	`/home-2/`
`islands`	The logo, the menus, and the buttons in three separate white boxes	`/home-3/`

headerLayout: "bar" # default | bar | islands

All three use the same menus, mega menu, and phone menu.

The Logo

Set in [site] of config.toml. See Site Identity & Logo.

The Menus

The links, dropdowns, flyouts, and mega menu come from header in src/config/menu.en.json and menu.fr.json. See Menus.

The menus work with the keyboard too: Tab opens a dropdown, and Esc closes it (or the phone menu) and returns focus to its button.

The Button And The Text Link

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

[settings.navigationSecondaryLink]
  enable = true
  label  = ""          # empty uses navigation.secondaryLabel ("Log in")
  url    = "/login/"

Point them at your app, for example url = "https://app.acme.com/signup". Internal paths get the language prefix on French pages automatically. Set enable = false to remove either one.

The Search Button

The button with the ⌘K hint opens site search. [settings.search] enable = false removes it, together with the search window. See Search.

The Language Switcher

On regular pages, the language links sit in the bottom row of the footer, not in the header. The log-in and sign-up screens show a switcher at the top. Both appear only while [settings.multilingual] enable = true.

The Announcement Bar

The dark strip above the header, on every page except the auth screens. Visitors can close it, and the browser remembers that choice.

enable: true
id: "release-2026-10"   # change it with the message, so visitors who closed the old one see the new one
tag: "New"              # small pill before the text; "" hides it
text: "Two-way calendar sync is live on every plan."   # inline Markdown works
link:
  enable: true
  label: "See what’s new"
  url: "/changelog/"
dismissible: true       # false hides the close button

Edit french/announcement-bar.md too. To remove the bar from the whole site, set enable = false under [settings.announcementBar] in config.toml.

The Header And The First Section

Because the header floats over the page, every page starts with a section that leaves room at the top: a hero, or the cream page header (PageHeader) that inner pages use. Keep a hero or page header first when you build a new page.

Do It With AI

Set the header for my product: the button "[LABEL]" goes to [URL], the text link "[LABEL]" goes to
[URL] (or remove it). Edit [settings.navigationButton] and [settings.navigationSecondaryLink] in
src/config/config.toml; put the labels in navigation.buttonLabel and navigation.secondaryLabel in
src/i18n/en.json and fr.json instead of config.toml. Then change the announcement bar in
src/content/widgets/english/announcement-bar.md and french/ to "[MESSAGE]" linking to [URL], with a
new id.