Gå til sidens indhold
Det Fælles Designsystem

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

Åbn dette eksempel i et nyt vindue: tringuide-overflowmenu
Eksempel på trinindikator i overflow menu

Eksempler og retningslinjer

Installation

HTML Struktur

Kodeeksempel
<div class="overflow-menu overflow-menu--open-right sidebar-col">
    <button class="button-overflow-menu js-dropdown" data-js-target="trinindikator-overflow"
        aria-haspopup="true" aria-expanded="false">
        Trin 2 af 3
        <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-overflow" aria-hidden="true">

        <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>Lorem ipsum</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>Dolor sit amet</span>
                        </div>
                    </a>
                </li>
                <li role="none">
                    <a href="javascript:void(0);" role="menuitem">
                        <span class="sidenav-number">3.</span>
                        <div>
                            <span>Consectetur adipiscing elit</span>
                        </div>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>

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 og current.
  • 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

Vis dette eksempel i et nyt vindue: tringuide-clickable
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

Vis dette eksempel i et nyt vindue: tringuide-responsive-overflowmenu
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-responsiv"
        aria-haspopup="true" aria-expanded="false">
        Trin 2 af 3
        <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-responsiv" aria-hidden="true">

        <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>
    </div>
</div>

Låst

Vis dette eksempel i et nyt vindue: tringuide-locked
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

Vis dette eksempel i et nyt vindue: tringuide-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.

Vis dette eksempel i et nyt vindue: tringuide-error-responsive
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>