# Header & Announcement Bar

## 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/` |

```yaml
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](/taskly/customization/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](/taskly/customization/menus/).

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

### The Button And The Text Link
```toml
[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](/taskly/customization/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.

```yaml
# src/content/widgets/english/announcement-bar.md
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`.

<Aside type="tip">
  When you post a new announcement, always change `id`. Visitors who closed the
  previous bar would otherwise never see the new one.
</Aside>

### 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
```text
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.
```