Header

On this page

Example

Designer guidance

Developer guidance

Content editor guidance

Accessibility 

Support

Designer Guidance

When to use

Use the header at the top of every page to provide consistent navigation and branding.

When not to use

Do not use multiple headers on a single page.

How to use

• Keep navigation clear and predictable.
• Ensure navigation accurately reflects the sites structure.
• Highlight the active page link.
• Implement hover states for desktop and visible focus states for keyboard users.
• Ensure the header adapts to screen size:
  • Collapse menu on mobile.
  • Full navigation on desktop

Options

The header available in the following variants:

• Standard header: Use for most multi-page sites.
• Minimal header: Logo and donate only. Use for single-page or single journey sites without navigation or search.
• Hosted by header: Includes joint branding for partner sites hosted by the British Red Cross Web Platform.

Developer Guidance

Best practices

• Use semantic HTML:
  • <header> for the component.
  • <nav> for navigation.
• Apply ARIA roles and labels for navigation landmarks.
• Ensure keyboard navigation for all links and dropdowns.
• Provide skip links to bypass repeated content.
• Maintain logical focus order.
• Implement responsive design for mobile and desktop.
• Ensure visible focus indicators and minimum touch target size (44px x 44px)

Content Editor Guidance

• Use short, descriptive link text.
• Keep navigation structure consistent across all pages.
• Avoid overloading the header with too many options.
• Use sentence case for link text.
• Ensure link text clearly describes it's destination.

Accessibility

• Uses semantic landmarks and clear structure.
• ensuring that navigation and search are operable by a keyboard.
• Provide visual focus indicators for all interactive elements.
• Include skip links to bypass repeated content.
• Keep header consistent across all pages.

WCAG Success Criteria

• 1.3.1 Info and Relationships (Level A)
  Use semantic HTML for the header (<header> element).
• 2.1.1 Keyboard (Level A)
  All links in the header must be operable with the keyboard.
• 2.1.2 No Keyboard Trap (Level A)
  If using dropdown or mega menus, ensure users can move into and out of them without issues.
• 2.4.3 Focus Order (Level A)
  Focus should move through header elements in the expected order.
• 2.4.4 Link Purpose (In Context) (Level A)
  Navigation links must clearly describe their destination.
• 3.2.3 Consistent Navigation (Level AA)
  Header navigation should appear in the same order and location across all pages.

Related components

Breadcrumb

Button

Search