Back to Hero Navigation-guidelines

CSS ComponentThe latest version of this package is: 17.0.1, 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.1

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 window

Usage

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>
Edit this section, Opens in new window

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

  • 🐛 Add missing imports for global CSS Variables (fbf6f06) , closes #582437

14.9.0 (2022-03-03)

Miscellaneous chores

14.8.1 (2022-02-23)

Bug Fixes

  • 🐛 Add missing imports of typography CSS variables (e716c65) , closes #559412

reinstall (d425056)

bootstrap (9a713df)

merge (2b1c5f1)

reinstall (5221600)

reinstall (147df55)

  • use correct versions (f1b5deb)

  • Add engines for all packages (e95dfff)

reinstall (afce1f2)

reinstall (67f3140)

  • Add changelog.md to files (3338314)

Reinstall (a2abf51)

14.2.2 (2021-12-10)

Code Refactoring

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 from if-design-system to ids-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

  • 💡 Categorize components (9965266) , closes #490579

  • 💡 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)

  • fix all old references to util (d57bf17)

  • prepare for merge (0184490)

reinstall (da80dba)

  • Rename scope and repo (257684e)

  • use correct version for utils (49e72d9)

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

  • Use default shortcut listing for demo links (a746602)

  • 🤖 Use node v14 (4009973)

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

  • 🤖 Add ci task to package.json without tests (21222e0) , closes #457627

12.13.1 (2021-08-11)

Bug Fixes

  • 🐛 Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621

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

rebuild (7edb430)

Edit this section, Opens in new window
Contact us, Opens in new window