Vælg et tema
LukVælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
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-secondary 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-module="modal"
data-target="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.
Portal headeren kan gøres kompakt med klassen portal-header-compact.
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.
Navigation
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();