Header

DraftAccessible

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.

Code

Table of contents

Example with all the components

Press Enter to start editing. Press Esc to stop editing.

Note: Header is designed to be used full width at the top of the page above the main content. Preview here might not scale correctly and mobile navigation menu is disabled. View full header example in Storybook.

Example with dark theme

Press Enter to start editing. Press Esc to stop editing.

Note: Header is designed to be used full width at the top of the page above the main content. Preview here might not scale correctly and mobile navigation menu is disabled. View full header with dark theme example in Storybook by changing the theme property..

Properties

Table 1: Header properties
PropertyDescriptionValuesDefault value
ariaLabelAria-label for describing header.string-
classNameAdditional class names to apply.string-
defaultLanguageDefault selected language.LanguageTypefi
idId for the element.string-
onDidChangeLanguageCallback function for when user selects a new language.(newLanguage: string) => void-
languagesList of selectable languages.light,dark, HeaderCustomThemelight
themeHeader theme.LanguageOption[]light

The languages property is an array of LanguageOption objects. If LanguageOption.isPrimary is true, the option is shown outside of the dropdown, unless a non-primary language is selected.

This component also accepts all nativeheader element props.

Following component properties override their native counterparts:

  • ariaLabel overrides the aria-label

Read more about the Header.

Properties

Table 2: Header.SkipLink properties
PropertyDescriptionValuesDefault value
ariaLabelAria-label for describing SkipLink in more detail.string-
labelLabel for the SkipLink.string-
skipToId of the element where the SkipLink jumps to.string-
themeCustom styling for SkipLink.SkipLinkTheme-

This component also accepts all nativea element props.

Following component properties override their native counterparts:

  • ariaLabel overrides the aria-label

Read more about the Header.SkipLink.

Header.UniversalBar

Note: Under large sized screens (992px and down) the Header.UniversalBar is hidden and the contents are moved inside the the Header.ActionBar component's menu.

Properties

Table 3: Header.UniversalBar properties
PropertyDescriptionValuesDefault value
ariaLabelAria-label for describing UniversalBar.string-
classNameAdditional class names to apply.string-
idID for the UniversalBar element.string-
primaryLinkHrefHypertext reference for the primary link.string-
primaryLinkTextLink text for the primary linkstring-
roleARIA role to describe the contents.string-

This component also accepts all nativediv element props.

Following component properties override their native counterparts:

  • ariaLabel overrides the aria-label

Read more about the Header.UniversalBar.

Header.ActionBar

Properties

Table 4: Header.ActionBar properties
PropertyDescriptionValuesDefault value
ariaLabelAria-label for describing ActionBar.string-
classNameAdditional class names to apply.string-
frontPageLabelLabel for front page link in mobile navigation menu.string-
logoAriaLabelAria-label for the logo.string-
logoHrefURL for the logo.string-
logoLogo component.Logo-
menuButtonLabelLabel for the menu button.stringMenu
menuButtonAriaLabelAria-label for the menu button.string-
onLogoClickCallback function for when the logo is clicked.MouseEventHandler-
onMenuClickCallback function for when the menu button is clicked.MouseEventHandler-
onTitleClickCallback function for when the title is clicked.MouseEventHandler-
openFrontPageLinksAriaLabelAria-label for describing going back to main navigation links in mobile navigation menu.string-
roleARIA role to describe the contents.string-
titleService name.string-
titleAriaLabelAria-label for the title.string-
titleStyleStyle for the service name.TitleStyleType.Normal TitleStyleType.BoldNormal
titleHrefURL for the title.string-

This component also accepts all nativediv element props.

Following component properties override their native counterparts:

  • ariaLabel overrides the aria-label

Read more about the Header.ActionBar.

Header.ActionBarItem

Properties

