Back to Hero Navigation-guidelines
JavaScriptThe latest version of this package is: 0.18.6, 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.18.6Table 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­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 ­försäkring</a
>
</li>
<li class="if navigation-item">
<a
href="/Koitini ja muu oimusitinen/Mopedförsäkring"
class="if navigation-link"
>Moped­försäkring</a
>
</li>
<li class="if navigation-item">
<a
href="/Koitini ja muu oimusitinen/Husbilsförsäkring"
class="if navigation-link"
>Husbils­försäkring</a
>
</li>
<li class="if navigation-item">
<a
href="/Koitini ja muu oimusitinen/Husvagnförsäkring"
class="if navigation-link"
>Husvagn­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­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­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-­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­försäkring</a
>
</li>
<li class="if navigation-item">
<a
href="/Koitini ja muu oimusitinen/Samlarfordonsförsäkring"
class="if navigation-link"
>Samlarfordons­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­fö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"
>Moped­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Husbils­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Husvagn­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Lätt lastbils­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Släpvagns­fö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öskoter­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Samlarfordons­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­fö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"
>Moped­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Husbils­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Husvagn­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Lätt lastbils­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Släpvagns­fö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öskoter­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Samlarfordons­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­fö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"
>Moped­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Husbils­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Husvagn­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Lätt lastbils­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Släpvagns­fö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öskoter­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Samlarfordons­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­fö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"
>Moped­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Husbils­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Husvagn­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Lätt lastbils­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Släpvagns­fö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öskoter­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Samlarfordons­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­fö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"
>Moped­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Husbils­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Husvagn­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Lätt lastbils­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Släpvagns­fö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öskoter­försäkring</a
>
</li>
<li class="if navigation-item">
<a href="/asdasd" class="if navigation-link"
>Samlarfordons­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);Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
0.17.0 (2021-10-21)
Code Refactoring
- 💡 Remove support for CommonJS (9f84d9a)
BREAKING CHANGES
- 🧨 We have removed the support for CommonJS for all @ids-js packages
0.16.1 (2021-10-21)
Bug Fixes
- Use common for cjs and main for esm (96f673d)