Gå til sidens indhold
Det Fælles DesignsystemDevelop

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Komponenter

Header

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: header-with-navigation
Eksempel på header

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-simple
Eksempel

Header med navigation og søgefelt

Åbn dette eksempel i et nyt vindue: header-with-navigation
Eksempel

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: header-switch-language
Eksempel

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.

Kodeeksempel
<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.

Kodeeksempel
<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 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:

Kodeeksempel
<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 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 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:

Kodeeksempel
<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 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:

Kodeeksempel
<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:

Kodeeksempel
<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:

Kodeeksempel
<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">
                            <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:

Kodeeksempel
<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">
                    <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.

Sørg for at anvende aria-current="page" på det link i headeren, som viser den aktuelle side. Hvis du er på en underside (fx på en side vist i venstremenuen), men stadig har et link fremhævet i headeren, skal du bruge aria-current="true" i stedet.

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:

Kodeeksempel
<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 href="#language"></use></svg>Dansk
            </button>
            <div class="overflow-menu-inner select-language-list collapsed"
                id="header-language">
                <ul class='overflow-list'>
                    <li><a href="?lang=da" lang="da" aria-current="true">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:

Kodeeksempel
<div class="language-switcher-mobile">
    <h3>Vælg sprog</h3>
    <ul>
        <li><a href="?lang=da" lang="da"
                aria-current="true"><svg class="icon-svg" focusable="false" aria-hidden="true"><use href="#check"></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.

Mobilmenuen initieres med:

new DKFDS.Navigation().init();

Hvis man anvender menupunkter med undermenuer, skal disse initieres med:

new Dropdown(document.getElementById('OVERFLOW-BUTTON-ID')).init();

Undermenuer i mobilmenuen initieres med:

new MenuDropdown(document.getElementById('MENUOVERFLOW-BUTTON-ID')).init();

Bemærk, at man selv er ansvarlig for JavaScript og funktionalitet til sprogvælgeren. Funktionen til at åbne og lukke sprogvælgeren initieres på samme måde som menupunkter med undermenuer.

Referencer

Eksempler

Åbn i et nyt vindue

Anders Andersen, Forsikringens Forsikringsfirma

 Løsningstitel

Myndighedsnavn Support: 12 34 56 78

Myndighedsnavn Support: 12 34 56 78

