Header

Komponenter

Headeren identificerer portalen, den ansvarlige myndighed og brugeren, der er logget ind med NemLog-in. Den fungerer også til navigation og overordnet styring af selvbetjeningsløsningen.

Åbn dette eksempel i et nyt vindue

Sådan bruges komponenten

Anvendes til

Brug headeren til at give brugeren et “ankerpunkt”, der er ens på tværs af trin og undersider i selvbetjeningsløsningen.

Brug headeren til at kommunikere portal, NemLog-in-oplysninger, ansvarlig myndighed, evt. med kontaktoplysninger.

En eventuel overordnet navigation (topnavigation) skal også placeres i headeren, så brugeren altid kan navigere rundt i selvbetjeningsløsningen.

Anvendes ikke til

Anvend ikke headeren andre steder i løsningen end i toppen af siden.

Brug ikke topnavigationen som faneblade, anvend da faneblade.

Vejledning

Tag et kig på eksemplerne på selvbetjeningsløsninger for at se, hvordan komponenten passer ind i en komplet løsning.

En header består af et antal rækker med forskelligt indhold.

Række 1 og række 2 er obligatoriske. Alle selvbetjeningsløsninger skal have portal-logo, login-info og løsningstitel som minimum.
Række 3 kan anvendes hvis nødvendigt.

Headerens rækker forklaret

Række 1 (obligatorisk)

Portal-logo, NemLog-in-oplysninger og “Log af” knap.

Række 2 (obligatorisk)

Selvbetjeningens navn (løsningstitel), ansvarshavende myndighed og eventuel support/kontaktoplysninger.

Række 3 (frivillig)

Navigation (topnavigation) i løsningen og søgefelt.

Varianter

Simpel header

Åbn dette eksempel i et nyt vindue

Header med navigation og søgefelt

Åbn dette eksempel i et nyt vindue

Menupunkter med dropdown

Menupunkter med dropdown-funktionalitet giver adgang til undermenupunkter, men er ikke et menupunkt i sig selv. Overvej om dropdown-menu er den rigtige løsning. Topnavigation kombineret med venstremenu giver større fleksibilitet og mulighed for flere niveauer i navigationen.

Responsivitet og breakpoints

På små skærme foldes indhold vedr. log ind-information, ansvarlig myndighed og eventuelle menupunkter ind i en “mobil”-menu. Vi anbefaler, at løsningen kun anvender denne visning, når der ikke længere er plads til indholdet på sidens bredde.

Menupunkter der ikke er plads til i sidens bredde samles i en “Mere”-menu, der vises som overflow-menu.

Header med sprogvælger

Hvis din selvbetjeningsløsning skal være tilgængelig på flere sprog, placeres sprogvælgeren både som overflow-menu øverst i række 1 og i sidens footer (se sprogvælger). Nedenstående eksempel viser udelukkende sprogvælgerens header-variant.

Åbn dette eksempel i et nyt vindue

Se komponenten i eksempelløsninger

Se komponenten i eksemplerne på selvbetjeningsløsninger.

Installation

HTML Struktur

Nedenstående eksempel viser den overordnede struktur i <header>-elementet. De øvrige afsnit indeholder uddybende kodeeksempler.

<header class="header">
    <div class="portal-info">...</div>
    <div class="solution-info">...</div>
    <div class="navigation-menu">...</div>
    <div class="overlay"></div>
    <div class="mobile-drawer" ...>
        <div class="menu-top">...</div>
        <nav class="navigation-menu-mobile" ...>...</nav>
        <div class="solution-info-mobile">...</div>
        <div class="portal-info-mobile">...</div>
    </div>
</header>

Placer <header>-elementet i din HTML-sides <body>-element.

Overlay og mobilmenu

Som standard ændres headeren til udelukkende at vise løsningstitel, evt. søgefelt og en menuknap, når skærmen er mindre end 992px bred. Headeren skal derfor altid indeholde nedenstående kode, som bruges på mindre skærme, for eksempel mobiltelefoner. Når menuen er åben, vises et mørkt overlay oven på det øvrige sideindhold.

<div class="overlay"></div>
<div class="mobile-drawer" role="dialog" aria-modal="true" aria-labelledby="menu-heading">

    <div class="menu-top">
        <h2 id="menu-heading" class="menu-heading">Menu</h2>
        <button class="function-link button-menu-close js-menu-close"
            aria-label="Luk menu"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#close"></use></svg>Luk</button>
    </div>

</div>

