Skip to content

Global Header13.10.5

This global header is designed to apply one navigation layout to all main digital customer facing applications within If.


$ npm i @if-design-system/global-header@13.10.5

Edit this section

Overview

The global header is a project that spans several years and has involved all major digital applications.

The goal is to introduce one seamless digital experience for our customers and users across applications through one component that would server the Open Pages and multiple of other application needs.

Edit this section

Usage

The If Design System will provide the styling needed to implement the new global header and basic navigation behaviors and animations.

It will also provide JavaScript implementation examples for showcasing behavioral elements within the navigation. Note that the JavaScript is a very crude and basic setup that is not meant to be copied, but needs to be adapted and perfected for each application.

Global controls

The global controls-section is a section that contains top level controls.

Desktop

A navigation to the different business areas, language selector (optional), sign in, sign out, and the application menu, depending on access to the application and if the user is signed in or not

Mobile

In the mobile view, the entire header is merged into one section, where this section contains the logo, shopping cart (optional), application menu and the rest of the global navigation for open pages.

Business areas

Business areas
  1. Private business area
  2. Company business area
  3. Large/Industrial business area

Language selector

Language selector
  1. The language selector is optional, but used whenever the current application has support for it

Login button

Log out button

Log out button
Log out button

Component elements

Note that the content in the demo examples (application specific menu links) is to showcase placement of elements and is not dictating each specific menu link setup for each application.

Some elements in the navigation are mandatory and some are optional – dependent of the application needs and existing functionality:

  • Sticky navigation – The navigation is shown at the top and disappears upon scroll downwards. If the user starts to scroll up again the navigation appears. This functionality/behavior is optional and mainly to be applied to applications that have long pages where the users scrolls to a larger extent.
  • Shopping cart – Placement of the cart is mandatory if the functionality is used within an application on site, however as noted – to show and use the element/icon for shopping cart is optional. If an application doesn't apply that function today, it can hide/omit the icon for shopping cart.
  • Sticky price bar – Should be attached beneath the main global navigation if used.
  • Search icon – Placement of the search icon and function is mandatory if the functionality is used in the application today. If not, then the icon can be hidden.
  • Language selector – Placement of the language selector icon/functionality is mandatory if the functionality exists and is used in the application today. If not, then the icon can be hidden.
  • Log out link to be shown both in top level and in the dropdown menu of the application

Sticky navigation

Thin line on the bottom of the navigation when the user has scrolled down and then starts to scroll up again.

No line under navigation when the user is at the top again.

The global header is not sticky by default, but only appears fixed to top when user scrolls up.

Application teams have the freedom to choose implementation / toggle on and off the fixed global header in different contexts and page layout types = make it sticky where it helps the user and use the normal header in other pages where focus on content is more important.

Implementation
<div class="if app">
  <header class="if global-header is-fixed">
    ....
  </header>
</div>
let c;
let currentScrollTop = 0;
const navbar = document.querySelector('.if.global-header.is-fixed');

window.addEventListener('scroll', () => {
  window.requestAnimationFrame(() => {
    var a = document.querySelector('html').scrollTop;
    var b = navbar.getBoundingClientRect().height;

    currentScrollTop = a;

    if (a === 0) {
      navbar.classList.remove('has-scrolled');
      navbar.classList.remove('has-scrolled-down');
    } else {
      navbar.classList.add('has-scrolled');
      if (c < currentScrollTop && a > b + b) {
        navbar.classList.add('has-scrolled-down');
      } else if (c > currentScrollTop && !(a <= b)) {
        setTimeout(() => {
          navbar.classList.remove('has-scrolled-down');
        }, 100);
      }
    }
    c = currentScrollTop;
  });
});
Edit this section

Open pages

The global header in Open Pages..

Open Pages is the non-application pages the users see on If.xx

States

The global header in Open pages has two "states", when the user is not logged in, and when the user is logged in.

Not logged in
Logged in

Anatomy

Open pages
  1. Global controls
  2. Active business area
  3. Inactive item
  4. Change language (optional)
  5. Log in (optional)
  6. Main navigation
  7. Logo
  8. Expandable section
  9. Search (optional)
  10. Shopping cart (optional)
Open pages logged in
  1. Log out button
  2. My pages menu
Expanded log in menu
  1. Login options
Open pages, expanded third level
  1. Show crosslink menus
  2. Crosslink
  3. Showcase
Open pages, expanded crosslinks
  1. Activated switch for crosslink menus
  2. Crosslink menu
Mobile header
  1. Logo
  2. Shopping cart (optional)
  3. Sign in button
  4. Mobile menu
Mobile menu
  1. Search
  2. First level
  3. Language switcher (optional)
Search

In mobile view, the search in the menu is always visible

Mobile menu
  1. Second level
  2. Third level
  3. Product icon
  4. Fourth level
Mobile header expanded login menu
  1. Login options
Mobile header logged in, expanded logged in menu

If logged in to for instance My Pages and jumping back to Open Pages – the "Mina Sidor"-link will open the dropdown with links to all portals.

Login page

Implementation

