The header bar is a short strip of content at the top of an email. It provides important context or utility links such as View in browser, Manage preferences, or Unsubscribe.
Separating these links from the main content helps improve clarity, accessibility and compliance. Header bars can also include information such as dates, contact details or security messages to help readers understand the context.
When to use
Use a header bar when you need to:
- provide links that relate to the email itself, not its main content
- offer another way for readers to interact with the email, such as viewing it in a browser
- include contact details, dates or security advice
- meet compliance and accessibility requirements, including making preference and unsubscribe options clear.
When not to use
Avoid using a header bar for:
- primary calls to action – these belong in the body of the email
- long-form content – header bars should be brief and functional
- decorative or non-functional content – every element should serve a purpose.
Variations
The NSW Email Toolkit includes several header bar styles:
View in browser
Single utility link for browser fallback when rendering may vary across clients.
Date + view in browser
Adds a date stamp beside the browser-view link for newsletters and timed updates.
Contact + social
Pairs contact options with social links when support and ongoing engagement both matter.
Contact + view in browser
Combines support details with a browser-view fallback in one utility strip.
Manage preferences
Compliance-focused links for subscription preferences and unsubscribe options.
Utility links
Compact set of browser-view, preferences and unsubscribe links in one bar.
Security advice
Short security message for sensitive or service-led emails that need extra trust cues.
Design guidance
- Keep header bars minimal and unobtrusive – they are for utility, not primary content.
- Place the most important action (for example, “View in browser”) at the start or left for visibility.
- Use consistent font size and colour contrast so links remain accessible.
- Avoid clutter by limiting to one or two functions per bar unless using the dedicated Links variation.
Accessibility
- Ensure links are descriptive (for example, “View this email in your browser” instead of “Click here”).
- Maintain colour contrast ratios for text against the background.
- Screen readers should read header bars in a logical order before moving into the main content.