Header (Kode) | Det Fælles Designsystem

Kode

Navigation
Ekstra rækker

Åbn dette eksempel i et nyt vindue

Installation

HTML Struktur

Nedenstående dele indsættes i et header element under body.

Portal (Obligatorisk)

Portal header indeholder portalens logo samt info om hvem, der er logget ind.

Denne del bør altid indgå i en header.

<div class="portal-header portal-header-compact">
    <div class="container portal-header-inner">
        <a href="#" aria-label="Portalnavn" class="logo"><span
                class="d-none d-print-block">Portalnavn</span></a>
        <button
            class="function-link button-menu-open js-menu-open ml-auto d-print-none"
            aria-haspopup="menu"
            title="Åben mobil menu"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#menu"></use></svg>Menu</button>

        <div class="portal-info">
            <p class="user">Anders Andersen, Forsikringens Forsikringsfirma
            </p>
            <button
                class="button button-secondary alert-leave d-print-none">
                Log af
            </button>
        </div>
    </div>
</div>

Hvis man har en header uden navigation skal man stadig tilføje en mobilmenu, da den viser data fra headeren, som normalt skjules i mobilvisning.

Løsning (Obligatorisk)

Løsningsheaderen indeholder løsningens titel samt info om, hvilken myndighed, der står bag løsningen.

Denne del bør altid indgå i en header.

<div class="solution-header">
    <div class="container solution-header-inner">
        <div class="solution-heading">
            <a href="#" class="alert-leave2">En længere løsningstitel</a>
        </div>

        <div class="solution-info">
            <p class="h5 authority-name">Myndighedsnavn</p>
            <p>Support: 12 34 56 78 <span class="d-print-none">· <a
                        href="#"
                        class="icon-link function-link alert-leave">Kontakt<svg class="icon-svg" aria-hidden="true" focusable="false"><use xlink:href="#open-in-new"></use></svg></a></span>
            </p>
        </div>
    </div>
</div>

Navigationsområdet kan indeholde flere rækker med forskellige former for navigation.

Alt indhold i <nav> elementet vil på små skærme bliver vist i en skjult menu, som vises ved tryk på menu-knappen. Som standard vises denne menu, når skærmen er mindre end 992px bred. Man kan indstille hvornår, der skal bruges denne menu via variablen $nav-responsive-breakpoint.

Hvis man har en header uden navigation skal nedenstående stadig tilføjes, da det er en menu der kan åbnes på mobil som viser information fra headeren som ellers bliver skjult.

<div class="overlay"></div>
<nav class="nav">
    <button class="function-link button-menu-close js-menu-close"
        title="Luk mobil menu"><svg class="icon-svg" aria-hidden="true"><use xlink:href="#close"></use></svg>Luk</button>

    <div class="portal-info-mobile">
        <p class="user bold">Lone Hansen</p>
        <a href="#" class="button button-secondary button-signout">
            Log af
        </a>
    </div>

    <div class="solution-info-mobile">
        <p class="bold">Myndighedsnavn</p>
        <p>Support: 12 34 56 78</p>
    </div>
</nav>

Hvis man har en navigation i headeren skal man bruge en af de andre herunder.

Hovednavigation

<div class="overlay"></div>
<nav class=" nav">
    <button class="function-link button-menu-close js-menu-close"
        title="Luk mobil menu"><svg class="icon-svg" aria-hidden="true"><use xlink:href="#close"></use></svg>Luk</button>
    <!-- 3: Main navigation-->
    <div class="navbar navbar-primary">
        <!--3A: Main navigation-->
        <div class="navbar-inner container">
            <ul class="nav-primary">
                <li>
                    <a href="#" class="nav-link">
                        <span>Første menupunkt</span>
                    </a>
                </li>
                <li class="current">
                    <a href="#" class="nav-link">
                        <span>Andet menupunkt</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="nav-link">
                        <span>Tredje menupunkt</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="nav-link">
                        <span>Fjerde menupunkt</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 3: Main navigation end-->

    <!-- 5: Contextual actions-->
    <div class="navbar">
        <div class="navbar-inner container navbar-context-actions">
            <div class="nav-actions">
                <a href="#"
                    class="function-link"><svg class="icon-svg" aria-hidden="true"><use xlink:href="#print"></use></svg>Funktionsikon</a>
            </div>
        </div>
    </div>
    <!-- 5: Contextual actions end-->

    <div class="portal-info-mobile">
        <p class="user bold">Ida Ester Petersen</p>
        <a href="#"
            class="button button-secondary button-signout alert-leave">
            Log af
        </a>
    </div>

    <div class="solution-info-mobile">
        <p class="h5 authority-name">Myndighedsnavn</p>
        <p>Support: 12 34 56 78 · <a href="#"
                class="icon-link function-link alert-leave">Kontakt<svg class="icon-svg" aria-hidden="true" focusable="false"><use xlink:href="#open-in-new"></use></svg></a>
        </p>
    </div>

</nav>

Hovednavigation med ekstra navigationsrækker

Ekstra navigationsrækker kan indeholde alt lige fra knapper, links til modaler, overflow menuer og sidst funktionslink.

Hvis man laver en header med lidt indhold, er det anbefalet at man indstiller $nav-responsive-breakpoint til at have en lavere værdi, fx. 768px.

