Skip to main content

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: "/viestit/laheta" },
{ label: "Avaa chat", href: "/chat/" },
{ label: "Yhteystiedot", href: "/yhteystiedot/" }
]

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

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

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

// Listen for change events inside the navigation.
// This gets triggered whenever a link or button in nav is clicked.
header.addEventListener("duetChange", function(e) {
console.log("Change detected in nav:", e.detail)
var event = e.detail.originalEvent
var data = e.detail.data

// Set document language correctly when changing language
if (data.country) {
event.preventDefault()
document.documentElement.setAttribute("lang", 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: "/?lang=fi" },
{ label: "På Svenska", country: "sv", href: "/?lang=sv" },
{ label: "In English", country: "en", href: "/?lang=en" }
]

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

// Set label and href for user profile link
header.user = {
label: "William",
href: "/?userId=william"
}
</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: "/"
}
</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": "/" },
{ "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": "/?lang=fi" },
{ "label": "På Svenska", "country": "sv", "href": "/?lang=sv" },
{ "label": "In English", "country": "en", "href": "/?lang=en" }
]'

contact-items='[
{ "label": "Lähetä viesti", "href": "/viestit/laheta" },
{ "label": "Avaa chat", "href": "/chat/" },
{ "label": "Yhteystiedot", "href": "/yhteystiedot/" }
]'

session='{ "label": "Kirjaudu ulos", "href": "/?logout", "type": "logout" }'
user='{ "label": "Elina", "href": "/?userId=elina" }'>

</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. 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"; }>
duetChange 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"; }>

Methods #

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

Closes all dropdown menus in header when called.

Returns #

Type: Promise<void>

setFocus() => 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
"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.

Keyboard support #

Additional considerations #


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.



Tutorials

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

Tutorials

Abstract

Tutorials

Building Layouts

Tutorials

Using CLI Tools

Tutorials

Creating Custom Patterns

Tutorials

Server Side Rendering

Tutorials

Sharing Prototypes

Tutorials

Usage With Markdown

Tutorials

VS Code

Tutorials

Zeplin


Troubleshooting

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