Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Kode
Trinindikator
Eksempler og retningslinjer
Installation
HTML Struktur
Hvis man gør brug af en trinindikator i forbindelse med en overflow menu komponent, så se venligst dokumentationen for implementering for overflow menu.
Aktivt og overstået trin i trinindikator
- Det aktive menupunkt skal have klassen
active
ogcurrent
. - For at indikere et overstået trin, kan der indsættes et ikon med klassen
sidenav-icon
. Dette ikon er sat til højre i trinet.
Varianter
Nedenstående varianter implementeres i et grid på samme måde som venstremenu, således at komponenten vises i en kolonne til venstre for indholdet.
Alle trin synlige
Kodeeksempel
<nav class="sidebar-col">
<ul class="sidenav-list" role="menu">
<li role="none">
<a href="javascript:void(0);" role="menuitem">
<span class="sidenav-number">1.</span>
<div>
<span>Trin 1</span>
</div>
<span class="sidenav-icon">
<svg class="icon-svg" aria-label="Gennemført" focusable="false"><use xlink:href="#done"></use></svg>
</span>
</a>
</li>
<li class="active current " role="none">
<a href="javascript:void(0);" role="menuitem" aria-current="page">
<span class="sidenav-number">2.</span>
<div>
<span>Trin 2</span>
</div>
</a>
</li>
<li role="none">
<a href="javascript:void(0);" role="menuitem">
<span class="sidenav-number">3.</span>
<div>
<span>Trin 3</span>
</div>
</a>
</li>
</ul>
</nav>
Responsiv
Låst
Kodeeksempel
<nav class="sidebar-col">
<ul class="sidenav-list" role="menu">
<li class="disabled " role="none">
<a role="menuitem">
<span class="sidenav-number">1.</span>
<div>
<span>Trin 1</span>
</div>
<span class="sidenav-icon">
<svg class="icon-svg" aria-label="Gennemført" focusable="false"><use xlink:href="#done"></use></svg>
</span>
</a>
</li>
<li class="disabled active current " role="none">
<a role="menuitem" aria-current="page">
<span class="sidenav-number">2.</span>
<div>
<span>Trin 2</span>
</div>
</a>
</li>
<li class="disabled " role="none">
<a role="menuitem">
<span class="sidenav-number">3.</span>
<div>
<span>Trin 3</span>
</div>
</a>
</li>
</ul>
</nav>
Ekstra information
Kodeeksempel
<nav class="sidebar-col">
<ul class="sidenav-list" role="menu">
<li role="none">
<a href="javascript:void(0);" role="menuitem">
<span class="sidenav-number">1.</span>
<div>
<span>Trin 1</span>
<span class="sidenav-information">Informationstekst for trin 1</span>
</div>
<span class="sidenav-icon">
<svg class="icon-svg" aria-label="Gennemført" focusable="false"><use xlink:href="#done"></use></svg>
</span>
</a>
</li>
<li class="active current " role="none">
<a href="javascript:void(0);" role="menuitem" aria-current="page">
<span class="sidenav-number">2.</span>
<div>
<span>Trin 2</span>
<span class="sidenav-information">Informationstekst for trin 2</span>
</div>
</a>
</li>
<li role="none">
<a href="javascript:void(0);" role="menuitem">
<span class="sidenav-number">3.</span>
<div>
<span>Trin 3</span>
<span class="sidenav-information">Informationstekst for trin 3</span>
</div>
</a>
</li>
</ul>
</nav>
Trinindikator med fejl
Tilføj klassen sidenav-error
til de liste-elementer, der er fejl i og anvend ikonet highlight-off
med en passende aria-label
.
Kodeeksempel
<div
class="overflow-menu overflow-menu--open-right overflow-menu--lg-no-responsive sidebar-col">
<button class="button-overflow-menu js-dropdown" data-js-target="trinindikator-error"
aria-haspopup="true" aria-expanded="false">
Trin 3 af 4
<svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#arrow-drop-down"></use></svg>
</button>
<div class="overflow-menu-inner" id="trinindikator-error" aria-hidden="true">
<nav class="sidebar-col">
<ul class="sidenav-list" role="menu">
<li class="sidenav-error" role="none">
<a href="javascript:void(0);" role="menuitem">
<span class="sidenav-number">1.</span>
<div>
<span>Trin 1</span>
</div>
<span class="sidenav-icon">
<svg class="icon-svg" aria-label="Fejl" focusable="false"><use xlink:href="#highlight-off"></use></svg>
</span>
</a>
</li>
<li role="none">
<a href="javascript:void(0);" role="menuitem">
<span class="sidenav-number">2.</span>
<div>
<span>Trin 2</span>
</div>
<span class="sidenav-icon">
<svg class="icon-svg" aria-label="Gennemført" focusable="false"><use xlink:href="#done"></use></svg>
</span>
</a>
</li>
<li class="active current " role="none">
<a href="javascript:void(0);" role="menuitem" aria-current="page">
<span class="sidenav-number">3.</span>
<div>
<span>Trin 3</span>
</div>
</a>
</li>
<li role="none">
<a href="javascript:void(0);" role="menuitem">
<span class="sidenav-number">4.</span>
<div>
<span>Trin 4</span>
</div>
</a>
</li>
</ul>
</nav>
</div>
</div>