Content
Announcement Bar
Configure site-wide, language-aware announcements in Sanity and render them at the top of every page.
The announcement bar is a global banner rendered above the header. It is driven by Sanity content and selected per site and language.
What this gives you
- A reusable announcement document model with rich text messages
- Site-aware and language-aware announcement assignment
- Optional scheduling fields (
startDateandendDate) for campaign windows - Cache-tagged data fetching for safer revalidation and rollout
How it works
The website layout renders ManifestAnnouncementBar before the header. That component fetches announcements from Sanity using the current siteId and languageCode, then passes the result into the AnnouncementBar UI component.
The data source is the Active Theme singleton:
activeAnnouncementsstores per-language references to Announcement documents- the frontend query dereferences those references and fetches
message,startDate, andendDate - the UI currently renders only the first announcement in the returned array
Configure announcements in Sanity
- Create one or more
Announcementdocuments with:sitelanguagemessage(required minimal Portable Text)- optional
startDate/endDate
- Open Site Config: Active Theme for the same site.
- In Active Announcements, select announcement references for each language.
- Publish both the Announcement documents and the Active Theme singleton.
Rendering behaviour and guardrails
- No announcements selected: the bar is not rendered.
- Empty or invalid Portable Text message: the bar is not rendered.
- Multiple selected announcements: only the first is shown.
- Styling forces high contrast (dark background, white text), and Portable Text colours are overridden for consistency.
Implementation notes
- Studio schema:
apps/sanity/schema/types/documents/announcements.ts - Active Theme selection:
apps/sanity/schema/types/singletons/activeTheme.tsx - Active announcement query:
apps/web/src/features/announcements/queries/activeAnnouncements.query.ts - Layout integration:
apps/web/src/app/(website)/~s/[siteId]/[languageCode]/layout.tsx - Render component:
apps/web/src/components/primitives/announcement-bar/AnnouncementBar.tsx
Edit this page on GitHub
Last updated: 27 Apr 2026, 14:59:48
