Gå til sidens indhold

Kode

Trinindikatorer

Eksempler og retningslinjer

Installation

HTML Struktur

<div class="overflow-menu  overflow-menu--open-right ">
    <button class="button-overflow-menu js-dropdown "
        data-js-target="overflow5" aria-haspopup="true"
        aria-expanded="false">
        Trin 3 af 5
        <svg class="icon-svg" aria-hidden="true" focusable="false"><use xlink:href="#menu-down"></use></svg>
        <span class="sr-only">Åbner overflow menu</span>
    </button>
    <div class="overflow-menu-inner" id="overflow5" aria-hidden="true">

        <ul class='sidenav-list'>
            <li>
                <a href='#'>
                    1. Trin 1
                    <span class='sidenav-icon'>
                        <svg class='icon-svg' aria-hidden='true' focusable='false' tabindex='-1'><use xlink:href='#check'></use></svg>
                    </span>
                </a>
            </li>
            <li class='active current'>
                <a href='#'>
                    2. Trin 2 (valgt)
                </a>
            </li>
            <li>
                <a href='#'>
                    3. Trin 3
                </a>
            </li>
        </ul>

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

Tilgængelighed

Tringuides skal kunne aktiveres og håndteres fra tastatur og brugeren skal kunne anvende tab-tasten til navigation.

Tringuides kan have et højt kognitivt niveau. Før du vælger at anvende en tringuide, bør du teste en prototype med en alternativ løsning for at se, om det overhovedet er nødvendigt med en tringuide.

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 sidenavigation, således at komponenten vises i en kolonne til venstre for indholdet.

Responsiv

<div
    class="overflow-menu overflow-menu--open-right overflow-menu--lg-no-responsive ">
    <button class="button-overflow-menu js-dropdown"
        data-js-target="overflow4" aria-haspopup="true"
        aria-expanded="false">
        Trin 3 af 5
        <svg class="icon-svg" aria-hidden="true" focusable="false"><use xlink:href="#menu-down"></use></svg>
        <span class="sr-only">Åbner overflow menu</span>
    </button>
    <div class="overflow-menu-inner" id="overflow4" aria-hidden="true">
        <ul class="sidenav-list">
            <li>
                <a href="#">
                    1. Trin 1
                    <span class="sidenav-icon">
                        <svg class="icon-svg" aria-hidden="true" focusable="false"><use xlink:href="#check"></use></svg>
                    </span>
                </a>
            </li>
            <li class="active current">
                <a href="#">
                    2. Trin 2 (valgt)
                </a>
            </li>
            <li>
                <a href="#">
                    3. Trin 3
                </a>
            </li>
        </ul>
    </div>
</div>

Klikbar

<ul class="sidenav-list">
    <li>
        <a href="">
            1. Trin 1

            <span class="sidenav-icon">
                <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#check"></use></svg>
            </span>

        </a>
    </li>
    <li class=" active current">
        <a href="">
            2. Trin 2

        </a>
    </li>
    <li>
        <a href="">
            3. Trin 3

        </a>
    </li>
</ul>

Låst

<ul class="sidenav-list sidenav-list-locked">
    <li>
        <a tabindex="-1" aria-disabled="true">
            1. Trin 1

            <span class="sidenav-icon">
                <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#check"></use></svg>
            </span>

        </a>
    </li>
    <li class="disabled active current">
        <a tabindex="-1" aria-disabled="true">
            2. Trin 2 (valgt)

        </a>
    </li>
    <li>
        <a tabindex="-1" aria-disabled="true">
            3. Trin 3

        </a>
    </li>
</ul>

Ekstra information

<ul class="sidenav-list">
    <li>
        <a href="">
            <div class="d-inline-block">
                1. Trin 1

                <p class="sidenav-information">Informationstekst for trin 1
                </p>

            </div>

            <span class="sidenav-icon">
                <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#check"></use></svg>
            </span>

        </a>
    </li>
    <li class=" active current">
        <a href="">
            <div class="d-inline-block">
                2. Trin 2 (valgt)

                <p class="sidenav-information">Informationstekst for trin 2
                </p>

            </div>

        </a>
    </li>
    <li>
        <a href="">
            <div class="d-inline-block">
                3. Trin 4

                <p class="sidenav-information">Informationstekst for trin 3
                </p>

            </div>

        </a>
    </li>
</ul>