Table 5: Header.ActionBarItem properties
PropertyDescriptionValuesDefault value
ariaLabelAria-label for describing the item.string-
avatarAn avatar which replaces the icon. Usually user's initials, but can be any Element.string JSX.Element-
closeIconIcon for the item when dropdown is open.ReactNode-
closeLabelLabel for the item when dropdown is open.string JSX.Element-
dropdownClassNameAdditional class name for the dropdown element.string-
fixedRightPositionBoolean to set the item in a fixed position on the right side of the action bar behind a dividing line.booleanfalse
fullwidthBoolean to set the item to be fullwidth under the ActionBar. Example use is automatically done with LanguageSelector in mobile view.booleanfalse
iconIcon for the item.ReactNode-
iconClassNameAdditional class name for the icon.string-
idID for the ActionBarItem.string-
labelLabel for the item.string JSX.Element-
labelOnRightBoolean to set the label to the right side of the icon.booleanfalse
preventButtonResizeIf true, menu button resizing is prevented by rendering button's active state to a separate element.booleanfalse

This component also accepts all nativediv element props.

Following component properties override their native counterparts:

  • ariaLabel overrides the aria-label

Read more about the Header.ActionBarItem.

Header.ActionBarButton

Properties

Table 6: Header.ActionBarButton properties
PropertyDescriptionValuesDefault value
fixedRightPositionBoolean to set the item in a fixed position on the right side of the action bar behind a dividing line.booleanfalse
fullwidthBoolean to set the item to be fullwidth under the ActionBar. Example use is automatically done with LanguageSelector in mobile view.booleanfalse
iconIcon for the item.ReactNode-
labelLabel for the item.string JSX.Element-
labelOnRightBoolean to set the label to the right side of the icon.booleanfalse
refRefObject to store the element.RefObject-

This component also accepts all nativebutton element props.

Read more about the Header.ActionBarButton.

Header.LanguageSelector

Language options, the default language, and a change listener are passed to the Header component.

Properties

Table 7: Header.LanguageSelector properties
PropertyDescriptionValuesDefault value
ariaLabelAria-label for describing the dropdown button.string-
languageHeadingHeading for the list of languages inside the dropdown.string-
sortLanguageOptionsFunction for sorting language options into primary and secondary. By default, all primary LanguageOptions as shown. If a secondary LanguageOption is selected, only that one is shown.(options: LanguageOption[], selectedLanguage: string) => [LanguageOption[], LanguageOption[]]-

This component also accepts all nativebutton element props.

Read more about the Header.LanguageSelector.

Header.SimpleLanguageOptions

Header.SimpleLanguageOptions is an alternative to Header.LanguageSelector. Read more in the usage page.

Properties

Table 8: Header.SimpleLanguageOptions properties
PropertyDescriptionValuesDefault value
languagesArray of languages to render.LanguageOption[]-

This component also accepts all nativediv element props.

Read more about the Header.SimpleLanguageOptions.

Header.Search

Properties

Table 9: Header.Search properties
PropertyDescriptionValuesDefault value
labelLabel for the search input.string JSX.Element-
onChangeCallback function for the input value changes.(inputValue: string) => void-
onSubmitCallback function for when input is submitted.(inputValue: string) => void-

This component also accepts all nativediv element props.

Read more about the Header.Search.

Header.NavigationMenu

Properties

Table 10: Header.NavigationMenu properties
PropertyDescriptionValuesDefault value
ariaLabelAria-label for describing NavigationMenu.string-
idID for the NavigationMenu.string-

This component also accepts all nativesection element props.

Read more about the Header.NavigationMenu.

The Header.Link component has the as prop which you can use to use your own navigation link instead of our Header.Link, which uses HDS Link underneath. You can pass it as an element as={<CustomLink />} or as a component as={CustomLink}. The Header.ActionBarButton can be used as a plain button element without a dropdown like in Header.ActionBarItem.

Press Enter to start editing. Press Esc to stop editing.

Note: Header is designed to be used full width at the top of the page above the main content. Preview here might not scale correctly and mobile navigation menu is disabled. View full header example in Storybook.

Properties