<div class="if app">
  <header class="if global-header">
    <a href="#content" class="if axe skip-to-content">Skip to content</a>
    <nav class="if primary">
      <div class="if mobile">
        <ul class="if mobile-menu-list">
          <li class="if mobile-menu-item logo-holder">
            <a href="/" class="if mobile-menu-action logo small"><span class="if axe sr-only">Home</span></a>
          </li>
          <li class="if mobile-menu-item shopping-cart-holder">
            <a href="/my-pages.html" class="if mobile-menu-action shopping-cart">Varukorg</a>
          </li>
          <li class="if mobile-menu-item login-holder">
            <button type="button" class="if mobile-menu-action button login">Logga in</button>
            <div class="if accordion-menu">
              <ul class="if">
                <li class="if"><a href="/index-logged-in.html" class="if">Privat</a></li>
                <li class="if"><a href="/index-logged-in.html" class="if">Företag</a></li>
                <li class="if"><a href="/index-logged-in.html" class="if">Stora företag</a></li>
                <li class="if"><a href="/index-logged-in.html" class="if">Mäklare</a></li>
              </ul>
            </div>
          </li>
          <li class="if mobile-menu-item mobile-menu-holder">
            <button type="button" class="if mobile-menu-action button mobile-menu">Meny</button>
            <div class="if accordion-menu">
              <div class="if mobile-search">
                <form class="if">
                  <input
                    type="search"
                    placeholder="Sök If.se"
                    class="if input-field js-if-mobile-search"
                    name="if-mobile-search"
                  />
                  <label for="if-mobile-search" class="if"><span class="if axe sr-only">Search If</span></label>
                </form>
              </div>
              <ul class="if">
                <li class="if is-parent">
                  <button type="button" class="if">
                    Privat
                  </button>
                  <div class="if accordion-menu">
                    <ul class="if">
                      <li class="if is-parent">
                        <a href="/" class="if">Försäkringar</a>
                        <div class="if accordion-menu">
                          <ul class="if">
                            <li class="if is-parent">
                              <a href="/" class="if"><span aria-hidden="true" class="if icon ui house"></span>Hem</a>
                              <div class="if accordion-menu">
                                <ul class="if">
                                  <li class="if"><a href="/adasdsad" class="if">Villaförsäkring</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Hyresrättförsäkring</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Bostadsrättförsäkring</a></li>
                                  <li class="if">
                                    <a href="/adasdsad" class="if"
                                      >Försäkring vid studier eller praktik utomlandsförsäkring</a
                                    >
                                  </li>
                                  <li class="if"><a href="/adasdsad" class="if">Fritidshusförsäkring</a></li>
                                </ul>
                              </div>
                            </li>
                            <li class="if is-parent">
                              <a href="/" class="if"
                                ><span aria-hidden="true" class="if icon product car"></span>Fordon</a
                              >
                              <div class="if accordion-menu">
                                <ul class="if">
                                  <li class="if"><a href="/adasdsad" class="if">Bilförsäkring</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">MC-försäkring</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Mopedförsäkring</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Husbildsförsäkring</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Släpvagnsförsäkring</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Visa fler...</a></li>
                                </ul>
                              </div>
                            </li>
                            <li class="if is-parent">
                              <a href="/" class="if"
                                ><span aria-hidden="true" class="if icon product paw"></span>Djur</a
                              >
                              <div class="if accordion-menu">
                                <ul class="if">
                                  <li class="if"><a href="/adasdsad" class="if">Hundförsäkring</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Kattförsäkring</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Hästförsäkring</a></li>
                                </ul>
                              </div>
                            </li>
                            <li class="if is-parent">
                              <a href="/" class="if"
                                ><span aria-hidden="true" class="if icon product bag"></span>Resa</a
                              >
                              <div class="if accordion-menu">
                                <ul class="if">
                                  <li class="if"><a href="/adasdsad" class="if">Reseförsäkring</a></li>
                                </ul>
                              </div>
                            </li>
                            <li class="if is-parent">
                              <a href="/" class="if"
                                ><span aria-hidden="true" class="if icon symbol single-body"></span>Person</a
                              >
                              <div class="if accordion-menu">
                                <ul class="if">
                                  <li class="if"><a href="/adasdsad" class="if">Personförsäkringar</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Barnförsäkringar</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Gravidförsäkringar</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Livförsäkring</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Olycksfallsförsäkring</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Visa fler..</a></li>
                                </ul>
                              </div>
                            </li>
                            <li class="if is-parent">
                              <a href="/" class="if"
                                ><span aria-hidden="true" class="if icon product boat"></span>Boat</a
                              >
                              <div class="if accordion-menu">
                                <ul class="if">
                                  <li class="if"><a href="/adasdsad" class="if">Båtförsäkring</a></li>
                                </ul>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </li>
                      <li class="if"><a href="/" class="if">Skador</a></li>
                      <li class="if"><a href="/" class="if">Kundservice</a></li>
                    </ul>
                  </div>
                </li>
                <li class="if">
                  <a href="/" class="if">Företag</a>
                </li>
                <li class="if">
                  <a href="/" class="if">Stora Företag</a>
                </li>
              </ul>
              <div class="if mobile-language">
                <ul class="if mobile-language-list">
                  <li class="if mobile-language-item">
                    <button type="button" class="if mobile-language-action" data-language="nb">NB</button>
                  </li>
                  <li class="if mobile-language-item">
                    <button type="button" class="if mobile-language-action" data-language="da">DA</button>
                  </li>
                  <li class="if mobile-language-item is-active">
                    <button type="button" class="if mobile-language-action" data-language="sv">SV</button>
                  </li>
                  <li class="if mobile-language-item">
                    <button type="button" class="if mobile-language-action" data-language="fi">FI</button>
                  </li>
                  <li class="if mobile-language-item">
                    <button type="button" class="if mobile-language-action" data-language="en">EN</button>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="if desktop container">
        <ul class="if desktop-menu-list">
          <li class="if desktop-menu-item">
            <button type="button" class="if desktop-menu-action button is-active">Privat</button>
          </li>
          <li class="if desktop-menu-item">
            <button type="button" class="if desktop-menu-action button desktop-menu-action">Företag</button>
          </li>
          <li class="if desktop-menu-item">
            <button type="button" class="if desktop-menu-action button desktop-menu-action">Stora företag</button>
          </li>
          <li class="if  desktop-menu-item change-language-holder is-parent">
            <button type="button" class="if desktop-menu-action change-language">SV</button>
            <div class="if dropdown-menu top" style="">
              <ul class="if">
                <li class="if">
                  <button type="button" class="if" data-language="nb">Norsk bokmål</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="da">Dansk</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="sv">Svenska</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="fi">Suomen kieli</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="kl">Kalaallit oqaasii</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="en">English</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="lv">Latviešu valoda</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="lt">Lietuvių kalba</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="et">Eesti keel</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="ru">Pусский язык</button>
                </li>
              </ul>
            </div>
          </li>
          <li class="if desktop-menu-item login-holder">
            <button type="button" class="if desktop-menu-action button login">Logga in</button>
            <div class="if dropdown-menu">
              <ul class="if">
                <li class="if"><a href="/index-logged-in.html" class="if">Privat</a></li>
                <li class="if"><a href="/my-business.html" class="if">Företag</a></li>
                <li class="if"><a href="/index-logged-in.html" class="if">Stora företag</a></li>
                <li class="if"><a href="/index-logged-in.html" class="if">Mäklare</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </nav>
    <nav class="if secondary">
      <div class="if desktop container">
        <ul class="if desktop-menu-list">
          <li class="if desktop-menu-item logo-holder">
            <a href="/" class="if desktop-menu-action logo small"><span class="if axe sr-only">Home</span></a>
          </li>
          <li class="if desktop-menu-item is-parent">
            <button type="button" class="if desktop-menu-action">Försäkringar</button>

            <div class="if tertiary">
              <div class="if container">
                <div class="if holder">
                  <div class="if description">
                    <strong class="if">Försäkringskategorier</strong>&nbsp;<button
                      type="button"
                      class="if toggle-all js-toggle-insurance-sub-categories"
                    >
                      Visa alla försäkringar
                    </button>
                  </div>
                  <ul class="if shortcuts">
                    <li class="if">
                      <a href="/" class="if shortcut icon ui product symbol house">Hem</a>
                      <div class="if dropdown-menu">
                        <ul class="if">
                          <li class="if"><a href="/adasdsad" class="if">Villaförsäkring</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Hyresrättförsäkring</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Bostadsrättförsäkring</a></li>
                          <li class="if">
                            <a href="/adasdsad" class="if">Försäkring vid studier eller praktik utomlandsförsäkring</a>
                          </li>
                          <li class="if"><a href="/adasdsad" class="if">Fritidshusförsäkring</a></li>
                        </ul>
                      </div>
                    </li>
                    <li class="if">
                      <a href="/" class="if shortcut icon ui product symbol vehicles">Fordon</a>
                      <div class="if dropdown-menu">
                        <ul class="if">
                          <li class="if"><a href="/adasdsad" class="if">Bilförsäkring</a></li>
                          <li class="if"><a href="/adasdsad" class="if">MC-försäkring</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Mopedförsäkring</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Husbildsförsäkring</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Släpvagnsförsäkring</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Visa fler...</a></li>
                        </ul>
                      </div>
                    </li>
                    <li class="if">
                      <a href="/" class="if shortcut icon ui product symbol paw">Djur</a>
                      <div class="if dropdown-menu">
                        <ul class="if">
                          <li class="if"><a href="/adasdsad" class="if">Hundförsäkring</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Kattförsäkring</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Hästförsäkring</a></li>
                        </ul>
                      </div>
                    </li>
                    <li class="if">
                      <a href="/" class="if shortcut icon ui product symbol bag">Resa</a>
                      <div class="if dropdown-menu">
                        <ul class="if">
                          <li class="if"><a href="/adasdsad" class="if">Reseförsäkring</a></li>
                        </ul>
                      </div>
                    </li>
                    <li class="if">
                      <a href="/" class="if shortcut icon ui product symbol single-body">Person</a>
                      <div class="if dropdown-menu">
                        <ul class="if">
                          <li class="if"><a href="/adasdsad" class="if">Personförsäkringar</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Barnförsäkringar</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Gravidförsäkringar</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Livförsäkring</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Olycksfallsförsäkring</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Visa fler..</a></li>
                        </ul>
                      </div>
                    </li>
                    <li class="if">
                      <a href="/" class="if shortcut icon ui product symbol boat">Boat</a>
                      <div class="if dropdown-menu">
                        <ul class="if">
                          <li class="if"><a href="/adasdsad" class="if">Båtförsäkring</a></li>
                        </ul>
                      </div>
                    </li>
                  </ul>
                </div>
                <div class="if holder">
                  <div class="if showcase">
                    <div class="if description">
                      <strong class="if">Populära försäkringar</strong>
                    </div>

                    <ul class="if">
                      <li class="if"><a class="if" href="/asd">Bilförsäkring</a></li>
                      <li class="if"><a class="if" href="/asd">Reseförsäkring</a></li>
                      <li class="if"><a class="if" href="/asd">Gravidförsäkring</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="if desktop-menu-item">
            <a href="/my-pages.html" class="if desktop-menu-action">Vid skada</a>
          </li>
          <li class="if desktop-menu-item">
            <a href="/my-pages.html" class="if desktop-menu-action">Kundservice</a>
          </li>
        </ul>
        <ul class="if global-menu-list global">
          <li class="if global-menu-item"><a href="/my-pages.html" class="if global-menu-action search">Sök</a></li>
          <li class="if global-menu-item shopping-cart-holder">
            <a href="/my-pages.html" class="if global-menu-action shopping-cart">Varukorg</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <main class="if main">
    <section class="if hero">
      <div class="if container">
        <div class="if content no-image">
          <h1 class="if heading largest">Open pages</h1>
        </div>
      </div>
    </section>
  </main>
