Gå til sidens indhold

Vælg et tema

Luk

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


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.

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>