Det er muligt at ændre, hvornår headeren skal vise menuknappen, ved at bruge Sass-variablen $nav-responsive-breakpoint og derefter bygge CSS’en selv.

Række 1

Række 1 indeholder portal-logo, NemLog-in-oplysninger og “Log af” knap. Headeren skal altid indeholde denne række.

Der er to dele, som skal indsættes i <header>-elementet.

Første del skal indsættes øverst i headeren og indeholder koden, der vises på større skærme:

<div class="portal-info">
    <div class="portal-info-inner container">
        <a href="#" title="Gå til Portalnavns forside" aria-label="Portalnavn" class="logo">
            <span>Portalnavn</span>
        </a>
        <button class="function-link button-menu-open js-menu-open ml-auto d-print-none"
            aria-haspopup="dialog"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#menu"></use></svg>Menu</button>

        <div class="portal-user">
            <p class="user">
                Anders Andersen, Forsikringens Forsikringsfirma
            </p>

            <button
                class="function-link d-print-none log-off"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#lock"></use></svg>Log
                af</button>
        </div>
    </div>
</div>

Anden del skal indsættes nederst i mobilmenuen og indeholder koden, der vises på mindre skærme:

<div class="portal-info-mobile">
    <h3 class="sr-only">Bruger</h3>

    <p class="user">

        <span class="mb-3">Anders Andersen</span>
        <span>Forsikringens Forsikringsfirma</span>

    </p>

    <p>
        <button
            class="function-link d-print-none log-off"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#lock"></use></svg>Log
            af</button>
    </p>
</div>

Se eventuelt eksemplet med den overordnede struktur i headeren for nærmere detaljer om placering.

Række 2

Række 2 indeholder selvbetjeningens navn (løsningstitel), ansvarshavende myndighed og eventuel support/kontaktoplysninger. Headeren skal altid indeholde denne række.

Der er to dele, som skal indsættes i <header>-elementet.

Første del skal indsættes efter række 1 og indeholder koden, der vises på større skærme:

<div class="solution-info">
    <div class="solution-info-inner container">
        <div class="solution-heading">
            <a href="#">Løsningstitel</a>
        </div>

        <div class="additional-info">

            <p><strong class="authority-name">Myndighedsnavn</strong></p>

            <p>Support: 12 34 56 78</p>

        </div>

    </div>
</div>

Anden del skal indsættes i mobilmenuen før række 1 og indeholder koden, der vises på mindre skærme:

<div class="solution-info-mobile">
    <h3 class="sr-only">Myndighed</h3>

    <p class="mb-2"><strong class="authority-name">Myndighedsnavn</strong></p>

    <p>Support: 12 34 56 78</p>

</div>

Se eventuelt eksemplet med den overordnede struktur i headeren for nærmere detaljer om placering.

Række 3

Række 3 indeholder topnavigation i løsningen og søgefelt. Det er valgfrit, om headeren skal indeholde denne række.

Der er to dele, som skal indsættes i <header>-elementet.

Første del skal indsættes efter række 2 og indeholder koden, der vises på større skærme:

<div class="navigation-menu contains-search">
    <div class="navigation-menu-inner container">

        <nav class="nav" aria-label="Hovedmenu">
            <ul class="mainmenu">
                <li>
                    <a href="#" class="nav-link">
                        <span>Første menupunkt</span>
                    </a>
                </li>
                <li class="active">

                    <div class="submenu">
                        <button class="button-overflow-menu js-dropdown"
                            data-js-target="desktopmenu-2" aria-expanded="false"
                            aria-controls="desktopmenu-2">
                            <span>Andet menupunkt</span>
                        </button>
                        <div class="overflow-menu-inner collapsed" id="desktopmenu-2"
                            aria-hidden="true">
                            <ul class="overflow-list">
                                <li>
                                    <a href="#" class="nav-link">
                                        <span>Endnu en undermenu</span>
                                    </a>
                                </li>
                                <li class="active current">
                                    <a href="#" class="nav-link" aria-current="page">
                                        <span>Endnu en undermenu</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="nav-link">
                                        <span>Endnu en undermenu</span>
                                    </a>
                                </li>

                            </ul>
                        </div>
                    </div>

                </li>
                <li>
                    <a href="#" class="nav-link">
                        <span>Tredje menupunkt</span>
                    </a>
                </li>
            </ul>
        </nav>

        <div class="form-group search">
            <label for="header-search" class="sr-only">Søg efter indhold</label>
            <input class="form-input" id="header-search" name="header-search" type="search">
            <button class="button button-search">
                Søg
            </button>
        </div>

    </div>
</div>

