Header
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.
Code
Table of contents
- Header
- Header.SkipLink
- Header.UniversalBar
- Header.ActionBar
- Header.ActionBarItem
- Header.ActionBarButton
- Header.LanguageSelector
- Header.SimpleLanguageOptions
- Header.Search
- Header.NavigationMenu
- Header.Link
- Header.ActionBarSubItem
- Header.ActionBarSubItemGroup
- Header.LoginButton
- Header.LogoutSubmenuButton
- Header.UserMenuButton
- Packages
Header
Example with all the components
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
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
Property | Description | Values | Default value |
---|---|---|---|
ariaLabel | Aria-label for describing header. | string | - |
className | Additional class names to apply. | string | - |
defaultLanguage | Default selected language. | LanguageType | fi |
id | Id for the element. | string | - |
onDidChangeLanguage | Callback function for when user selects a new language. | (newLanguage: string) => void | - |
languages | List of selectable languages. | light ,dark , HeaderCustomTheme | light |
theme | Header 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 thearia-label
Header.SkipLink
Properties
Property | Description | Values | Default value |
---|---|---|---|
ariaLabel | Aria-label for describing SkipLink in more detail. | string | - |
label | Label for the SkipLink. | string | - |
skipTo | Id of the element where the SkipLink jumps to. | string | - |
theme | Custom styling for SkipLink. | SkipLinkTheme | - |
This component also accepts all nativea
element props.
Following component properties override their native counterparts:
ariaLabel
overrides thearia-label
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
Property | Description | Values | Default value |
---|---|---|---|
ariaLabel | Aria-label for describing UniversalBar. | string | - |
className | Additional class names to apply. | string | - |
id | ID for the UniversalBar element. | string | - |
primaryLinkHref | Hypertext reference for the primary link. | string | - |
primaryLinkText | Link text for the primary link | string | - |
role | ARIA role to describe the contents. | string | - |
This component also accepts all nativediv
element props.
Following component properties override their native counterparts:
ariaLabel
overrides thearia-label
Header.ActionBar
Properties
Property | Description | Values | Default value |
---|---|---|---|
ariaLabel | Aria-label for describing ActionBar. | string | - |
className | Additional class names to apply. | string | - |
frontPageLabel | Label for front page link in mobile navigation menu. | string | - |
logoAriaLabel | Aria-label for the logo. | string | - |
logoHref | URL for the logo. | string | - |
logo | Logo component. | Logo | - |
menuButtonLabel | Label for the menu button. | string | Menu |
menuButtonAriaLabel | Aria-label for the menu button. | string | - |
onLogoClick | Callback function for when the logo is clicked. | MouseEventHandler | - |
onMenuClick | Callback function for when the menu button is clicked. | MouseEventHandler | - |
onTitleClick | Callback function for when the title is clicked. | MouseEventHandler | - |
openFrontPageLinksAriaLabel | Aria-label for describing going back to main navigation links in mobile navigation menu. | string | - |
role | ARIA role to describe the contents. | string | - |
title | Service name. | string | - |
titleAriaLabel | Aria-label for the title. | string | - |
titleStyle | Style for the service name. | TitleStyleType.Normal TitleStyleType.Bold | Normal |
titleHref | URL for the title. | string | - |
This component also accepts all nativediv
element props.
Following component properties override their native counterparts:
ariaLabel
overrides thearia-label
Header.ActionBarItem
Properties
Property | Description | Values | Default value |
---|---|---|---|
ariaLabel | Aria-label for describing the item. | string | - |
avatar | An avatar which replaces the icon. Usually user's initials, but can be any Element. | string JSX.Element | - |
closeIcon | Icon for the item when dropdown is open. | ReactNode | - |
closeLabel | Label for the item when dropdown is open. | string JSX.Element | - |
dropdownClassName | Additional class name for the dropdown element. | string | - |
fixedRightPosition | Boolean to set the item in a fixed position on the right side of the action bar behind a dividing line. | boolean | false |
fullwidth | Boolean to set the item to be fullwidth under the ActionBar. Example use is automatically done with LanguageSelector in mobile view. | boolean | false |
icon | Icon for the item. | ReactNode | - |
iconClassName | Additional class name for the icon. | string | - |
id | ID for the ActionBarItem. | string | - |
label | Label for the item. | string JSX.Element | - |
labelOnRight | Boolean to set the label to the right side of the icon. | boolean | false |
preventButtonResize | If true, menu button resizing is prevented by rendering button's active state to a separate element. | boolean | false |
This component also accepts all nativediv
element props.
Following component properties override their native counterparts:
ariaLabel
overrides thearia-label
Header.ActionBarButton
Properties
Property | Description | Values | Default value |
---|---|---|---|
fixedRightPosition | Boolean to set the item in a fixed position on the right side of the action bar behind a dividing line. | boolean | false |
fullwidth | Boolean to set the item to be fullwidth under the ActionBar. Example use is automatically done with LanguageSelector in mobile view. | boolean | false |
icon | Icon for the item. | ReactNode | - |
label | Label for the item. | string JSX.Element | - |
labelOnRight | Boolean to set the label to the right side of the icon. | boolean | false |
ref | RefObject to store the element. | RefObject | - |
This component also accepts all nativebutton
element props.
Header.LanguageSelector
Language options, the default language, and a change listener are passed to the Header component.
Properties
Property | Description | Values | Default value |
---|---|---|---|
ariaLabel | Aria-label for describing the dropdown button. | string | - |
languageHeading | Heading for the list of languages inside the dropdown. | string | - |
sortLanguageOptions | Function 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.
Header.SimpleLanguageOptions
Header.SimpleLanguageOptions
is an alternative to Header.LanguageSelector
. Read more in the usage page.
Properties
Property | Description | Values | Default value |
---|---|---|---|
languages | Array of languages to render. | LanguageOption[] | - |
This component also accepts all nativediv
element props.
Header.Search
Properties
Property | Description | Values | Default value |
---|---|---|---|
label | Label for the search input. | string JSX.Element | - |
onChange | Callback function for the input value changes. | (inputValue: string) => void | - |
onSubmit | Callback function for when input is submitted. | (inputValue: string) => void | - |
This component also accepts all nativediv
element props.
Header.NavigationMenu
Properties
Property | Description | Values | Default value |
---|---|---|---|
ariaLabel | Aria-label for describing NavigationMenu. | string | - |
id | ID for the NavigationMenu. | string | - |
This component also accepts all nativesection
element props.
Header.Link
Custom Link and ActionBarButton
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.
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
Property | Description | Values | Default value |
---|---|---|---|
active | Set the link as the current page, giving it proper styles. | boolean | - |
as | Element or component to use instead of Header.Link. | Element | Link |
className | Additional classNames to apply to the link. | string | - |
closeDropdownAriaButtonLabel | Aria-label for the dropdown button to describe the closing of the dropdown. | string | - |
dropdownButtonClassName | Additional classNames to apply to the dropdown button. | string | - |
dropdownClassName | Additional classNames to apply to the dropdown menu. | string | - |
dropdownLinkClassName | Additional classNames to apply to the dropdown links. | string | - |
dropdownLinks | Array of NavigationLink components to render in a dropdown. | [<Header.Link>] | - |
href | Hypertext Reference of the link. | string | - |
label | Label for the link. | string | - |
onDropdownButtonClick | Callback fired when the dropdown button is clicked. | function | - |
openDropdownAriaButtonLabel | Aria-label for the dropdown button to describe the opening of the dropdown. | string | - |
wrapperClassName | Additional classNames for the element wrapping the link. | string | - |
This component also accepts all nativea
element props.
Header.ActionBarSubItem
Properties
Property | Description | Values | Default value |
---|---|---|---|
iconLeft | Icon element (on the left side of the label) for the action bar item. | ReactNode | - |
iconRight | Icon element (on the right side of the label) for the action bar item. | ReactNode | - |
notificationBubbleContent | Content for the right aligned red notification bubble. | string | - |
notificationBubbleAriaLabel | Aria label for notification bubble. | string | - |
label | Label for the action bar item. | string JSX.Element | - |
isHeading | If heading style is used. | boolean | - |
bold | If bold. | boolean | - |
href | Hypertext Reference of the link. | string | - |
external | If external link. | boolean | - |
openInExternalDomainAriaLabel | The aria-label for opening link in an external domain. | string | - |
This component also accepts all nativea
element props.
Header.ActionBarSubItemGroup
Properties
Description | |
---|---|
Same properties as the Header.ActionBarSubItem. The component sets isHeading to true . |
This component also accepts all nativea
element props.
Header.LoginButton
Property | Description | Values | Default value |
---|---|---|---|
spinnerColor | Color of the loading spinner. | string | --header-spinner-color or --color-black-60 |
errorLabel | Label shown in the error notification. | string | - |
errorText | Text shown in the error notification. | string | - |
errorCloseAriaLabel | Aria-label of the close button in the error notification. | string | - |
errorPosition | Position of the error notification. | NotificationProps['position'] | top-right |
loggingInText | Screen reader text for the load indicator. | string | - |
id | The id attribute of the element. | string | - |
& Header.ActionBarItemButton properties | Extends properties of the Header.ActionBarItemButton. | - | - |
This component also accepts all nativea
element props.
Header.LogoutSubmenuButton
Properties
Property | Description | Values | Default value |
---|---|---|---|
spinnerColor | Color of the loading spinner. | string | --header-spinner-color or --color-black-60 |
errorLabel | Label shown in the error notification. | string | - |
errorText | Text shown in the error notification. | string | - |
errorCloseAriaLabel | Aria-label of the close button in the error notification. | string | - |
errorPosition | Position of the error notification. | NotificationProps['position'] | top-right |
loggingOutText | Screen reader text for the load indicator. | string | - |
id | The id attribute of the element. | string | - |
& Header.ActionBarItemButton properties | Extends properties of the Header.ActionBarItemButton. | - | - |
This component also accepts all nativea
element props.
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.
Description | |
---|---|
No properties to set. User data is picked from the Login Provider. |
This component also accepts all nativea
element props.
Packages
Package | Included | Storybook link | Source link |
---|---|---|---|
HDS React | Yes | View in Storybook | View source |
HDS Core | No | - | - |