Skip to main content
LocalTapiola Turva

Navigation ready

Navigation is used to display the logo, primary menu 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.

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

Examples

Open in new window
<duet-nav
  current-href="/"
  language="fi"
  region="Pääkaupunkiseutu"
  contact="Ota yhteyttä"
  skip-to-id="#content">
</duet-nav>

<script>
  var nav = document.querySelector("duet-nav")

  nav.items = [
    { label: "Etusivu", href: "/" },
    { label: "Vakuutukset", href: "/vakuutukset/" },
    { label: "Vahinkoasiat", href: "/vahinkoasiat/" },
    { label: "Säästöt ja sijoitukset", href: "/saastot-ja-sijoitukset/" },
    { label: "Laskut", href: "/laskut/", badge: true },
    { label: "Viestit", href: "/viestit/" }
  ]

  nav.contactItems = [
    { label: "Viestit", href: "/viestit/" },
    { label: "Chat", href: "/chat/" },
    { label: "Yhteystiedot", href: "/yhteystiedot/" }
  ]

  nav.languageItems = [
    { label: "Suomeksi", country: "fi", href: "/?lang=fi" },
    { label: "På Svenska", country: "sv", href: "/?lang=sv" },
    { label: "In English", country: "en", href: "/?lang=en" }
  ]

  nav.session = {
    label: "Kirjaudu ulos",
    href: "/?logout",
    type: "logout"
  }

  nav.user = {
    label: "Elina",
    href: "/?userId=elina"
  }

  nav.addEventListener("duetChange", function(ev) {
    var event = ev.detail.originalEvent
    var data = ev.detail.data
    event.preventDefault()
    console.log(data)
  })
</script>

Properties #

PropertyAttributeDescriptionTypeDefault
accessibleLabelaccessible-labelAccessible 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.objectundefined
contactcontactLabel 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. NOTE: If you’re performing a JavaScript action on click, you still need to pass at least "#" for href.any[]undefined
currentHrefcurrent-hrefThe href of the current page item that is shown as “active”.string"/"
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
languagelanguageThe 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. NOTE: If you’re performing a JavaScript action on click, you still need to pass at least "#" for href.any[]undefined
logoHreflogo-hrefURL that the logo link points to.string"/"
regionregionRegion 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.objectundefined
skipToIdskip-to-idThe 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""
themethemeTheme of the navigation. 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.objectundefined

Events #

EventDescriptionType
duetChangeCallback 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>

Dependencies #

Depends on #

Graph #

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

Integration

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