Hvis række 3 indeholder menupunkter med undermenuer, husk at anvende korrekt opmærkning med aria-expanded og aria-controls (APG, Disclosure Pattern). Hvis løsningen anvender et søgefelt, skal dette indsættes i første kodedel som vist ovenover, men udelades fra koden til mobilmenuen.

Anden del skal indsættes i mobilmenuen før række 2 og indeholder koden, der vises på mindre skærme:

<nav class="navigation-menu-mobile" aria-label="Hovedmenu">
    <ul class="mainmenu">
        <li>
            <a href="#" class="nav-link">
                <span>Første menupunkt</span>
            </a>
        </li>
        <li class="active">

            <div class="submenu">
                <button class="button-mobile-menu js-menudropdown"
                    data-js-target="mobilemenu-2" aria-expanded="true"
                    aria-controls="mobilemenu-2">
                    <span>Andet menupunkt</span>
                </button>
                <div class="overflow-menu-inner" id="mobilemenu-2" aria-hidden="false">
                    <ul class="overflow-list">
                        <li>
                            <a href="#" class="nav-link">
                                <span>Endnu en undermenu</span>
                            </a>
                        </li>
                        <li class="active current">
                            <a href="#" class="nav-link" aria-current="page">
                                <span>Endnu en undermenu</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="nav-link">
                                <span>Endnu en undermenu</span>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>

        </li>
        <li>
            <a href="#" class="nav-link">
                <span>Tredje menupunkt</span>
            </a>
        </li>
    </ul>
</nav>

Se eventuelt eksemplet med den overordnede struktur i headeren for nærmere detaljer om placering.

Topnavigation og venstremenu

Hvis løsningen anvender både en topnavigation og en venstremenu til at vise links til undersider, så skal venstremenuen skjules på mindre skærme og mobilmenuen skal indeholde alle links fra begge menuer. Her er man selv ansvarlig for at sikre, at venstremenuen vises og skjules på de rette tidspunkter, for eksempel ved at anvende hjælpeklasser for display, samt at mobilmenuen indeholder de korrekte links.

Sprogvælger

Hvis man anvender en sprogvælger i headeren, er der to dele, som skal indsættes i <header>-elementet.

Første del skal indsættes før række 1 (portalinfo) og indeholder koden, der vises på større skærme:

<div class="language-switcher-header">
    <div class="container">
        <div class="overflow-menu overflow-menu--open-right">
            <button class="button-overflow-menu js-dropdown select-language-button"
                data-js-target="header-language" aria-expanded="false"
                aria-controls="header-language">
                <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#language"></use></svg>Dansk
            </button>
            <div class="overflow-menu-inner select-language-list" id="header-language"
                aria-hidden="true">
                <ul class='overflow-list'>
                    <li><a href="?lang=da" lang="da" aria-label="Valgt sprog: Dansk">Dansk</a>
                    </li>
                    <li><a href="?lang=en-GB" lang="en-GB">English</a></li>
                    <li><a href="?lang=de" lang="de">Deutsch</a></li>
                    <li><a href="?lang=pl" lang="pl">Polski</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Anden del skal indsættes i mobilmenuen, igen før række 1 (portalinfo) og indeholder koden, der vises på mindre skærme:

<div class="language-switcher-mobile">
    <h3>Valgt sprog</h3>
    <ul>
        <li><a href="?lang=da" lang="da"
                aria-label="Valgt sprog: Dansk"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#done"></use></svg>Dansk</a>
        </li>
        <li><a href="?lang=en-GB" lang="en-GB">English</a></li>
        <li><a href="?lang=de" lang="de">Deutsch</a></li>
        <li><a href="?lang=pl" lang="pl">Polski</a></li>
    </ul>
</div>

JavaScript

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

Bemærk, at man selv er ansvarlig for JavaScript og funktionalitet til sprogvælgeren.

Referencer

ARIA Authoring Practices Guide (APG): Disclosure (Show/Hide) Pattern

Vælg et tema

Sådan bruges komponenten

Anvendes til

Anvendes ikke til

Vejledning

Headerens rækker forklaret

Række 1 (obligatorisk)

Række 2 (obligatorisk)

Række 3 (frivillig)

Varianter

Simpel header

Header med navigation og søgefelt

Menupunkter med dropdown

Responsivitet og breakpoints

Header med sprogvælger

Se komponenten i eksempelløsninger

Installation

HTML Struktur

Overlay og mobilmenu

Række 1

Række 2

Række 3

Topnavigation og venstremenu

Sprogvælger

JavaScript

Referencer