</div>

Logged in

<div class="if app">
  <header class="if global-header">
    <a href="#content" class="if axe skip-to-content">Skip to content</a>
    <nav class="if primary">
      <div class="if mobile">
        <ul class="if mobile-menu-list">
          <li class="if mobile-menu-item logo-holder">
            <a href="/" class="if mobile-menu-action logo small"><span class="if axe sr-only">Home</span></a>
          </li>
          <li class="if mobile-menu-item shopping-cart-holder">
            <a href="/my-pages.html" class="if mobile-menu-action shopping-cart">Varukorg (2)</a>
          </li>
          <li class="if mobile-menu-item mypages-holder">
            <button type="button" class="if mobile-menu-action button mypages">
              Mina sidor<span class="if notice top-right" role="status" aria-live="polite">1</span>
            </button>
            <div class="if accordion-menu">
              <ul class="if">
                <li class="if is-parent right">
                  <a href="/my-pages.html" class="if"
                    ><span aria-hidden="true" class="if icon symbol parent"></span>Elisabeth</a
                  >
                  <div class="if accordion-menu">
                    <ul class="if">
                      <li class="if"><a href="/my-pages.html" class="if is-active">Elisabeth</a></li>
                      <li class="if"><a href="/my-pages.html" class="if">Per</a></li>
                      <li class="if"><a href="/my-pages.html" class="if">Anna</a></li>
                    </ul>
                  </div>
                </li>
                <li class="if is-parent right">
                  <a href="/my-pages.html" class="if"
                    ><span aria-hidden="true" class="if icon ui cog"></span>Settings</a
                  >
                  <div class="if accordion-menu">
                    <ul class="if">
                      <li class="if"><a href="/my-pages.html" class="if">User settings</a></li>
                      <li class="if"><a href="/my-pages.html" class="if">Broker settings</a></li>
                      <li class="if"><a href="/my-pages.html" class="if">Company settings</a></li>
                    </ul>
                  </div>
                </li>
                <li class="if"><a href="/my-pages.html" class="if">My Pages</a></li>
                <li class="if"><a href="/my-pages.html" class="if">My Business</a></li>
                <li class="if"><a href="/my-pages.html" class="if">Industrial If Login</a></li>
                <li class="if"><a href="/my-pages.html" class="if">Employee insurances</a></li>
                <li class="if"><a href="/my-pages.html" class="if">Broker</a></li>
                <li class="if">
                  <a href="/my-pages.html" class="if"
                    ><span aria-hidden="true" class="if icon ui log-out"></span>Logga ut</a
                  >
                </li>
              </ul>
            </div>
          </li>
          <li class="if mobile-menu-item mobile-menu-holder">
            <button type="button" class="if mobile-menu-action button mobile-menu">Meny</button>
            <div class="if accordion-menu">
              <div class="if mobile-search">
                <form class="if">
                  <input
                    type="search"
                    placeholder="Sök If.se"
                    class="if input-field js-if-mobile-search"
                    name="if-mobile-search"
                  />
                  <label for="if-mobile-search" class="if"><span class="if axe sr-only">Search If</span></label>
                </form>
              </div>
              <ul class="if">
                <li class="if is-parent">
                  <button type="button" class="if">Level 1</button>
                  <div class="if accordion-menu">
                    <ul class="if">
                      <li class="if is-parent">
                        <button type="button" class="if">
                          <span aria-hidden="true" class="if icon ui house"></span>Level 2
                        </button>
                        <div class="if accordion-menu">
                          <ul class="if">
                            <li class="if is-parent">
                              <button type="button" class="if">Level 3</button>
                              <div class="if accordion-menu">
                                <ul class="if">
                                  <li class="if"><a href="/my-pages.html" class="if">Level 4</a></li>
                                  <li class="if"><a href="/my-pages.html" class="if">Level 4</a></li>
                                  <li class="if"><a href="/my-pages.html" class="if">Level 4</a></li>
                                </ul>
                              </div>
                            </li>
                            <li class="if"><a href="/my-pages.html" class="if">Level 3</a></li>
                            <li class="if"><a href="/my-pages.html" class="if">Level 3</a></li>
                          </ul>
                        </div>
                      </li>
                      <li class="if"><a href="/my-pages.html" class="if">Level 2</a></li>
                      <li class="if"><a href="/my-pages.html" class="if">Level 2</a></li>
                    </ul>
                  </div>
                </li>
                <li class="if"><a href="/my-pages.html" class="if">Level 1</a></li>
                <li class="if"><a href="/my-pages.html" class="if">Level 1</a></li>
              </ul>
              <div class="if mobile-language">
                <ul class="if mobile-language-list">
                  <li class="if mobile-language-item">
                    <button type="button" class="if mobile-language-action" data-language="nb">NB</button>
                  </li>
                  <li class="if mobile-language-item">
                    <button type="button" class="if mobile-language-action" data-language="da">DA</button>
                  </li>
                  <li class="if mobile-language-item is-active">
                    <button type="button" class="if mobile-language-action" data-language="sv">SV</button>
                  </li>
                  <li class="if mobile-language-item">
                    <button type="button" class="if mobile-language-action" data-language="fi">FI</button>
                  </li>
                  <li class="if mobile-language-item">
                    <button type="button" class="if mobile-language-action" data-language="en">EN</button>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="if desktop container">
        <ul class="if desktop-menu-list">
          <li class="if desktop-menu-item">
            <button type="button" class="if desktop-menu-action button is-active">Privat</button>
          </li>
          <li class="if desktop-menu-item">
            <button type="button" class="if desktop-menu-action button desktop-menu-action">Företag</button>
          </li>
          <li class="if desktop-menu-item">
            <button type="button" class="if desktop-menu-action button desktop-menu-action">Stora företag</button>
          </li>
          <li class="if  desktop-menu-item change-language-holder is-parent">
            <button type="button" class="if desktop-menu-action change-language">SV</button>
            <div class="if dropdown-menu top" style="">
              <ul class="if">
                <li class="if">
                  <button type="button" class="if" data-language="nb">Norsk bokmål</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="da">Dansk</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="sv">Svenska</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="fi">Suomen kieli</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="kl">Kalaallit oqaasii</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="en">English</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="lv">Latviešu valoda</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="lt">Lietuvių kalba</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="et">Eesti keel</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="ru">Pусский язык</button>
                </li>
              </ul>
            </div>
          </li>
          <li class="if desktop-menu-item logout-holder">
            <button class="if desktop-menu-action button logout" type="button">Logga ut</button>
          </li>
          <li class="if desktop-menu-item mypages-holder is-parent">
            <a href="/my-pages.html" class="if desktop-menu-action button mypages">
              Mina sidor
            </a>
          </li>
        </ul>
      </div>
    </nav>
    <nav class="if secondary">
      <div class="if desktop container">
        <ul class="if desktop-menu-list">
          <li class="if desktop-menu-item logo-holder">
            <a href="/" class="if desktop-menu-action logo small"><span class="if axe sr-only">Home</span></a>
          </li>
          <li class="if desktop-menu-item is-parent">
            <button type="button" class="if desktop-menu-action">Försäkringar</button>

            <div class="if tertiary">
              <div class="if container">
                <div class="if holder">
                  <div class="if description">
                    <strong class="if">Försäkringskategorier</strong>&nbsp;<button
                      type="button"
                      class="if toggle-all js-toggle-insurance-sub-categories"
                    >
                      Visa alla försäkringar
                    </button>
                  </div>
                  <ul class="if shortcuts">
                    <li class="if">
                      <a href="/" class="if shortcut icon ui product symbol house">Hem</a>
                      <div class="if dropdown-menu">
                        <ul class="if">
                          <li class="if"><a href="/adasdsad" class="if">Villaförsäkring</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Hyresrättförsäkring</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Bostadsrättförsäkring</a></li>
                          <li class="if">
                            <a href="/adasdsad" class="if">Försäkring vid studier eller praktik utomlandsförsäkring</a>
                          </li>
                          <li class="if"><a href="/adasdsad" class="if">Fritidshusförsäkring</a></li>
                        </ul>
                      </div>
                    </li>
                    <li class="if">
                      <a href="/" class="if shortcut icon ui product symbol vehicles">Fordon</a>
                      <div class="if dropdown-menu">
                        <ul class="if">
                          <li class="if"><a href="/adasdsad" class="if">Bilförsäkring</a></li>
                          <li class="if"><a href="/adasdsad" class="if">MC-försäkring</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Mopedförsäkring</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Husbildsförsäkring</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Släpvagnsförsäkring</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Visa fler...</a></li>
                        </ul>
                      </div>
                    </li>
                    <li class="if">
                      <a href="/" class="if shortcut icon ui product symbol paw">Djur</a>
                      <div class="if dropdown-menu">
                        <ul class="if">
                          <li class="if"><a href="/adasdsad" class="if">Hundförsäkring</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Kattförsäkring</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Hästförsäkring</a></li>
                        </ul>
                      </div>
                    </li>
                    <li class="if">
                      <a href="/" class="if shortcut icon ui product symbol bag">Resa</a>
                      <div class="if dropdown-menu">
                        <ul class="if">
                          <li class="if"><a href="/adasdsad" class="if">Reseförsäkring</a></li>
                        </ul>
                      </div>
                    </li>
                    <li class="if">
                      <a href="/" class="if shortcut icon ui product symbol single-body">Person</a>
                      <div class="if dropdown-menu">
                        <ul class="if">
                          <li class="if"><a href="/adasdsad" class="if">Personförsäkringar</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Barnförsäkringar</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Gravidförsäkringar</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Livförsäkring</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Olycksfallsförsäkring</a></li>
                          <li class="if"><a href="/adasdsad" class="if">Visa fler..</a></li>
                        </ul>
                      </div>
                    </li>
                    <li class="if">
                      <a href="/" class="if shortcut icon ui product symbol boat">Boat</a>
                      <div class="if dropdown-menu">
                        <ul class="if">
                          <li class="if"><a href="/adasdsad" class="if">Båtförsäkring</a></li>
                        </ul>
                      </div>
                    </li>
                  </ul>
                </div>
                <div class="if holder">
                  <div class="if showcase">
                    <div class="if description">
                      <strong class="if">Populära försäkringar</strong>
                    </div>

                    <ul class="if">
                      <li class="if"><a class="if" href="/asd">Bilförsäkring</a></li>
                      <li class="if"><a class="if" href="/asd">Reseförsäkring</a></li>
                      <li class="if"><a class="if" href="/asd">Gravidförsäkring</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="if desktop-menu-item">
            <a href="/my-pages.html" class="if desktop-menu-action">Vid skada</a>
          </li>
          <li class="if desktop-menu-item">
            <a href="/my-pages.html" class="if desktop-menu-action">Kundservice</a>
          </li>
        </ul>
        <ul class="if global-menu-list global">
          <li class="if global-menu-item"><a href="/my-pages.html" class="if global-menu-action search">Sök</a></li>
          <li class="if global-menu-item shopping-cart-holder">
            <a href="/my-pages.html" class="if global-menu-action shopping-cart">Varukorg (2)</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <main class="if main">
    <section class="if hero">
      <div class="if container">
        <div class="if content no-image">
          <h1 class="if heading largest">Open pages logged in</h1>
        </div>
      </div>
    </section>
  </main>
