Header Ready

Header is used to display the logo, primary navigation and utility menus. It’s always visible at the top of the interface and can be configured to show just the logo and a back link.

Header contains your application’s primary navigation items that perform an action when clicked. Each action in the header should navigate to a href or trigger another action like a Modal overlay.

Examples

Open in new window

<duet-header
  language="fi"
  region="Pääkaupunkiseutu"
  contact="Ota yhteyttä"
  skip-to-id="#content"
  current-href="/">
</duet-header>

<script>
  // Select the above navigation component
  var header = document.querySelector("duet-header")

  // Set the main navigation items
  header.items = [
    { label: 'Etusivu', href: '/' },
    { label: 'Vakuutukset', href: '#' },
    { label: 'Vahinkoasiat', href: '#' },
    { label: 'Säästöt ja sijoitukset', href: '#' },
    { label: 'Laskut', href: '#', badge: true },
    { label: 'Viestit', href: '#' }
  ]

  // Set the contact menu items
  header.contactItems = [
    { label: "Lähetä viesti", href: "/work/duet-design-system/viestit/laheta" },
    { label: "Avaa chat", href: "/work/duet-design-system/chat/" },
    { label: "Yhteystiedot", href: "/work/duet-design-system/yhteystiedot/", external: true }
  ]

  // Set the language menu items
  header.languageItems = [
    { label: "Suomeksi", country: "fi", href: "/work/duet-design-system/?lang=fi" },
    { label: "På Svenska", country: "sv", href: "/work/duet-design-system/?lang=sv" },
    { label: "In English", country: "en", href: "/work/duet-design-system/?lang=en" }
  ]

  // Set label and href for session link
  header.session = {
    label: "Kirjaudu ulos",
    href: "/work/duet-design-system/?logout",
    type: "logout"
  }

  // Set label and href for user profile link
  header.user = {
    label: "Elina",
    href: "/work/duet-design-system/?userId=elina"
  }

  // Listen for language selection events
  header.addEventListener("duetLanguageSelect", function(e) {
    console.log("Language selection detected in nav:", e.detail)

    // Set document language correctly when changing language
    e.detail.originalEvent.preventDefault()
    document.documentElement.setAttribute("lang", e.detail.data.country)
  })
</script>

Open in new window

<duet-header current-href="/" language="en" class="duet-example-without-padding"></duet-header>

<script>
  // Select the above navigation component
  var header = document.querySelector("duet-header")

  // Set the main navigation items
  header.items = [
    { label: 'Home', href: '/' },
    { label: 'Insurances', href: '#' },
    { label: 'Claims', href: '#' },
    { label: 'Investments', href: '#' },
    { label: 'Invoices', href: '#' },
    { label: 'Messages', href: '#', badge: true }
  ]

  // Set the language menu items
  header.languageItems = [
    { label: "Suomeksi", country: "fi", href: "/work/duet-design-system/?lang=fi" },
    { label: "På Svenska", country: "sv", href: "/work/duet-design-system/?lang=sv" },
    { label: "In English", country: "en", href: "/work/duet-design-system/?lang=en" }
  ]

  // Set label and href for session link
  header.session = {
    label: "Log out",
    href: "/work/duet-design-system/?logout",
    type: "logout"
  }

  // Set label and href for user profile link
  header.user = {
    label: "William",
    href: "/work/duet-design-system/?userId=william"
  }
</script>

Open in new window

<duet-header current-href="/" language="sv" class="duet-example-without-padding"></duet-header>

<script>
  // Select the above navigation component
  var header = document.querySelector("duet-header")

  // Set the main navigation items
  header.items = [
    { label: 'Hem', href: '/' },
    { label: 'Försäkringar', href: '#' },
    { label: 'Besparingar och placeringar', href: '#' },
    { label: 'Skadeärenden', href: '#' },
    { label: 'Fakturor', href: '#' },
    { label: 'Meddelanden', href: '#', badge: true }
  ]

  // Set label and href for session link
  header.session = {
    label: "Logga ut",
    href: "/work/duet-design-system/?logout",
    type: "logout"
  }
</script>

Open in new window

<duet-header language="fi"></duet-header>

<script>
  // Select the above navigation component
  var header = document.querySelector("duet-header")

  header.logoHref = null

  // Set label and href for back link
  header.back = {
    label: "Takaisin",
    href: "/work/duet-design-system/"
  }
