Gå til sidens indhold

Kode

Headers

Installation

HTML Struktur

<header class="header">

    <!-- Start: Portal header -->
    <div class="portal-header">
        <div class="container portal-header-inner">
            <!-- Start: Portallogo -->
            <a href="#" class="logo"><span
                    class="d-none d-print-block">Portalnavn</span></a>
            <!-- Slut: Portallogo -->

            <button
                class="button button-tertiary button-menu-open js-menu-open ml-auto d-print-none"
                aria-haspopup="menu" title="Åben mobil menu">Menu</button>

            <!-- Start: Persondetaljer -->
            <div class="portal-info">
                <p class="user"><span class="weight-semibold">Christian
                        Emil Vestergaard
                        Christensen</span><br />Københavns Urmager og Værksted v/Martin Elsig</p>
                    <a href="#"
                        class="button button-secondary d-print-none"
                        role="button">
                        Log af
                    </a>
            </div>
            <!-- Slut: Persondetaljer -->
        </div>
    </div>
    <!-- Slut: Portal header -->

    <!-- Start: Løsningsheader -->
    <div class="solution-header">
        <div class="container solution-header-inner">
            <!-- Start: Løsningstitel -->
            <div class="solution-heading">
                <a href="#">En langt langt længere løsningstitel</a>
            </div>
            <!-- Slut: Løsningstitel -->

            <!-- Start: Information om myndighed -->
            <div class="solution-info">
                <p class="h5 authority-name">Myndighedsnavn</p>
                <p>
                    Support: 12 34 56 78
                    <span class="d-print-none"> ·
                        <a href="javascript:void(0);"
                            data-micromodal-trigger="modal-contact"
                            class="function-link d-inline-block">
                            <svg class="icon-svg" aria-hidden="true" focusable="false"><use xlink:href="#card-text-outline"></use></svg>Kontakt
                        </a>
                    </span>
                </p>
            </div>
            <!-- Slut: Information om myndighed -->
        </div>
    </div>
    <!-- Slut: Løsningsheader -->

    <!-- Start: Navigation (Valgfri) -->
    <div class="overlay"></div>
    <nav class="nav">
        <button
            class="button button-secondary button-menu-close js-menu-close"
            title="Luk mobil menu">
            <svg class="icon-svg" focusable="false" 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" role="menu">
                    <li role="none">
                        <a href="#" role="menuitem" class="nav-link">
                            <span>Første menupunkt</span>
                        </a>
                    </li>
                    <li role="none">
                        <a href="#" class="nav-link" role="menuitem">
                            <span>Andet menupunkt</span>
                        </a>
                    </li>
                    <li role="none" class="current">
                        <div class="overflow-menu">
                            <button
                                class="button-overflow-menu js-dropdown js-dropdown--responsive-collapse"
                                role="menuitem" aria-current="current"
                                data-js-target="#headeroverflow1"
                                aria-haspopup="true" aria-expanded="false">
                                <span>Tredje menupunkt</span>
                            </button>
                            <div class="overflow-menu-inner"
                                id="headeroverflow1" aria-hidden="true">
                                <ul class="overflow-list" role="menu">
                                    <li role="none">
                                        <a href="#"
                                            role="menuitem">Subsektion med
                                            en meget lang titel som går i
                                            flere linier</a>
                                    </li>
                                    <li role="none" class="active">
                                        <a href="#" role="menuitem"
                                            aria-current="page">Subsektion
                                            title</a>
                                    </li>
                                    <li role="none">
                                        <a href="#"
                                            role="menuitem">Subsektion
                                            title</a>
                                    </li>
                                    <li role="none">
                                        <a href="#"
                                            role="menuitem">Subsektion
                                            title som også er forholdsvis
                                            lang</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- Slut: Hovedmenu -->

        <!-- Start: Sekundær menu (Valgfri) -->
        <div class="navbar">
            <div class="navbar-inner container">
                <div class="nav-secondary">
                    <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" focusable="false" aria-hidden="true"><use xlink:href="#menu-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>
        <!-- Slut: Sekundær menu -->

        <!-- Start: Ekstra række (Valgfri) -->
        <div class="navbar">
            <div class="navbar-inner navbar-context-actions container">
                <div class="nav-actions">
                    <a href=""
                        class="function-link"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#printer"></use></svg>Funktionsikon</a>
                    <a href=""
                        class="function-link"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#content-save"></use></svg>Funktionsikon</a>
                </div>
            </div>
        </div>
        <!-- Slut: Ekstra række -->

        <!-- Start: Informationer vist i mobilmenu -->
        <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="javascript:void(0);"
                    class="function-link d-inline-block">
                    <svg class="icon-svg" aria-hidden="true" focusable="false"><use xlink:href="#card-text-outline"></use></svg>
                    Kontakt
                </a>
            </p>
        </div>
        <!-- Slut: Informationer vist i mobilmenu -->
    </nav>
    <!-- Slut: Navigation -->
</header>

Portal header

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

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

Løsningsheader

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.

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.

Hovedmenu

Hovedmenuen indeholder selve løsningens navigation.

Ekstra rækker

Ekstra navigationsrækker kan indeholde alt lige fra knapper, links til modalvinduer, 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.

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();