</div>

JavaScript implementation example

var globalHeaders = document.querySelectorAll('.if.global-header');
Array.prototype.slice.call(globalHeaders).forEach(function(header) {
  var headerMenuParents = header.querySelectorAll(
    '.if.secondary .if.desktop-menu-list > li.is-parent > .if.desktop-menu-action'
  );
  var toggleInsuranceSubCategories = header.querySelector('.js-toggle-insurance-sub-categories');

  var loginButtons = header.querySelectorAll('.if.login');
  var changeLanguageButtons = header.querySelectorAll('.if.change-language');
  var mobileMenuButtons = header.querySelectorAll('.if.mobile-menu');
  var myPagesMenuButtons = header.querySelectorAll('.if.mypages');

  var openMenu = function(action) {
    if (!action) return;
    var parent = action.parentElement;
    if (!parent) return;
    var menu = parent.querySelector('.if[class*="menu"]:not(button)');
    var list = parent.querySelector('.if[class*="menu"]:not(button) > ul.if');
    action.setAttribute('aria-expanded', true);
    parent.classList.add('is-open');
    if (menu) {
      menu.classList.add('is-open');
    }
    if (list) {
      list.classList.add('is-open');
    }
  };

  var closeMenu = function(action) {
    if (!action) return;
    var parent = action.parentElement;
    if (!parent) return;
    var menu = parent.querySelector('.if[class*="menu"]:not(button)');
    var list = parent.querySelector('.if[class*="menu"]:not(button) > ul.if');
    action.setAttribute('aria-expanded', false);
    parent.classList.remove('is-open');
    if (menu) {
      menu.classList.remove('is-open');
    }
    if (list) {
      list.classList.remove('is-open');
    }
  };

  var toggleMenu = function(action) {
    if (!action) return;
    var parent = action.parentElement;
    if (!parent) return;
    if (parent.classList.contains('is-open')) {
      closeMenu(action);
    } else {
      openMenu(action);
    }
  };

  Array.prototype.slice.call(mobileMenuButtons).forEach(function(button) {
    button.addEventListener('click', function(e) {
      toggleMenu(button);
      Array.prototype.slice.call(myPagesMenuButtons).forEach(function(button) {
        closeMenu(button);
      });
      Array.prototype.slice.call(changeLanguageButtons).forEach(function(button) {
        closeMenu(button);
      });
      Array.prototype.slice.call(loginButtons).forEach(function(button) {
        closeMenu(button);
      });
    });
  });

  Array.prototype.slice.call(myPagesMenuButtons).forEach(function(button) {
    button.addEventListener('click', function(e) {
      toggleMenu(button);

      Array.prototype.slice.call(mobileMenuButtons).forEach(function(button) {
        closeMenu(button);
      });
      Array.prototype.slice.call(changeLanguageButtons).forEach(function(button) {
        closeMenu(button);
      });
      Array.prototype.slice.call(loginButtons).forEach(function(button) {
        closeMenu(button);
      });
    });
  });

  Array.prototype.slice.call(changeLanguageButtons).forEach(function(button) {
    button.addEventListener('click', function(e) {
      toggleMenu(button);
    });
    Array.prototype.slice.call(myPagesMenuButtons).forEach(function(button) {
      closeMenu(button);
    });
    Array.prototype.slice.call(mobileMenuButtons).forEach(function(button) {
      closeMenu(button);
    });
    Array.prototype.slice.call(loginButtons).forEach(function(button) {
      closeMenu(button);
    });
  });
  Array.prototype.slice.call(loginButtons).forEach(function(button) {
    button.addEventListener('click', function(e) {
      toggleMenu(button);

      Array.prototype.slice.call(myPagesMenuButtons).forEach(function(button) {
        closeMenu(button);
      });
      Array.prototype.slice.call(mobileMenuButtons).forEach(function(button) {
        closeMenu(button);
      });
      Array.prototype.slice.call(changeLanguageButtons).forEach(function(button) {
        closeMenu(button);
      });
    });
  });

  if (toggleInsuranceSubCategories) {
    toggleInsuranceSubCategories.addEventListener('click', function(e) {
      var insuranceCrosslinks = header.querySelector('.if.crosslinks');
      if (!insuranceCrosslinks) {
        return;
      }
      var insuranceSubMenus = insuranceCrosslinks.querySelectorAll('.if[class*="menu"]:not(button)');
      if (insuranceCrosslinks.classList.contains('is-open')) {
        toggleInsuranceSubCategories.textContent = 'Visa alla försäkringar';
        insuranceCrosslinks.classList.remove('is-open');
      } else {
        insuranceCrosslinks.classList.add('is-open');
        toggleInsuranceSubCategories.textContent = 'Visa färre';
      }
      Array.prototype.slice.call(insuranceSubMenus).forEach(function(subMenu) {
        subMenu.classList.toggle('is-open');
      });
      setTimeout(function() {
        fixTertiarySize();
      }, 200);
    });
  }

  Array.prototype.slice.call(headerMenuParents).forEach(function(menuButton) {
    menuButton.addEventListener('click', function(e) {
      var parentElement = menuButton.parentElement;
      var subMenu = parentElement.querySelector('.tertiary');
      if (parentElement.classList.contains('is-active')) {
        menuButton.setAttribute('aria-expanded', false);
        parentElement.classList.remove('is-active');
        subMenu.classList.remove('is-open');
      } else {
        menuButton.setAttribute('aria-expanded', true);
        parentElement.classList.add('is-active');
        subMenu.classList.add('is-open');
      }
    });
  });
});