</script>

Open in new window

<duet-header language="fi"></duet-header>

<script>
  // Select the above navigation component
  var header = document.querySelector("duet-header")

  // Set label and href for session link
  header.session = {
    label: "Kirjaudu sisään",
    href: "/work/duet-design-system/?login",
    type: "login"
  }
</script>

Open in new window

<duet-header
  language="fi"
  region="Pääkaupunkiseutu"
  contact="Ota yhteyttä"
  skip-to-id="#content"
  current-href="/"
  items='[
    { "label": "Etusivu","href": "/work/duet-design-system/" },
    { "label": "Vakuutukset", "href": "#" },
    { "label": "Vahinkoasiat", "href": "#" },
    { "label": "Säästöt ja sijoitukset", "href": "#" },
    { "label": "Laskut", "href": "#", "badge": true },
    { "label": "Viestit", "href": "#" }
  ]'
  language-items='[
    { "label": "Suomeksi", "country": "fi", "href": "/work/duet-design-system/?lang=fi" },
    { "label": "På Svenska", "country": "sv", "href": "/work/duet-design-system/?lang=sv" },
    { "label": "In English", "country": "en", "href": "/work/duet-design-system/?lang=en" }
  ]'
  contact-items='[
    { "label": "Lähetä viesti", "href": "/work/duet-design-system/viestit/laheta" },
    { "label": "Avaa chat", "href": "/work/duet-design-system/chat/" },
    { "label": "Yhteystiedot", "href": "/work/duet-design-system/yhteystiedot/", "external": true }
  ]'
  session='{ "label": "Kirjaudu ulos", "href": "/work/duet-design-system/?logout", "type": "logout" }'
  user='{ "label": "Elina", "href": "/work/duet-design-system/?userId=elina" }'>
</duet-header>

Open in new window

<duet-header
  language="fi"
  skip-to-id="#content"
  current-href="/"
  language-items='[
    { "label": "Suomeksi", "country": "fi", "href": "/work/duet-design-system/?lang=fi" },
    { "label": "På Svenska", "country": "sv", "href": "/work/duet-design-system/?lang=sv" },
    { "label": "In English", "country": "en", "href": "/work/duet-design-system/?lang=en" }
  ]'
  session='{ "label": "Kirjaudu ulos", "href": "/work/duet-design-system/?logout", "type": "logout" }'
  >
  <duet-button
    slot="logo-utility"
    margin="none"
    size="small"
    color="color-secondary"
    variation="plain"
    icon="action-arrow-left-small"
    icon-size="small"
    url="/"
    >Poistu</duet-button
  >
</duet-header>

Properties #

Property	Attribute	Description	Type	Default
`accessibleLabel`	`accessible-label`	Accessible label that is shown for screen reader users in the mobile navigation toggle. Not visible for normal users.	`string`	`"Valikko"`
`back`	`back`	An object that includes mandatory "label" and "href" fields for the back link. Additionally, you can pass an "id" that is added as an HTML identifier for the element. If nothing is passed, back link won’t be shown. NOTE: The back link should be ONLY used in combination with language and logoHref props.	`any`	`undefined`
`contact`	`contact`	Label of the contact menu. If empty, contact menu will be hidden.	`string`	`""`
`contactItems`	`contact-items`	An array of items for the contact menu. "label" and "href" are mandatory. Additionally, you can pass an "id" that is added as an HTML identifier for the element, and pass an "external" flag if the link is to open in a new window.	`any`	`undefined`
`currentHref`	`current-href`	The href of the current page item that is shown as “active”.	`string`	`"/"`
`items`	`items`	An array of items for the main navigation. Items have to include mandatory "label" and "href" fields to work. Additionally, you can pass an "id" that is added as an HTML identifier for the element.	`any`	`undefined`
`language`	`language`	The currently active language. This setting also changes the logo to match the chosen language.	`"en" \| "fi" \| "sv"`	`"fi"`
`languageItems`	`language-items`	An array of items for the language menu. If empty, the language menu will be hidden. "label", "country" and "href" are mandatory. Additionally you can pass an "id" that is added as an HTML identifier for the element.	`any`	`undefined`
`logoHref`	`logo-href`	URL that the logo link points to.	`string`	`"/"`
`region`	`region`	Region that is shown next to the logo. If empty, region will be hidden.	`string`	`""`
`session`	`session`	An object that includes mandatory "label", "href" and "type" fields for the session login/logout link. Additionally, you can pass an "id" that is added as an HTML identifier for the element. If nothing is passed, this link won’t be shown.	`any`	`undefined`
`skipToId`	`skip-to-id`	The ID of the element where "skip to content" link should take the user. If empty, the functionality won’t be rendered in the DOM.	`string`	`""`
`theme`	`theme`	Theme of the header.	`"" \| "default" \| "turva"`	`""`
`user`	`user`	An object that includes mandatory "label" and "href" fields for the user profile link. Additionally, you can pass an "id" that is added as an HTML identifier for the element. If nothing is passed, user won’t be shown.	`any`	`undefined`

