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="/"
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: '#' }
]"
>

</duet-header>

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

// 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) {
var event = e.detail.originalEvent
event.preventDefault()
console.log("Change detected in nav:", e.detail)
})
</script>
Open in new window
<duet-header
current-href="/"
language="en"
items="[
{ label: 'Home', href: '/' },
{ label: 'Insurances', href: '#' },
{ label: 'Claims', href: '#' },
{ label: 'Investments', href: '#' },
{ label: 'Invoices', href: '#' },
{ label: 'Messages', href: '#', badge: true }
]"
>

</duet-header>

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

// 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>

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 -- 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. object undefined
contact contact Label of the contact menu. If empty, contact menu will be hidden. string ""
contactItems -- 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". string "fi"
languageItems -- 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 -- 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. object 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". string ""
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. object undefined

Events #

Event Description Type
duetChange Callback for when an user is about to navigate to another page. You can prevent the default browser functionality by calling event.detail.originalEvent.preventDefault() inside yout listener. Additionally, the passed data is available via event.detail.data. CustomEvent<any>

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

Server Side Rendering


Troubleshooting

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