Header

On this page

Example

Designer guidance

Developer guidance

Content editor guidance

Accessibility 

Support

Designer Guidance

When to use

Use the header to help users easily access different sections of the site and maintain a consistent layout. You should:

• 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.
• Regularly update the navigation links and other dynamic content.
• Highlight the active page link.
• Implement hover states for desktop and visible focus states for keyboard users.

Behaviours


• Implement hover effects on desktop to provide visual feedback when users hover over navigation links. 
• Highlight the active navigation link to indicate the current page or section. This helps users understand their location within the website.
• Header adapts to screen size:
  • Collapsed menu on mobile.
  • Full navigation on desktop.

Options


The header has multiple options that can be used:

• Minimal header: The minimal header features the British Red Cross logo and donate button, it should be used on single page websites where no search or navigation is necessary.
• Hosted by header: This header features a joint branded logo for websites that are a separate brand but are hosted or supported by the Red Cross.
• Standard header: To be used on most websites that have more than a single page.
• Header with breadcrumb: To be used on most websites that have more than a single page and multiple levels of navigation.

Developer Guidance

Best practices

• Ensure the header component is responsive and maintains usability on different screen sizes and devices.
• 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.

Content Editor Guidance

Best practices

• 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. Text must meet contrast requirements, interactive elements need visible focus indicators and adequate target size, and skip links should be provided to bypass repeated content. The header should be 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