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.
Responsiv
Klikbar
<nav>
<ul class="sidenav-list" role="menu">
<li role="none">
<a href="" role="menuitem">
<span class="sidenav-number">1.</span> <span
class="sidenav-title">Trin 1</span>
<span class="sidenav-icon">
<svg class="icon-svg" aria-label="Gennemført" aria-hidden="true"><use xlink:href="#done"></use></svg>
</span>
<span class="sidenav-information">Informationstekst for
trin 1</span>
</a>
</li>
<li class=" active current" role="none">
<a href="" role="menuitem" aria-current="page"
aria-current="page">
<span class="sidenav-number">2.</span> <span
class="sidenav-title">Trin 2</span>
<span class="sidenav-information">Informationstekst for
trin 2</span>
</a>
</li>
<li role="none">
<a href="" role="menuitem">
<span class="sidenav-number">3.</span> <span
class="sidenav-title">Trin 3</span>
<span class="sidenav-information">Informationstekst for
trin 3</span>
</a>
</li>
</ul>
</nav>
Låst
<nav>
<ul class="sidenav-list" role="menu">
<li class="disabled " role="none">
<a role="menuitem">
<span class="sidenav-number">1.</span> <span
class="sidenav-title">Trin 1</span>
<span class="sidenav-icon">
<svg class="icon-svg" aria-label="Gennemført" aria-hidden="true"><use xlink:href="#done"></use></svg>
</span>
<span class="sidenav-information">Informationstekst for
trin 1</span>
</a>
</li>
<li class="disabled active current" role="none">
<a role="menuitem" aria-current="page" aria-current="page">
<span class="sidenav-number">2.</span> <span
class="sidenav-title">Trin 2</span>
<span class="sidenav-information">Informationstekst for
trin 2</span>
</a>
</li>
<li class="disabled " role="none">
<a role="menuitem">
<span class="sidenav-number">3.</span> <span
class="sidenav-title">Trin 3</span>
<span class="sidenav-information">Informationstekst for
trin 3</span>
</a>
</li>
</ul>
</nav>
Ekstra information
<nav>
<ul class="sidenav-list" role="menu">
<li role="none">
<a href="" role="menuitem">
<span class="sidenav-number">1.</span> <span
class="sidenav-title">Trin 1</span>
<span class="sidenav-icon">
<svg class="icon-svg" aria-label="Gennemført" aria-hidden="true"><use xlink:href="#done"></use></svg>
</span>
<span class="sidenav-information">Informationstekst for
trin 1</span>
</a>
</li>
<li class=" active current" role="none">
<a href="" role="menuitem" aria-current="page"
aria-current="page">
<span class="sidenav-number">2.</span> <span
class="sidenav-title">Trin 2</span>
<span class="sidenav-information">Informationstekst for
trin 2</span>
</a>
</li>
<li role="none">
<a href="" role="menuitem">
<span class="sidenav-number">3.</span> <span
class="sidenav-title">Trin 3</span>
<span class="sidenav-information">Informationstekst for
trin 3</span>
</a>
</li>
</ul>
</nav>