Events #

Event	Description	Type
`duetAnalytics`	Event raised when an items with an associated analytics ID is clicked. Analytics ID can be accessed via event.detail.analyticsId	`CustomEvent<{ analyticsId: string; component: "duet-header"; }>`
`duetBackClick`	Event raised when a user has clicked the back button. You can prevent the default browser functionality by calling event.detail.originalEvent.preventDefault() inside your listener. Additionally, the passed data is available via event.detail.data.	`CustomEvent<{ originalEvent: Event; data: DuetHeaderItem \| DuetHeaderLanguageItem \| DuetHeaderSession; component: "duet-header"; }>`
`duetChange`	[DEPRECATED] in favour of more specific events like duetLogoClick. Callback for when a user is about to navigate to another page. You can prevent the default browser functionality by calling event.detail.originalEvent.preventDefault() inside your listener. Additionally, the passed data is available via event.detail.data.	`CustomEvent<{ originalEvent: Event; data: DuetHeaderItem \| DuetHeaderLanguageItem \| DuetHeaderSession; component: "duet-header"; }>`
`duetContactClick`	Event raised when a user has clicked an option from the contact dropdown. You can prevent the default browser functionality by calling event.detail.originalEvent.preventDefault() inside your listener. Additionally, the passed data is available via event.detail.data.	`CustomEvent<{ originalEvent: Event; data: DuetHeaderItem \| DuetHeaderLanguageItem \| DuetHeaderSession; component: "duet-header"; }>`
`duetItemClick`	Event raised when a user has clicked a menu item. You can prevent the default browser functionality by calling event.detail.originalEvent.preventDefault() inside your listener. Additionally, the passed data is available via event.detail.data.	`CustomEvent<{ originalEvent: Event; data: DuetHeaderItem \| DuetHeaderLanguageItem \| DuetHeaderSession; component: "duet-header"; }>`
`duetLanguageSelect`	Event raised when a user has selected a language from the language dropdown. You can prevent the default browser functionality by calling event.detail.originalEvent.preventDefault() inside your listener. Additionally, the passed data is available via event.detail.data.	`CustomEvent<{ originalEvent: Event; data: DuetHeaderItem \| DuetHeaderLanguageItem \| DuetHeaderSession; component: "duet-header"; }>`
`duetLogoClick`	Event raised when a user has clicked the logo. You can prevent the default browser functionality by calling event.detail.originalEvent.preventDefault() inside your listener. Additionally, the passed data is available via event.detail.data.	`CustomEvent<{ originalEvent: Event; data: DuetHeaderItem \| DuetHeaderLanguageItem \| DuetHeaderSession; component: "duet-header"; }>`
`duetSessionClick`	Event for when a user has clicked the session link. You can prevent the default browser functionality by calling event.detail.originalEvent.preventDefault() inside your listener. Additionally, the passed data is available via event.detail.data.	`CustomEvent<{ originalEvent: Event; data: DuetHeaderItem \| DuetHeaderLanguageItem \| DuetHeaderSession; component: "duet-header"; }>`
`duetSkipClick`	Event raised when a user has clicked the "skip to content" button. You can prevent the default browser functionality by calling event.detail.originalEvent.preventDefault() inside your listener. Additionally, the passed data is available via event.detail.data.	`CustomEvent<{ originalEvent: Event; data: DuetHeaderItem \| DuetHeaderLanguageItem \| DuetHeaderSession; component: "duet-header"; }>`
`duetUserClick`	Event raised when a user has clicked the user link. You can prevent the default browser functionality by calling event.detail.originalEvent.preventDefault() inside your listener. Additionally, the passed data is available via event.detail.data.	`CustomEvent<{ originalEvent: Event; data: DuetHeaderItem \| DuetHeaderLanguageItem \| DuetHeaderSession; component: "duet-header"; }>`

