Overview

Along with site identity and search, the header anchors users in a high-level site structure. It appears on every page with a consistent set of key sections and direct links. The tab-style navigation allows for easy selection between core sections and content.

Elements

1

2

3

4

5

View Code

• 1

  Logo
• 2

  Label
• 3

  Dropdown
• 4

  Divider
• 5

  Search
• 6

  Entity bar (optional)

Variations

None.

Behaviours

Mobile: The header menu items collapse into a left-panel hamburger menu.

Header navigation: Links should not open a new tab or link to another domain. The links drop down to the side menu in narrow screen widths. Header items with a sub-menu include a dropdown arrow icon.

Sub-menu: On click, the navigation items expand to reveal the mega menu.

Search: On click, a search box expands to the right inside the header.

Recommendations

Add content strategy guidelines and editorial rules here.