Header

BetaAccessible

The Header component is located at the top of the page above the main body content. It provides a place for levels of primary navigation and site-wide actions.

A work in progress!
The Header components are a collection of new navigation components the HDS team is currently fine tuning. This means that these components are subject to change. We are open to feedback regarding how they work.

Accessibility

Pay attention to

  • HDS Navigation is designed to support many different brand colours. When customising colours, refer to colour guidelines to ensure accessibility.
  • When designing a menu link hierarchy, always think about keyboard and screen reader users. First, make sure top-level menu labels are clear, and submenu items contextually fit under it. Next, make sure the menu option order is logical and reasonable. Remember that keyboard users need to manually navigate to each element and thus placing a commonly used menu option last is not optimal.
  • Landmarks are provided by the wrapping <header> element, <nav> element in the Header.NavigationMenu component and with role="search" attribute on the Header.HeaderSearch component. In case you want more landmarks, the Header.UniversalBar, Header.ActionBar and Header.HeaderSearch components support role prop which should be used together with a descriptive aria-label prop. Just remember that landmarks should be used sparingly in order to avoid "noise" for screen readers and making the overall page layout difficult to understand.
  • Header.NavigationMenu's dropdowns open only by clicking them. They don't open from hovering with the mouse as it can be difficult to navigate for people with motor and seeing challenges.
  • Only use the elements you need. Avoid clutter.