Back to Hero Navigation-guidelines

JavaScriptThe latest version of this package is: 0.17.4, Opens in new window

Hero Navigation javascript

This component is compatible with ESM (ES6 module) and IIFE. See documentation examples below.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-js/hero-navigation@0.17.4

Table of Contents

Usage

Example markup

<section id="demo-hero-navigation" 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ärkes&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a
                  href="/Koitini ja muu oimusitinen/MC försäkring"
                  class="if navigation-link"
                  >MC &shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a
                  href="/Koitini ja muu oimusitinen/Mopedförsäkring"
                  class="if navigation-link"
                  >Moped&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a
                  href="/Koitini ja muu oimusitinen/Husbilsförsäkring"
                  class="if navigation-link"
                  >Husbils&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a
                  href="/Koitini ja muu oimusitinen/Husvagnförsäkring"
                  class="if navigation-link"
                  >Husvagn&shy;fö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 lastbils&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a
                  href="/Koitini ja muu oimusitinen/Släpvagnsförsäkring"
                  class="if navigation-link"
                  >Släpvagns&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a
                  href="/Koitini ja muu oimusitinen/ATV-försäkring"
                  class="if navigation-link"
                  >ATV-&shy;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öskoter&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a
                  href="/Koitini ja muu oimusitinen/Samlarfordonsförsäkring"
                  class="if navigation-link"
                  >Samlarfordons&shy;fö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ärkes&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >MC &shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Moped&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Husbils&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Husvagn&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Lätt lastbils&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Släpvagns&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >ATV-&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Snöskoter&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Samlarfordons&shy;fö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ärkes&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >MC &shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Moped&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Husbils&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Husvagn&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Lätt lastbils&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Släpvagns&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >ATV-&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Snöskoter&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Samlarfordons&shy;fö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ärkes&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >MC &shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Moped&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Husbils&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Husvagn&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Lätt lastbils&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Släpvagns&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >ATV-&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Snöskoter&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Samlarfordons&shy;fö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ärkes&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >MC &shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Moped&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Husbils&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Husvagn&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Lätt lastbils&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Släpvagns&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >ATV-&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Snöskoter&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Samlarfordons&shy;fö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ärkes&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >MC &shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Moped&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Husbils&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Husvagn&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Lätt lastbils&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Släpvagns&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >ATV-&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Snöskoter&shy;försäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link"
                  >Samlarfordons&shy;fö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 2vh;"
      ></div>
    </div>
  </div>
</section>
import { IDSHeroNavigation } from '@ids-js/hero-navigation';

const hero = document.querySelector('#demo-hero-navigation');
const heroNavigation = new HeroNavigation(hero);
Contact us, Opens in new window