Skip to content

Hero Navigation13.10.5

Bundle


$ npm i @if-design-system/Hero Navigation@13.10.5

Det oknepiga försäkringsbolaget

Skaffa rätt skydd för ditt hem och dina saker

Edit this section

Usage

The Hero Navigation Component is used for the top part for product navigation.

Principles

  • The image should always be a littlebit visible, for feelings sake
  • In desktop always 2 columns for the second row of limnks
  • Check longest product categories and product page length
  • Check for calm animation
  • Animation for the entrance of the second links when the image moves over
  • Arrows aligned with the words (like they are now)
  • Bold links when selected (very left columns)
  • Make sure that the height of the Hero Navigation is correct

Sizing

If you are having issues regarding too many navigation items, resulting in overflow, you can adjust the height of the Hero Navigation like this:

<style type="text/css">
  @media screen and (min-width: 45rem) {
    .if.hero-navigation > .if.container > .if.transform.blur {
      height: 520px;
    }

    .if.hero-navigation > .if.container {
      min-height: 520px;
      height: auto;
    }

    .if.hero-navigation,
    .if.hero.reverse.navigation {
      min-height: 520px;
      height: 520px;
    }

    .if.hero-navigation > .if.container > .if.transform.blur > .if.image {
      max-height: 520px;
    }
  }
</style>
Edit this section

Behaviours

Operational states

Det oknepiga försäkringsbolaget

Skaffa rätt skydd för ditt hem och dina saker

Initial

Det oknepiga försäkringsbolaget

Skaffa rätt skydd för ditt hem och dina saker

Initial with lifestyle image
Step 1
Step 1 with lifestyle image
Step 2
Step 2 with lifestyle image
Edit this section

Anatomy

Hero Navigation
Hero Navigation step 1
  1. Back button
  2. Hovered element
Hero Navigation step 2
  1. Hovered element
Edit this section

Implementation

To change the views, when a user clicks the primary button, add .is-active and .step-1 for the first step, and .step-2 for the last step to <div class="if content navigation">.

To use a lifestyle image in the Hero Navigation, add lifestyle to the image container:

  <div class="if transform blur">
    <div class="if image lifestyle"></div>
  </div>
</div>
<section class="if hero-navigation">
  <div class="if container">
    <div class="if content">
      <h1 class="if heading larger">Det oknepiga försäkringsbolaget</h1>
      <p class="if text lead">
        Skaffa rätt skydd för ditt hem och dina saker
      </p>
      <button type="button" class="if button primary large">Hitta försäkring</button>
    </div>
    <nav class="if content navigation">
      <button type="button" class="if navigation back">Tilbaka</button>
      <button type="button" class="if navigation back step-2">Tilbaka</button>
      <div class="if navigation-container">
        <ul class="if navigation-list">
          <li class="if navigation-item">
            <button type="button" class="if navigation-action">Koitini ja muu oimusitinen</button>
            <ul class="if sub-navigation-list">
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Bilforsäkring" class="if navigation-link">Bilforsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/BMW mc-märkesförsäkring" class="if navigation-link"
                  >BMW mc-märkesförsäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/MC försäkring" class="if navigation-link">MC försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Mopedförsäkring" class="if navigation-link">Mopedförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Husbilsförsäkring" class="if navigation-link">Husbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Husvagnförsäkring" class="if navigation-link">Husvagnförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Lätt lastbilsförsäkring" class="if navigation-link"
                  >Lätt lastbilsförsäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Släpvagnsförsäkring" class="if navigation-link"
                  >Släpvagnsförsäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/ATV-försäkring" class="if navigation-link">ATV-försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Snöskoterförsäkring" class="if navigation-link"
                  >Snöskoterförsäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Samlarfordonsförsäkring" class="if navigation-link"
                  >Samlarfordonsförsäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Placeholder" class="if navigation-link">Placeholder</a>
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Placeholder" class="if navigation-link">Placeholder</a>
              </li>
            </ul>
          </li>
          <li class="if navigation-item">
            <button type="button" class="if navigation-action">Hus och Hem</button>
            <ul class="if sub-navigation-list">
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Bilforsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">BMW mc-märkesförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">MC försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Mopedförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husvagnförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Lätt lastbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Släpvagnsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">ATV-försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Snöskoterförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Samlarfordonsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
            </ul>
          </li>
          <li class="if navigation-item">
            <button type="button" class="if navigation-action">Person</button>
            <ul class="if sub-navigation-list">
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Bilforsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">BMW mc-märkesförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">MC försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Mopedförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husvagnförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Lätt lastbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Släpvagnsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">ATV-försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Snöskoterförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Samlarfordonsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
            </ul>
          </li>
          <li class="if navigation-item">
            <button type="button" class="if navigation-action">Resa</button>
            <ul class="if sub-navigation-list">
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Bilforsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">BMW mc-märkesförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">MC försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Mopedförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husvagnförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Lätt lastbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Släpvagnsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">ATV-försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Snöskoterförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Samlarfordonsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
            </ul>
          </li>
          <li class="if navigation-item">
            <button type="button" class="if navigation-action">Djur</button>
            <ul class="if sub-navigation-list">
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Bilforsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">BMW mc-märkesförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">MC försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Mopedförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husvagnförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Lätt lastbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Släpvagnsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">ATV-försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Snöskoterförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Samlarfordonsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
            </ul>
          </li>
          <li class="if navigation-item">
            <button type="button" class="if navigation-action">Båt</button>
            <ul class="if sub-navigation-list">
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Bilforsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">BMW mc-märkesförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">MC försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Mopedförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husvagnförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Lätt lastbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Släpvagnsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">ATV-försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Snöskoterförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Samlarfordonsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
    <div class="if transform blur">
      <div
        class="if image studio"
        style="background-image: url(https://design.if.eu/images/hug.png);background-size: cover;background-position: center top;"
      ></div>
    </div>
  </div>
