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

// Prevent default for everything else except skip to content functionality
if (data.href !== "#content") {
event.preventDefault()
}
})
</script>
Open in new window
<duet-header current-href="/" language="en"> </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")

// 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. Can be one of: "fi", "en", "sv". "en" or "fi" or "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. Can be one of: "default", "turva". "" or "default" or "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 or DuetHeaderLanguageItem or DuetHeaderSession; component: "duet-header"; }>

Methods #

refresh() => Promise<void> #

Forces render() update for duet-header. Use this when e.g. changing the global language.

Returns #

Type: Promise<void>

Dependencies #

Depends on #

Graph #

graph TD;
duet-header --> duet-button
duet-header --> duet-logo
duet-button --> duet-spinner
style duet-header fill:#f9f,stroke:#333,stroke-width:4px

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

Building Layouts

Tutorials

Using CLI Tools

Tutorials

Creating Custom Patterns

Tutorials

Server Side Rendering

Tutorials

Sharing Prototypes


Troubleshooting

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