var forLastExec,
  delay = 100, // delay between calls
  throttled = false, // are we currently throttled?
  calls = 0;

var fixTertiarySize = function() {
  var globalHeaderSubMenus = document.querySelectorAll('.if.global-header .tertiary');
  Array.prototype.slice.call(globalHeaderSubMenus).forEach(function(subMenu) {
    subMenu.style.width = document.body.clientWidth + 'px';
  });
};

// window.resize event listener
window.addEventListener('resize', function() {
  // only run if we're not throttled
  if (!throttled) {
    // actual callback action
    fixTertiarySize();
    // we're throttled!
    throttled = true;
    // set a timeout to un-throttle
    setTimeout(function() {
      throttled = false;
    }, delay);
  }
  clearTimeout(forLastExec);
  forLastExec = setTimeout(fixTertiarySize, delay);
});

fixTertiarySize();
var accordionMenus = document.querySelectorAll('.if.accordion-menu');
Array.prototype.slice.call(accordionMenus).forEach(function(menu) {
  var expandableMenuActions = menu.querySelectorAll('li.is-parent > a, li.is-parent > button');

  Array.prototype.slice.call(expandableMenuActions).forEach(function(action) {
    action.addEventListener('click', function(e) {
      e.preventDefault();

      if (action.parentElement.classList.contains('is-active')) {
        action.parentElement.classList.remove('is-active');
        action.setAttribute('aria-expanded', false);
        var expandedMenuItems = action.parentElement.querySelectorAll('li.is-parent.is-active');
        Array.prototype.slice.call(expandedMenuItems).forEach(function(item) {
          item.classList.remove('is-active');
        });
        var expandedSubMenus = action.parentElement.querySelectorAll('.is-open');
        Array.prototype.slice.call(expandedSubMenus).forEach(function(menu) {
          menu.classList.remove('is-open');
        });
      } else {
        action.setAttribute('aria-expanded', true);
        action.parentElement.classList.add('is-active');
        action.parentElement.querySelector('.if.accordion-menu').classList.add('is-open');
        action.parentElement.querySelector('.if.accordion-menu > ul').classList.add('is-open');
      }
    });
  });
});
Edit this section

