CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, Opens in new window
A Hero Navigation is used on a category landing page, for navigation.
This component provides .css
, .styl
, .less
and .scss
-files.
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @ids-core/hero-navigation@17.0.30-alpha.8
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
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>
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>
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
14.25.0 (2022-06-28)
Documentation Updates
- hero-navigation: use correct name for component (1450b93)
14.22.2 (2022-05-03)
Miscellaneous chores
- package locks: update package locks (813eac7)
14.20.1 (2022-04-19)
Miscellaneous chores
- changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
- changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270
14.18.3 (2022-04-13)
Bug Fixes
- changelog: generate new CHANGELOG.md files for root and
packages (349fda4)
,
closes #586063
. We regenerate the files to include all relevant commits and to use
conventional-commits
at 100%
14.16.0 (2022-04-07)
Bug Fixes
14.9.0 (2022-03-03)
Miscellaneous chores
- ๐ค Bootstrap (6822f5b)
14.8.1 (2022-02-23)
Bug Fixes
reinstall (d425056)
bootstrap (9a713df)
merge (2b1c5f1)
reinstall (5221600)
reinstall (147df55)
reinstall (afce1f2)
reinstall (67f3140)
-
Add changelog.md to files (3338314)
Reinstall (a2abf51)
14.2.2 (2021-12-10)
Code Refactoring
-
๐ก Change focus styles, remove whatinput (75fd31b) , closes #505205
-
rebuild and reinstall (f9fb687)
reinstall (885c74b)
-
fix changelogs manually (b1232b4)
reinstall (545a069)
reinstall (e149c2c)
13.12.3 (2021-11-09)
โ BREAKING CHANGES
- ๐งจ The scope for If Design System npm packages has now changed from
@if-design-system
to@ids-core
. We have also renamed the repository fromif-design-system
toids-core
- ๐งจ Util is now renamed to Utils
- ๐งจ We have now changed the navigation structure for the documentation site. Please update any saved links!
- ๐งจ Navigation structure has now changed. Please see release notes!
- ๐งจ The JavaScript for the Hero Navigation is moved to separate package: @ids-js/hero-navigation
Documentation Updates
-
โ๏ธ Move position of the quick links (5cb0897)
-
โ๏ธ Remove unneeded margins for shortcuts (36c7e8d)
-
โ๏ธ Split out CSS documentation and JS code (5cc6bef) , closes #467386
-
โ๏ธ Update links and change navigation structure (0bfd27d) , closes #490579
Code Refactoring
-
๐ก Reduce spacing tokens, use correct size tokens (97aa461)
-
๐ก Rename scope and repository (3ea5423)
-
๐ก Use new navigation structure for documentation (415aee5) , closes #490579
-
another change in the structure (38a0d2e)
Miscellaneous chores
bootstrap (6fc1ed8)
reinstall (da80dba)
13.11.0 (2021-10-19)
Features
- ๐ธ Input field hot reload (eac76b7)
13.9.2 (2021-09-30)
Bug Fixes
- ๐ Complete the pseudo-element fix (1dcee2c)
13.7.0 (2021-09-22)
Documentation Updates
- โ๏ธ Update linking layout and naming (15c383b)
13.6.3 (2021-09-17)
Bug Fixes
13.6.0 (2021-09-08)
Documentation Updates
bootstrap (d23e139)
- ๐ค Use correct order for diff (cc6a4fd)
12.15.1 (2021-08-24)
Bug Fixes
- ๐ Use correct demo files, updated dev files (f53434b) , closes #459841 . for hero navigation component
12.14.1 (2021-08-12)
Miscellaneous chores
12.13.1 (2021-08-11)
Bug Fixes
12.12.1 (2021-08-10)
Bug Fixes
-
๐ Make sure components using fonts, have fonts bundled (d5bb642) , closes #354912
-
๐ค Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"
-
๐ค Reinstall (e660696)
-
๐ค Update published date (61e7ccf)
12.6.0 (2021-05-27)
Bug Fixes
-
๐ Manually set firstPublished and lastModified (e83af7d)
-
๐ We don't need lastModified (e458a12)
12.0.0 (2021-05-05)
โ BREAKING CHANGES
- ๐งจ All of the mixins have now been renamed
- ๐งจ This extracts the Hero variation with no image into a separate, design updated component named Header
- ๐งจ The Hero Navigation is now extracted from the Hero component
Features
- ๐ธ Rename and extract and update hero with no image to (384eb77) , closes #336508 . Header component
Documentation Updates
- โ๏ธ Update docs for hero navigation, remove will-transform (e3341dc)
Code Refactoring
-
๐ก Extract Hero Navigation from Hero (0dc8f49) , closes #336508
-
๐ก Rename and consolidate mixins (67cf470) , closes #268081
-
๐ค Reinstall (2c763ea)
rebuild (7edb430)