<div class="overlay"></div>
<nav class=" nav">
    <button class="function-link button-menu-close js-menu-close"
        title="Luk mobil menu"><svg class="icon-svg" aria-hidden="true"><use xlink:href="#close"></use></svg>Luk</button>

    <!-- Start: Hovedmenu -->
    <div class="navbar navbar-primary">
        <div class="navbar-inner container">
            <ul class="nav-primary">
                <li>
                    <a href="#" class="nav-link">
                        <span>Første menupunkt</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="nav-link">
                        <span>Andet menupunkt</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="nav-link">
                        <span>Tredje menupunkt</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="nav-link">
                        <span>Fjerde menupunkt</span>
                    </a>
                </li>
                <li class="current">
                    <div class="overflow-menu">
                        <button
                            class="button-overflow-menu js-dropdown js-dropdown--responsive-collapse"
                            data-js-target="headeroverflow1"
                            aria-haspopup="true" aria-expanded="false">
                            <span>Femte menupunkt</span>
                        </button>
                        <div class="overflow-menu-inner"
                            id="headeroverflow1" aria-hidden="true">
                            <ul class="overflow-list">
                                <li class="active">
                                    <a href="#">Subsektion med en meget
                                        lang titel som går i flere
                                        linier</a>
                                </li>
                                <li>
                                    <a href="#">Subsektion title</a>
                                </li>
                                <li>
                                    <a href="#">Subsektion title</a>
                                </li>
                                <li>
                                    <a href="#">Subsektion title som også
                                        er forholdsvis lang</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>

            <!-- Start: Overflow menu i navigation -->
            <ul class="unstyled-list nav-actions">
                <li>
                    <div class="overflow-menu overflow-menu--open-left">
                        <button
                            class="button-overflow-menu js-dropdown js-dropdown--responsive-collapse"
                            data-js-target="headeroverflow2"
                            aria-haspopup="true" aria-expanded="false">
                            Overflow menu
                            <svg class="icon-svg" aria-hidden="true"><use xlink:href="#arrow-drop-down"></use></svg>
                        </button>
                        <div class="overflow-menu-inner"
                            id="headeroverflow2" aria-hidden="true">
                            <ul class="overflow-list">
                                <li><a href="#">Menupunkt 1</a></li>
                                <li><a href="#">Et menupunkt 2</a></li>
                                <li><a href="#">Tredje menupunkt 3</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
            <!-- Slut: Overflow menu i navigation -->
        </div>
    </div>
    <!-- Slut: Hovedmenu -->

    <!-- 4: Secondary navigation-->
    <div class="navbar">
        <div class="navbar-inner container">
            <div class="nav-secondary">
                <p class="nav-secondary-heading">Ekstra menu- og
                    funktionslinje</p>
                <ul class="unstyled-list nav-actions">
                    <li>
                        <div
                            class="overflow-menu overflow-menu--open-right">
                            <button
                                class="button-overflow-menu js-dropdown js-dropdown--responsive-collapse"
                                data-js-target="headeroverflow3"
                                aria-haspopup="true" aria-expanded="false">
                                Overflow menu
                                <svg class="icon-svg" aria-hidden="true"><use xlink:href="#arrow-drop-down"></use></svg>
                            </button>
                            <div class="overflow-menu-inner"
                                id="headeroverflow3" aria-hidden="true">
                                <ul class="overflow-list">
                                    <li><a href="#">Menupunkt 1</a></li>
                                    <li><a href="#">Et menupunkt 2</a></li>
                                    <li><a href="#">Tredje menupunkt 3</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <ul class="unstyled-list nav-actions">
                <li>
                    <a href="#"
                        class="button button-tertiary">Tertiærknap</a>
                </li>
                <li>
                    <a href="#"
                        class="button button-tertiary">Tertiærknap</a>
                </li>
                <li>
                    <a href="#"
                        class="button button-tertiary">Tertiærknap</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 4: Secondary header end-->

    <!-- 5: Contextual actions-->
    <div class="navbar">
        <div class="navbar-inner navbar-context-actions container">
            <div class="nav-actions">
                <a href=""
                    class="function-link"><svg class="icon-svg" aria-hidden="true"><use xlink:href="#print"></use></svg>Funktionsikon</a>
                <a href=""
                    class="function-link"><svg class="icon-svg" aria-hidden="true"><use xlink:href="#save"></use></svg>Funktionsikon</a>
            </div>
        </div>
    </div>
    <!-- 5: Contextual actions end-->

    <div class="portal-info-mobile">
        <p class="user">Christian Emil Vestergaard Christensen</p>
        <p>Københavns Urmager og Værksted v/Martin Elsig</p>
        <a href="#" class="button button-secondary alert-leave"
            role="button">
            Log af
        </a>
    </div>

    <div class="solution-info-mobile">
        <p class="h5 authority-name">Myndighedsnavn</p>
        <p>Support: 12 34 56 78 · <a href="#"
                class="function-link d-inline-block"><svg class="icon-svg" aria-hidden="true" focusable="false"><use xlink:href="#card-text"></use></svg>Kontakt</a>
        </p>
    </div>

</nav>

JavaScript

Mobil menuen kræver JavaScript for at fungere. Man kan enten gøre brug af DKFDS.init() eller initiere komponenten manuelt med nedenstående:

new DKFDS.Navigation().init();

Header