Anders AndersenForsikringens Forsikringsfirma

 
<div class="header">
    <fds-portal-info>
        <a slot="logo" href="#" target="_blank"><img id="example-header-logo" src="/assets/img/logo_virk.svg" alt="Portalnavn"></a>
        <fds-drawer-opener slot="drawer-opener" drawer="drawer-example-default" class="d-block d-lg-none"></fds-drawer-opener>
        <button slot="log-off-button">
            <svg class="icon-svg" focusable="false" aria-hidden="true">
                <use href="#lock"></use>
            </svg>Log af
        </button>
        <p slot="user">Anders Andersen, Forsikringens Forsikringsfirma</p>
    </fds-portal-info>

    <fds-solution-info>
        <a slot="solution-heading" href="javascript:void(0);">Løsningstitel</a>
        <p slot="additional-info" class="d-none d-lg-block">
            <strong class="authority-name">Myndighedsnavn</strong>
            <span>Support: 12 34 56 78</span>
        </p>
    </fds-solution-info>

    <fds-main-menu>
        <div class="main-menu-inner d-block d-lg-flex">
            <nav aria-label="Eksemplets hovedmenu" class="d-none d-lg-block">
                <ul>
                    <li>
                        <fds-dropdown-menu expanded="false">
                            <button><span>Første menupunkt</span></button>
                            <div>
                                <ul>
                                    <li><a href="javascript:void(0);"><span>Undermenu</span></a></li>
                                    <li><a href="javascript:void(0);"><span>Undermenu</span></a></li>
                                    <li><a href="javascript:void(0);"><span>Undermenu</span></a></li>
                                    <li><a href="javascript:void(0);"><span>Undermenu</span></a></li>
                                </ul>
                            </div>
                        </fds-dropdown-menu>
                    </li>
                    <li><a href="javascript:void(0);"><span>Andet menupunkt</span></a></li>
                    <li>
                        <fds-dropdown-menu expanded="false">
                            <button><span>Tredje menupunkt</span></button>
                            <div>
                                <ul>
                                    <li><a href="javascript:void(0);"><span>Undermenu</span></a></li>
                                    <li><a href="javascript:void(0);" aria-current="page"><span>Undermenu</span></a></li>
                                    <li><a href="javascript:void(0);"><span>Undermenu</span></a></li>
                                </ul>
                            </div>
                        </fds-dropdown-menu>
                    </li>
                    <li><a href="javascript:void(0);"><span>Fjerde menupunkt</span></a></li>
                    <li>
                        <fds-dropdown-menu expanded="false">
                            <button><span>Femte menupunkt</span></button>
                            <div>
                                <ul>
                                    <li><a href="javascript:void(0);"><span>Undermenu</span></a></li>
                                    <li><a href="javascript:void(0);"><span>Undermenu</span></a></li>
                                    <li><a href="javascript:void(0);"><span>Undermenu</span></a></li>
                                </ul>
                            </div>
                        </fds-dropdown-menu>
                    </li>
                </ul>
            </nav>

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

        </div>
    </fds-main-menu>

    <fds-drawer id="drawer-example-default" class="d-block d-lg-none" heading-id="hea28e31cf7">
        <div class="mobile-drawer">

            <fds-main-menu>
                <nav aria-label="Eksemplets mobilmenu">
                    <ul>
                        <li>
                            <fds-dropdown-menu expanded="false">
                                <button><span>Første menupunkt</span></button>
                                <div>
                                    <ul>
                                        <li><a href="javascript:void(0);"><span>Undermenu</span></a></li>
                                        <li><a href="javascript:void(0);"><span>Undermenu</span></a></li>
                                        <li><a href="javascript:void(0);"><span>Undermenu</span></a></li>
                                        <li><a href="javascript:void(0);"><span>Undermenu</span></a></li>
                                    </ul>
                                </div>
                            </fds-dropdown-menu>
                        </li>
                        <li><a href="javascript:void(0);"><span>Andet menupunkt</span></a></li>
                        <li>
                            <fds-dropdown-menu expanded="false">
                                <button><span>Tredje menupunkt</span></button>
                                <div>
                                    <ul>
                                        <li><a href="javascript:void(0);"><span>Undermenu</span></a></li>
                                        <li><a href="javascript:void(0);" aria-current="page"><span>Undermenu</span></a></li>
                                        <li><a href="javascript:void(0);"><span>Undermenu</span></a></li>
                                    </ul>
                                </div>
                            </fds-dropdown-menu>
                        </li>
                        <li><a href="javascript:void(0);"><span>Fjerde menupunkt</span></a></li>
                        <li>
                            <fds-dropdown-menu expanded="false">
                                <button><span>Femte menupunkt</span></button>
                                <div>
                                    <ul>
                                        <li><a href="javascript:void(0);"><span>Undermenu</span></a></li>
                                        <li><a href="javascript:void(0);"><span>Undermenu</span></a></li>
                                        <li><a href="javascript:void(0);"><span>Undermenu</span></a></li>
                                    </ul>
                                </div>
                            </fds-dropdown-menu>
                        </li>
                    </ul>
                </nav>
            </fds-main-menu>

            <fds-solution-info>
                <p slot="additional-info">
                    <strong class="authority-name">Myndighedsnavn</strong>
                    <span>Support: 12 34 56 78</span>
                </p>
            </fds-solution-info>

            <fds-portal-info>
                <button slot="log-off-button">
                    <svg class="icon-svg" focusable="false" aria-hidden="true">
                        <use href="#lock"></use>
                    </svg>Log af
                </button>
                <p slot="user"><span class="mb-3">Anders Andersen</span><span>Forsikringens Forsikringsfirma</span></p>
            </fds-portal-info>

        </div>
    </fds-drawer>
</div>

Brug <div class="main-menu-inner"> i <fds-main-menu> i desktop-versionen. Udelad wrapper og klasse, når menuen placeres i en <fds-drawer>.

Konfiguration

fds-drawer-opener

Attributter

Attribut Beskrivelse
drawer ID på den drawer, der skal åbnes ved tryk på knappen.
button-text Tekst på knappen.

fds-drawer

Attributter

Attribut Beskrivelse
open Hvis til stede, vil menuen være åben.
heading Tekst der skal vises øverst i menuen. Default er ‘Menu’.
close-button-text Tekst på luk-knappen i menuen. Default er ‘Luk’.
ready Sæt til ‘false’ hvis initialisering af menuen skal ske manuelt i stedet for ved indlæsning af DOM’en.
heading-id Sæt et specifikt id til titlen inde i menuen.

fds-main-menu

Funktioner

Funktion Beskrivelse
rebuildMoreMenu() Genbyg mere-menuen såfremt behovet opstår (kun muligt ved desktop-visning)

fds-portal-info

Slots

Slot Beskrivelse
user Brugeroplysninger. Placeres til venstre for log af-knappen.
log-off-button Log af-knap. VIl blive placeret i højre side af portallinjen.
logo Logo. Placeres i venstre side af portallinjen.
drawer-opener Placeres samme sted som log af-knappen. Brug hjælpeklasser til at styre ved hvilket breakpoint knappen skal vises.

fds-solution-info

Slots

Slot Beskrivelse
solution-heading Løsningens navn. Vises i venstre side.
additional-info Information vist i højre side af løsningslinjen.
drawer-opener Bør kun anvendes, hvis det ikke er muligt at vise knappen i portallinjen. Brug hjælpeklasser til at styre ved hvilket breakpoint knappen skal vises.

Vi indsamler statistik ved hjælp af tredjepartscookies til at forbedre brugeroplevelsen.

Alle indsamlede data anonymiseres.

Læs mere om vores brug af cookies