Skip to main content

Navigasjon

Navigasjonsbar-elementet tilpasser seg til skjermstørrelsen siden er åpnet i. Hvis det er nødvendig med spesifikk størrelse på navigasjonsbaren, må elementet bli plassert i en <div> med ønsket width.

Header med ikon​

Header uten ikon​


<nav class="kv-nav__header">
<img src="../../img/logo/KV_M.svg" alt="Kartverket Logo"/>
<span class="material-symbols-outlined">person</span>
</nav>

<nav class="kv-nav__header">
<img src="../../img/logo/KV_M.svg" alt="Kartverket Logo"/>
</nav>

Ankermeny​

Ankermeny kan brukes på sider med mye innhold. Ved å trykke på menyen scroller man ned til overskriften.

arrow_downwardInput
kv-anker--xs
arrow_downwardInput
kv-anker--s
arrow_downwardInput
kv-anker--m
arrow_downwardInput
kv-anker--l

Eksempelbruk​

Størrelsen endres ved å bytte klassen kv-anker--xs til kv-anker--m.

<div class="anker--xs">
<span class="material-symbols-outlined">arrow_downward</span>
<a href="#id">Input</a>
</div>

Tabs​

Følgende element bruker active__link--demo-klasse for å demonstrere et valgt eller aktivt side. Dette må justeres i hvert prosjekt.


<div class="kv-tab">
  <button class="kv-tab__links active__link--demo" onclick="#function()">En</button>
  <button class="kv-tab__links" onclick="#function()">To</button>
  <button class="kv-tab__links" onclick="#function()">Tre</button>
</div>

Stegvise prosesser​

Visning på liten skjerm (Extra small/small)​

Stegvise prosesser visning på liten skjerm bruker --s-klasse. aria-current="step" settes på <li>-elementet eller nåværende steg der bruker er på. Ved fullført steg, settes data-status="complete" på <li>-elementet.


<div class="kv-stepper--s">
    <ol role="list" aria-label="Stegnavn">
        <li data-status="complete">
            <div class="kv-stepper--circle label label--sml"></div>
            <label class="label label--sml">Input Tekst</label>
        </li>
        <li data-status="complete">
            <div class="kv-stepper--circle label label--sml"></div>
            <label class="label label--sml">Input Tekst</label>
        </li>
        <li data-status="complete">
            <div class="kv-stepper--circle label label--sml"></div>
            <label class="detail detail--sml">Input Tekst</label>
        </li>
        <li data-status="complete">
            <div class="kv-stepper--circle label label--sml"></div>
            <label class="detail detail--sml">Input Tekst</label>
        </li>
        <li data-status="complete">
            <div class="kv-stepper--circle label label--sml"></div>
            <label class="detail detail--sml">Input Tekst</label>
        </li>
        <li aria-current="step">
            <div class="kv-stepper--circle label label--sml"></div>
            <label class="detail detail--sml">Input Tekst</label>
        </li>
        <li>
            <div class="kv-stepper--circle label label--sml"></div>
            <label class="detail detail--sml">Input Tekst</label>
        </li>
        <li>
            <div class="kv-stepper--circle label label--sml"></div>
            <label class="detail detail--sml">Input Tekst</label>
        </li>
    </ol>
</div>

Visning på stor skjerm (medium/large)​

Stegvise prosesser visning på stor skjerm bruker stepper--l-klasse. aria-current="step" settes på <li>-elementet eller nåværende steg der bruker er på. Ved fullført steg, settes data-status="complete" på <li>-elementet.


<div class="kv-stepper--l">
    <ol role="list" aria-label="Stegnavn">
        <li data-status="complete">
            <div class="kv-stepper--circle label label--sml"></div>
            <label class="label label--sml">Input Tekst</label>
        </li>
        <li data-status="complete">
            <div class="kv-stepper--circle label label--sml"></div>
            <label class="label label--sml">Input Tekst</label>
        </li>
        <li data-status="complete">
            <div class="kv-stepper--circle label label--sml"></div>
            <label class="detail detail--sml">Input Tekst</label>
        </li>
        <li data-status="complete">
            <div class="kv-stepper--circle label label--sml"></div>
            <label class="detail detail--sml">Input Tekst</label>
        </li>
        <li data-status="complete">
            <div class="kv-stepper--circle label label--sml"></div>
            <label class="detail detail--sml">Input Tekst</label>
        </li>
        <li aria-current="step">
            <div class="kv-stepper--circle label label--sml"></div>
            <label class="detail detail--sml">Input Tekst</label>
        </li>
        <li>
            <div class="kv-stepper--circle label label--sml"></div>
            <label class="detail detail--sml">Input Tekst</label>
        </li>
        <li>
            <div class="kv-stepper--circle label label--sml"></div>
            <label class="detail detail--sml">Input Tekst</label>
        </li>
    </ol>
</div>