My pages

The global header in My Pages..

My Pages is the pages for the users personal insurances.

Anatomy

My pages global header
  1. Back to start
Back to start element

The back to start element will link to corresponding business area start page. Meaning My Pages link to if.no/privat, My Business links to if.no/bedrift etc.

Mobile header in My Pages

  1. My Pages menu element

My Pages menu element

The menu element is marked active when you are in the My Pages domain.

My pages, expanded my pages menu

Open pages menu in My Pages

  1. Private sub menu

Private sub menu

The private sub menu is default open when the user is in the My Pages domain

Implementation

<div class="if app">
  <header class="if global-header">
    <a href="#content" class="if axe skip-to-content">Skip to content</a>
    <nav class="if primary">
      <div class="if mobile">
        <ul class="if mobile-menu-list">
          <li class="if mobile-menu-item logo-holder">
            <a href="/" class="if mobile-menu-action logo small"><span class="if axe sr-only">Home</span></a>
          </li>
          <li class="if mobile-menu-item shopping-cart-holder">
            <a href="/" class="if mobile-menu-action shopping-cart">Varukorg</a>
          </li>
          <li class="if mobile-menu-item mypages-holder is-active">
            <button type="button" class="if mobile-menu-action button mypages">
              Mina sidor<span class="if notice top-right" role="status" aria-live="polite">1</span>
            </button>
            <div class="if accordion-menu">
              <ul class="if">
                <li class="if is-parent right">
                  <a href="/my-pages.html" class="if"
                    ><span aria-hidden="true" class="if icon symbol parent"></span>Elisabeth</a
                  >
                  <div class="if accordion-menu">
                    <ul class="if">
                      <li class="if"><a href="/my-pages.html" class="if is-active">Elisabeth</a></li>
                      <li class="if"><a href="/my-pages.html" class="if">Per</a></li>
                      <li class="if"><a href="/my-pages.html" class="if">Anna</a></li>
                    </ul>
                  </div>
                </li>
                <li class="if is-parent right">
                  <a href="/my-pages.html" class="if"
                    ><span aria-hidden="true" class="if icon ui cog"></span>Settings</a
                  >
                  <div class="if accordion-menu">
                    <ul class="if">
                      <li class="if"><a href="/my-pages.html" class="if">User settings</a></li>
                      <li class="if"><a href="/my-pages.html" class="if">Broker settings</a></li>
                      <li class="if"><a href="/my-pages.html" class="if">Company settings</a></li>
                    </ul>
                  </div>
                </li>

                <li class="if"><a href="/my-pages.html" class="if">My Business</a></li>
                <li class="if"><a href="/my-pages.html" class="if">Industrial If Login</a></li>
                <li class="if"><a href="/my-pages.html" class="if">Employee insurances</a></li>
                <li class="if"><a href="/my-pages.html" class="if">Broker</a></li>
                <li class="if is-parent is-active">
                  <a href="/my-pages.html" class="if">My Pages</a>
                  <div class="if accordion-menu is-open">
                    <ul class="if is-open">
                      <li class="if"><a href="/" class="if ">Översikt</a></li>
                      <li class="if"><a href="/" class="if ">Försäkringar</a></li>
                      <li class="if"><a href="/" class="if ">Skador</a></li>
                      <li class="if"><a href="/" class="if ">Betalningar</a></li>
                      <li class="if"><a href="/" class="if ">Dokument</a></li>
                      <li class="if">
                        <a href="/" class="if "
                          >Meddelanden<span class="if notice inline top" role="status" aria-live="polite">1</span></a
                        >
                      </li>
                      <li class="if"><a href="/" class="if ">Inställningar</a></li>
                    </ul>
                  </div>
                </li>
                <li class="if">
                  <a href="/my-pages.html" class="if"
                    ><span aria-hidden="true" class="if icon ui log-out"></span>Logga ut</a
                  >
                </li>
              </ul>
            </div>
          </li>
          <li class="if mobile-menu-item mobile-menu-holder">
            <button type="button" class="if mobile-menu-action button mobile-menu">Meny</button>
            <div class="if accordion-menu">
              <div class="if mobile-search">
                <form class="if">
                  <input
                    type="search"
                    placeholder="Sök If.se"
                    class="if input-field js-if-mobile-search"
                    name="if-mobile-search"
                  />
                  <label for="if-mobile-search" class="if"><span class="if axe sr-only">Search If</span></label>
                </form>
              </div>
              <ul class="if">
                <li class="if is-parent is-active">
                  <button type="button" class="if">
                    Privat
                  </button>
                  <div class="if accordion-menu is-open">
                    <ul class="if accordion-menu is-open">
                      <li class="if is-parent">
                        <a href="/" class="if">Försäkringar</a>
                        <div class="if accordion-menu">
                          <ul class="if">
                            <li class="if is-parent">
                              <a href="/" class="if"><span aria-hidden="true" class="if icon ui house"></span>Hem</a>
                              <div class="if accordion-menu">
                                <ul class="if">
                                  <li class="if"><a href="/adasdsad" class="if">Villaförsäkring</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Hyresrättförsäkring</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Bostadsrättförsäkring</a></li>
                                  <li class="if">
                                    <a href="/adasdsad" class="if"
                                      >Försäkring vid studier eller praktik utomlandsförsäkring</a
                                    >
                                  </li>
                                  <li class="if"><a href="/adasdsad" class="if">Fritidshusförsäkring</a></li>
                                </ul>
                              </div>
                            </li>
                            <li class="if is-parent">
                              <a href="/" class="if"
                                ><span aria-hidden="true" class="if icon product car"></span>Fordon</a
                              >
                              <div class="if accordion-menu">
                                <ul class="if">
                                  <li class="if"><a href="/adasdsad" class="if">Bilförsäkring</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">MC-försäkring</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Mopedförsäkring</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Husbildsförsäkring</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Släpvagnsförsäkring</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Visa fler...</a></li>
                                </ul>
                              </div>
                            </li>
                            <li class="if is-parent">
                              <a href="/" class="if"
                                ><span aria-hidden="true" class="if icon product paw"></span>Djur</a
                              >
                              <div class="if accordion-menu">
                                <ul class="if">
                                  <li class="if"><a href="/adasdsad" class="if">Hundförsäkring</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Kattförsäkring</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Hästförsäkring</a></li>
                                </ul>
                              </div>
                            </li>
                            <li class="if is-parent">
                              <a href="/" class="if"
                                ><span aria-hidden="true" class="if icon product bag"></span>Resa</a
                              >
                              <div class="if accordion-menu">
                                <ul class="if">
                                  <li class="if"><a href="/adasdsad" class="if">Reseförsäkring</a></li>
                                </ul>
                              </div>
                            </li>
                            <li class="if is-parent">
                              <a href="/" class="if"
                                ><span aria-hidden="true" class="if icon symbol single-body"></span>Person</a
                              >
                              <div class="if accordion-menu">
                                <ul class="if">
                                  <li class="if"><a href="/adasdsad" class="if">Personförsäkringar</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Barnförsäkringar</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Gravidförsäkringar</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Livförsäkring</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Olycksfallsförsäkring</a></li>
                                  <li class="if"><a href="/adasdsad" class="if">Visa fler..</a></li>
                                </ul>
                              </div>
                            </li>
                            <li class="if is-parent">
                              <a href="/" class="if"
                                ><span aria-hidden="true" class="if icon product boat"></span>Boat</a
                              >
                              <div class="if accordion-menu">
                                <ul class="if">
                                  <li class="if"><a href="/adasdsad" class="if">Båtförsäkring</a></li>
                                </ul>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </li>
                      <li class="if"><a href="/" class="if">Skador</a></li>
                      <li class="if"><a href="/" class="if">Kundservice</a></li>
                    </ul>
                  </div>
                </li>
                <li class="if">
                  <a href="/" class="if">Företag</a>
                </li>
                <li class="if">
                  <a href="/" class="if">Stora Företag</a>
                </li>
              </ul>
              <div class="if mobile-language">
                <ul class="if mobile-language-list">
                  <li class="if mobile-language-item">
                    <button type="button" class="if mobile-language-action" data-language="nb">NB</button>
                  </li>
                  <li class="if mobile-language-item">
                    <button type="button" class="if mobile-language-action" data-language="da">DA</button>
                  </li>
                  <li class="if mobile-language-item is-active">
                    <button type="button" class="if mobile-language-action" data-language="sv">SV</button>
                  </li>
                  <li class="if mobile-language-item">
                    <button type="button" class="if mobile-language-action" data-language="fi">FI</button>
                  </li>
                  <li class="if mobile-language-item">
                    <button type="button" class="if mobile-language-action" data-language="en">EN</button>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="if desktop container">
        <ul class="if desktop-menu-list">
          <li class="if desktop-menu-item back-to-home-holder">
            <a href="/" class="if desktop-menu-action button back-to-home">Till startsida if.se</a>
          </li>
          <li class="if  desktop-menu-item change-language-holder is-parent">
            <button type="button" class="if desktop-menu-action change-language">SV</button>
            <div class="if dropdown-menu top" style="">
              <ul class="if">
                <li class="if">
                  <button type="button" class="if" data-language="nb">Norsk bokmål</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="da">Dansk</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="sv">Svenska</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="fi">Suomen kieli</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="kl">Kalaallit oqaasii</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="en">English</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="lv">Latviešu valoda</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="lt">Lietuvių kalba</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="et">Eesti keel</button>
                </li>
                <li class="if">
                  <button type="button" class="if" data-language="ru">Pусский язык</button>
                </li>
              </ul>
            </div>
          </li>
          <li class="if desktop-menu-item logout-holder">
            <button class="if desktop-menu-action button logout" type="button">Logga ut</button>
          </li>
          <li class="if desktop-menu-item mypages-holder is-parent">
            <button type="button" class="if desktop-menu-action button mypages">
              Mina sidor
            </button>
            <div class="if dropdown-menu">
              <ul class="if">
                <li class="if is-parent right">
                  <a href="/index-logged-in.html" class="if"><span class="if icon symbol parent"></span>Elisabeth</a>
                  <div class="if dropdown-menu">
                    <ul class="if">
                      <li class="if"><a href="/index-logged-in.html" class="if is-active">Elisabeth</a></li>
                      <li class="if"><a href="/index-logged-in.html" class="if">Per</a></li>
                      <li class="if"><a href="/index-logged-in.html" class="if">Anna</a></li>
                    </ul>
                  </div>
                </li>
                <li class="if separator"></li>
                <li class="if is-parent right">
                  <a href="/index-logged-in.html" class="if"><span class="if icon ui cog"></span>Settings</a>
                  <div class="if dropdown-menu">
                    <ul class="if">
                      <li class="if"><a href="/index-logged-in.html" class="if">User settings</a></li>
                      <li class="if"><a href="/index-logged-in.html" class="if">Broker settings</a></li>
                      <li class="if"><a href="/index-logged-in.html" class="if">Company settings</a></li>
                    </ul>
                  </div>
                </li>
                <li class="if separator"></li>
                <li class="if"><a href="/index-logged-in.html" class="if">My Pages</a></li>
                <li class="if"><a href="/index-logged-in.html" class="if">My Business</a></li>
                <li class="if"><a href="/index-logged-in.html" class="if">Industrial If Login</a></li>
                <li class="if"><a href="/index-logged-in.html" class="if">Employee insurances</a></li>
                <li class="if"><a href="/index-logged-in.html" class="if">Broker</a></li>
                <li class="if separator"></li>
                <li class="if">
                  <a href="/index-logged-in.html" class="if"
                    ><span aria-hidden="true" class="if icon ui log-out"></span>Logga ut</a
                  >
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </nav>
    <nav class="if secondary">
      <div class="if desktop container">
        <ul class="if desktop-menu-list">
          <li class="if desktop-menu-item logo-holder">
            <a href="/" class="if desktop-menu-action logo small"><span class="if axe sr-only">Home</span></a>
          </li>
          <li class="if desktop-menu-item"><a href="/" class="if desktop-menu-action">Översikt</a></li>
          <li class="if desktop-menu-item"><a href="/" class="if desktop-menu-action">Försäkringar</a></li>
          <li class="if desktop-menu-item"><a href="/" class="if desktop-menu-action">Skador</a></li>
          <li class="if desktop-menu-item"><a href="/" class="if desktop-menu-action">Betalningar</a></li>
          <li class="if desktop-menu-item"><a href="/" class="if desktop-menu-action">Dokument</a></li>
          <li class="if desktop-menu-item">
            <a href="/" class="if desktop-menu-action"
              >Meddelanden<span class="if notice inline top" role="status" aria-live="polite">1</span></a
            >
          </li>
          <li class="if desktop-menu-item"><a href="/" class="if desktop-menu-action">Inställningar</a></li>
        </ul>
      </div>
    </nav>
  </header>
  <main class="if main">
    <section class="if hero">
      <div class="if container">
        <div class="if content no-image">
          <h1 class="if heading largest">My pages</h1>
        </div>
      </div>
    </section>
  </main>
