Back to components
Hero Navigation
A Hero Navigation is used on a category landing page, for navigation.
Det oknepiga försäkringsbolaget
Skaffa rätt skydd för ditt hem och dina saker
Table of Contents
Edit this section, Opens in new windowUsage
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
Behaviours
Operational states
Det oknepiga försäkringsbolaget
Skaffa rätt skydd för ditt hem och dina saker
Det oknepiga försäkringsbolaget
Skaffa rätt skydd för ditt hem och dina saker
Det oknepiga försäkringsbolaget
Skaffa rätt skydd för ditt hem och dina saker
Det oknepiga försäkringsbolaget
Skaffa rätt skydd för ditt hem och dina saker
Det oknepiga försäkringsbolaget
Skaffa rätt skydd för ditt hem och dina saker
Det oknepiga försäkringsbolaget
Skaffa rätt skydd för ditt hem och dina saker
Det oknepiga försäkringsbolaget
Skaffa rätt skydd för ditt hem och dina saker
Det oknepiga försäkringsbolaget
Skaffa rätt skydd för ditt hem och dina saker
Det oknepiga försäkringsbolaget
Skaffa rätt skydd för ditt hem och dina saker
Anatomy
- Back button
- Hovered element
- Hovered element
Det oknepiga försäkringsbolaget
Skaffa rätt skydd för ditt hem och dina saker
Det oknepiga försäkringsbolaget
Skaffa rätt skydd för ditt hem och dina saker
Det oknepiga försäkringsbolaget
Skaffa rätt skydd för ditt hem och dina saker
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 = '';
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';
});