</section>
const createInlineArrow = () => {
  const fragment = document.createDocumentFragment();
  const el = document.createElement('span');
  const wrapper = document.createElement('span');

  wrapper.classList.add('if');
  wrapper.classList.add('inline-nowrap');

  wrapper.innerHTML = '&#xfeff;';
  wrapper.appendChild(el);
  wrapper.setAttribute('aria-hidden', true);
  el.classList.add('if');
  el.classList.add('dropRight');

  fragment.appendChild(wrapper);

  return fragment;
};

var hero = document.querySelector('#demo-hero-navigation');
var ctaButton = hero.querySelector('.if.button.primary');
var backButton = hero.querySelector('.if.navigation.back');
var backButton2 = hero.querySelector('.if.navigation.back.step-2');

const navigationContainer = hero.querySelector('.if.navigation-container');
const primaryList = hero.querySelector('.if.navigation-container > .if.navigation-list');
const primaryActions = primaryList.querySelectorAll('.if.navigation-action');

Array.prototype.slice.call(primaryActions).forEach(function(action) {
  action.classList.add('hasno-after');
  action.appendChild(createInlineArrow());
});

var actions = hero
  .querySelector('.if.content.navigation')
  .querySelectorAll('a:not(.navigation-link), button:not(.navigation-link)');

Array.prototype.slice.call(actions).forEach(function(action) {
  action.setAttribute('tabindex', '-1');
});

var subActions = hero
  .querySelector('.if.content.navigation')
  .querySelectorAll('a.navigation-link, button.navigation-link');
Array.prototype.slice.call(subActions).forEach(function(action) {
  action.setAttribute('tabindex', '-1');
});
ctaButton.addEventListener('click', function(e) {
  e.preventDefault();
  hero.querySelector('.if.content:not(.navigation)').style.display = 'none';
  hero.querySelector('.if.content.navigation').classList.add('is-active');
  hero.querySelector('.if.content.navigation').classList.add('step-1');
  Array.prototype.slice.call(actions).forEach(function(action) {
    action.setAttribute('tabindex', '0');
  });

  var firstAction = hero.querySelector('.if.content.navigation .if.navigation-list .if.navigation-item');
  firstAction.focus();
  const list = hero.querySelector('.if.navigation-list');
  list.style.height = 'auto';
});

var activateStepTwo = function(el) {
  Array.prototype.slice.call(subActions).forEach(function(action) {
    action.setAttribute('tabindex', '-1');
  });
  Array.prototype.slice
    .call(hero.querySelectorAll('.if.navigation-list > li > button.is-active'))
    .forEach(function(el) {
      el.classList.remove('is-active');
      el.parentElement.querySelector('.if.sub-navigation-list').style.display = 'none';
      setTimeout(function() {
        el.parentElement.querySelector('.if.sub-navigation-list').style.display = 'flex';
      }, 1000);
    });
  Array.prototype.slice
    .call(el.parentElement.querySelectorAll('.if.sub-navigation-list .if.navigation-link'))
    .forEach(function(el) {
      el.setAttribute('tabindex', '0');
    });
  el.classList.add('is-active');
  hero.querySelector('.if.content.navigation').classList.remove('step-1');
  hero.querySelector('.if.content.navigation').classList.add('step-2');
  setTimeout(function() {
    const parentList = el.closest('.if.navigation-list');
    const subNav = el.parentElement.querySelector('.if.sub-navigation-list');
    const subRect = subNav.getBoundingClientRect();
    parentList.style.height = subRect.height + 'px';
  }, 100);
};

Array.prototype.slice.call(hero.querySelectorAll('.if.navigation-list > li > button')).forEach(function(el) {
  el.addEventListener('click', function(e) {
    e.preventDefault();
    activateStepTwo(el);
  });
});

backButton.addEventListener('click', function(e) {
  e.preventDefault();
  hero.querySelector('.if.content:not(.navigation)').style.display = 'block';
  hero.querySelector('.if.content.navigation').classList.remove('is-active');
  hero.querySelector('.if.content.navigation').classList.remove('step-1');
  hero.querySelector('.if.content.navigation').classList.remove('step-2');
  Array.prototype.slice.call(actions).forEach(function(action) {
    action.setAttribute('tabindex', '-1');
  });
  Array.prototype.slice.call(subAction).forEach(function(action) {
    action.setAttribute('tabindex', '-1');
  });
  const list = hero.querySelector('.if.navigation-list');
  list.style.height = 'auto';
});
backButton2.addEventListener('click', function(e) {
  e.preventDefault();
  hero.querySelector('.if.content.navigation').classList.remove('step-2');
  hero.querySelector('.if.content.navigation').classList.add('step-1');
  const list = hero.querySelector('.if.navigation-list');
  list.style.height = 'auto';
});
Edit this section

Contact us