</div>

JavaScript implementation example

var globalHeaders = document.querySelectorAll('.if.global-header');
Array.prototype.slice.call(globalHeaders).forEach(function(header) {
  var headerMenuParents = header.querySelectorAll(
    '.if.secondary .if.desktop-menu-list > li.is-parent > .if.desktop-menu-action'
  );
  var toggleInsuranceSubCategories = header.querySelector('.js-toggle-insurance-sub-categories');

  var loginButtons = header.querySelectorAll('.if.login');
  var changeLanguageButtons = header.querySelectorAll('.if.change-language');
  var mobileMenuButtons = header.querySelectorAll('.if.mobile-menu');
  var myPagesMenuButtons = header.querySelectorAll('.if.mypages');

  var openMenu = function(action) {
    if (!action) return;
    var parent = action.parentElement;
    if (!parent) return;
    var menu = parent.querySelector('.if[class*="menu"]:not(button)');
    var list = parent.querySelector('.if[class*="menu"]:not(button) > ul.if');
    action.setAttribute('aria-expanded', true);
    parent.classList.add('is-open');
    if (menu) {
      menu.classList.add('is-open');
    }
    if (list) {
      list.classList.add('is-open');
    }
  };

  var closeMenu = function(action) {
    if (!action) return;
    var parent = action.parentElement;
    if (!parent) return;
    var menu = parent.querySelector('.if[class*="menu"]:not(button)');
    var list = parent.querySelector('.if[class*="menu"]:not(button) > ul.if');
    action.setAttribute('aria-expanded', false);
    parent.classList.remove('is-open');
    if (menu) {
      menu.classList.remove('is-open');
    }
    if (list) {
      list.classList.remove('is-open');
    }
  };

  var toggleMenu = function(action) {
    if (!action) return;
    var parent = action.parentElement;
    if (!parent) return;
    if (parent.classList.contains('is-open')) {
      closeMenu(action);
    } else {
      openMenu(action);
    }
  };

  Array.prototype.slice.call(mobileMenuButtons).forEach(function(button) {
    button.addEventListener('click', function(e) {
      toggleMenu(button);
      Array.prototype.slice.call(myPagesMenuButtons).forEach(function(button) {
        closeMenu(button);
      });
      Array.prototype.slice.call(changeLanguageButtons).forEach(function(button) {
        closeMenu(button);
      });
      Array.prototype.slice.call(loginButtons).forEach(function(button) {
        closeMenu(button);
      });
    });
  });

  Array.prototype.slice.call(myPagesMenuButtons).forEach(function(button) {
    button.addEventListener('click', function(e) {
      toggleMenu(button);

      Array.prototype.slice.call(mobileMenuButtons).forEach(function(button) {
        closeMenu(button);
      });
      Array.prototype.slice.call(changeLanguageButtons).forEach(function(button) {
        closeMenu(button);
      });
      Array.prototype.slice.call(loginButtons).forEach(function(button) {
        closeMenu(button);
      });
    });
  });

  Array.prototype.slice.call(changeLanguageButtons).forEach(function(button) {
    button.addEventListener('click', function(e) {
      toggleMenu(button);
    });
    Array.prototype.slice.call(myPagesMenuButtons).forEach(function(button) {
      closeMenu(button);
    });
    Array.prototype.slice.call(mobileMenuButtons).forEach(function(button) {
      closeMenu(button);
    });
    Array.prototype.slice.call(loginButtons).forEach(function(button) {
      closeMenu(button);
    });
  });
  Array.prototype.slice.call(loginButtons).forEach(function(button) {
    button.addEventListener('click', function(e) {
      toggleMenu(button);

      Array.prototype.slice.call(myPagesMenuButtons).forEach(function(button) {
        closeMenu(button);
      });
      Array.prototype.slice.call(mobileMenuButtons).forEach(function(button) {
        closeMenu(button);
      });
      Array.prototype.slice.call(changeLanguageButtons).forEach(function(button) {
        closeMenu(button);
      });
    });
  });

  if (toggleInsuranceSubCategories) {
    toggleInsuranceSubCategories.addEventListener('click', function(e) {
      var insuranceCrosslinks = header.querySelector('.if.crosslinks');
      if (!insuranceCrosslinks) {
        return;
      }
      var insuranceSubMenus = insuranceCrosslinks.querySelectorAll('.if[class*="menu"]:not(button)');
      if (insuranceCrosslinks.classList.contains('is-open')) {
        toggleInsuranceSubCategories.textContent = 'Visa alla försäkringar';
        insuranceCrosslinks.classList.remove('is-open');
      } else {
        insuranceCrosslinks.classList.add('is-open');
        toggleInsuranceSubCategories.textContent = 'Visa färre';
      }
      Array.prototype.slice.call(insuranceSubMenus).forEach(function(subMenu) {
        subMenu.classList.toggle('is-open');
      });
      setTimeout(function() {
        fixTertiarySize();
      }, 200);
    });
  }

  Array.prototype.slice.call(headerMenuParents).forEach(function(menuButton) {
    menuButton.addEventListener('click', function(e) {
      var parentElement = menuButton.parentElement;
      var subMenu = parentElement.querySelector('.tertiary');
      if (parentElement.classList.contains('is-active')) {
        menuButton.setAttribute('aria-expanded', false);
        parentElement.classList.remove('is-active');
        subMenu.classList.remove('is-open');
      } else {
        menuButton.setAttribute('aria-expanded', true);
        parentElement.classList.add('is-active');
        subMenu.classList.add('is-open');
      }
    });
  });
});