Methods #

`closeMenus(moveFocusToButton?: boolean) => Promise<void>` #

Closes all dropdown menus in header when called.

Returns #

Type: Promise<void>

`setFocus(options?: FocusOptions) => Promise<void>` #

Sets focus on the specified duet-header. Use this method instead of the global
header.focus().

Returns #

Type: Promise<void>

Slots #

Slot	Description
`"logo-utility"`	A slot to place elements alongside the logo. This takes precedence over the region prop.
`"utility"`	A slot for utilities, such as a notification drawer

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

When to use #

Header is used to display the logo, primary navigation and utility menus.
Always visible at the top of the interface.

When not to use #

Inside HTML header element as Duet Header already uses it internally.

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.

Header uses HTML <header> element internally which is an HTML sectioning element that by default defines ARIA landmark with role banner.
Because of the above reason, header should never be wrapped inside another <header> element.
Header has a “skip to content” functionality which should be always utilized when the main navigation is visible. Use skipToId property to pass the ID of the element where the skip link should take the user.
accessibleLabel property can be used to change the accessible label that is shown for users of assistive technology in the mobile navigation toggle.
Each dropdown toggle button in the header uses aria-haspopup="listbox" in addition to aria-controls and aria-expanded attributes to convey the expand and collapse functionality to assistive technologies.
The dropdown menu use role="menu" and role="menuitem". This makes sure the menu items are correctly announced by assistive technologies.
When a language is chosen from a dropdown menu, the accessible name of the language menu toggle button is updated to include the selected language.
The dropdown menus provide hotkeys for changing and choosing an item from the menu.

Keyboard support #

Space, Enter: Opens the dropdown menu and moves focus to the first dropdown menu item.

Esc: Closes the dropdown menu and moves focus back to the “dropdown toggle” button.
Tab: Moves focus to the next element in the menu.
Shift + Tab: Same as above, but in reverse order.
Arrow up: Moves focus to the previous menu item.
Arrow down: Moves focus to the next menu item.
Arrow right: Moves focus to the next menu item.
Arrow left: Moves focus to the previous menu item.

Space, Enter: Does selection, closes the dropdown menu and moves focus to “dropdown toggle” button.

Additional considerations #

If the service is public and does not require logging in, clicking the logo in the header takes the user to the frontpage of lahitapiola.fi or turva.fi.
If the service requires signing in (self portal), the logo in the header takes the user to the home view of that specific service.
In case the user is in the of middle purchase or similar flow, clicking the logo should show a warning modal asking whether the user actually wants to leave the page as the data already entered will be lost. View an example.
“Log out” action in the header should always log out the user immediately and redirect to a “login page” or similar.

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.

Integration guidelines

Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.

Header Ready

Examples

Properties #

Events #

Methods #

`closeMenus(moveFocusToButton?: boolean) => Promise<void>` #

Returns #

`setFocus(options?: FocusOptions) => Promise<void>` #

Returns #

Slots #

Usage #

When to use #

When not to use #

Accessibility #

Keyboard support #

Additional considerations #

Integration

Tutorials

Abstract

Creating Custom Patterns

Server Side Rendering

VS Code

Zeplin

Usage With Markdown

Building Layouts

Using CLI Tools

Sharing Prototypes

Troubleshooting

Header Ready

Examples

Properties #

Events #

Methods #

closeMenus(moveFocusToButton?: boolean) => Promise<void> #

Returns #

setFocus(options?: FocusOptions) => Promise<void> #

Returns #

Slots #

Usage #

When to use #

When not to use #

Accessibility #

Keyboard support #

Dropdown toggle button #

Dropdown menu #

Dropdown menu item #

Additional considerations #

Integration

Tutorials

Abstract

Creating Custom Patterns

Server Side Rendering

VS Code

Zeplin

Usage With Markdown

Building Layouts

Using CLI Tools

Sharing Prototypes

Troubleshooting

`closeMenus(moveFocusToButton?: boolean) => Promise<void>` #

`setFocus(options?: FocusOptions) => Promise<void>` #