Table 11: Header.Link properties
PropertyDescriptionValuesDefault value
activeSet the link as the current page, giving it proper styles.boolean-
asElement or component to use instead of Header.Link.ElementLink
classNameAdditional classNames to apply to the link.string-
closeDropdownAriaButtonLabelAria-label for the dropdown button to describe the closing of the dropdown.string-
dropdownButtonClassNameAdditional classNames to apply to the dropdown button.string-
dropdownClassNameAdditional classNames to apply to the dropdown menu.string-
dropdownLinkClassNameAdditional classNames to apply to the dropdown links.string-
dropdownLinksArray of NavigationLink components to render in a dropdown.[<Header.Link>]-
hrefHypertext Reference of the link.string-
labelLabel for the link.string-
onDropdownButtonClickCallback fired when the dropdown button is clicked.function-
openDropdownAriaButtonLabelAria-label for the dropdown button to describe the opening of the dropdown.string-
wrapperClassNameAdditional classNames for the element wrapping the link.string-

This component also accepts all nativea element props.

Header.ActionBarSubItem

Properties

Table 12: Header.ActionBarSubItem properties
PropertyDescriptionValuesDefault value
iconLeftIcon element (on the left side of the label) for the action bar item.ReactNode-
iconRightIcon element (on the right side of the label) for the action bar item.ReactNode-
notificationBubbleContentContent for the right aligned red notification bubble.string-
notificationBubbleAriaLabelAria label for notification bubble.string-
labelLabel for the action bar item.string JSX.Element-
isHeadingIf heading style is used.boolean-
boldIf bold.boolean-
hrefHypertext Reference of the link.string-
externalIf external link.boolean-
openInExternalDomainAriaLabelThe aria-label for opening link in an external domain.string-

This component also accepts all nativea element props.

Read more about the Header.ActionBarSubItem.

Header.ActionBarSubItemGroup

Properties

Table 13: Header.ActionBarSubItemGroup properties
Description
Same properties as the Header.ActionBarSubItem. The component sets isHeading to true.

This component also accepts all nativea element props.

Read more about the Header.ActionBarSubItemGroup.

Header.LoginButton

Note about Header login components
The Header.LoginButton, Header.LogoutSubmenuButton and Header.UserMenuButton require a working Login Provider that cannot not be configured here. Working examples can be seen in the Storybook.

Table 14: Header.LoginButton properties
PropertyDescriptionValuesDefault value
spinnerColorColor of the loading spinner.string--header-spinner-color or --color-black-60
errorLabelLabel shown in the error notification.string-
errorTextText shown in the error notification.string-
errorCloseAriaLabelAria-label of the close button in the error notification.string-
errorPositionPosition of the error notification.NotificationProps['position']top-right
loggingInTextScreen reader text for the load indicator.string-
idThe id attribute of the element.string-
& Header.ActionBarItemButton propertiesExtends properties of the Header.ActionBarItemButton.--

This component also accepts all nativea element props.

Read more about the Header.LoginButton.

Header.LogoutSubmenuButton

Properties

Table 15: Header.LogoutSubmenuButton properties
PropertyDescriptionValuesDefault value
spinnerColorColor of the loading spinner.string--header-spinner-color or --color-black-60
errorLabelLabel shown in the error notification.string-
errorTextText shown in the error notification.string-
errorCloseAriaLabelAria-label of the close button in the error notification.string-
errorPositionPosition of the error notification.NotificationProps['position']top-right
loggingOutTextScreen reader text for the load indicator.string-
idThe id attribute of the element.string-
& Header.ActionBarItemButton propertiesExtends properties of the Header.ActionBarItemButton.--

This component also accepts all nativea element props.

Read more about the Header.LogoutSubmenuButton.

Header.UserMenuButton

Properties

This component uses the Header.ActionBarItem and automates its properties. A custom user menu can be built by copying the same process. The component should have child components, usually the Header.LogoutSubmenuButton.

Table 16: Header.UserMenuButton properties
Description
No properties to set. User data is picked from the Login Provider.

This component also accepts all nativea element props.

Read more about the Header.UserMenuButton.

Packages

PackageIncludedStorybook linkSource link
HDS React
Yes
View in StorybookView source
HDS Core
No
--