var forLastExec,
  delay = 100, // delay between calls
  throttled = false, // are we currently throttled?
  calls = 0;

var fixTertiarySize = function() {
  var globalHeaderSubMenus = document.querySelectorAll('.if.global-header .tertiary');
  Array.prototype.slice.call(globalHeaderSubMenus).forEach(function(subMenu) {
    subMenu.style.width = document.body.clientWidth + 'px';
  });
};

// window.resize event listener
window.addEventListener('resize', function() {
  // only run if we're not throttled
  if (!throttled) {
    // actual callback action
    fixTertiarySize();
    // we're throttled!
    throttled = true;
    // set a timeout to un-throttle
    setTimeout(function() {
      throttled = false;
    }, delay);
  }
  clearTimeout(forLastExec);
  forLastExec = setTimeout(fixTertiarySize, delay);
});

fixTertiarySize();

var accordionMenus = document.querySelectorAll('.if.accordion-menu');
Array.prototype.slice.call(accordionMenus).forEach(function(menu) {
  var expandableMenuActions = menu.querySelectorAll('li.is-parent > a, li.is-parent > button');

  Array.prototype.slice.call(expandableMenuActions).forEach(function(action) {
    action.addEventListener('click', function(e) {
      e.preventDefault();

      if (action.parentElement.classList.contains('is-active')) {
        action.parentElement.classList.remove('is-active');
        var expandedMenuItems = action.parentElement.querySelectorAll('li.is-parent.is-active');
        Array.prototype.slice.call(expandedMenuItems).forEach(function(item) {
          item.classList.remove('is-active');
        });
        var expandedSubMenus = action.parentElement.querySelectorAll('.is-open');
        Array.prototype.slice.call(expandedSubMenus).forEach(function(menu) {
          menu.classList.remove('is-open');
        });
      } else {
        action.parentElement.classList.add('is-active');
        action.parentElement.querySelector('.if.accordion-menu').classList.add('is-open');
        action.parentElement.querySelector('.if.accordion-menu > ul').classList.add('is-open');
      }
    });
  });
});
Edit this section

My Business

Anatomy