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 2 af 3
        <svg class="icon-svg" aria-hidden="true" focusable="false"><use xlink:href="#menu-down"></use></svg>
    </button>
    <div class="overflow-menu-inner" id="overflow5" aria-hidden="true">

        <nav>
            <ul class='sidenav-list' role='menu'>
                <li role='none'>
                    <a href='#' role='menuitem'>
                        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 role='none' class='active current'>
                    <a href='#' role='menuitem' aria-current='page'>
                        2. Trin 2 (valgt)
                    </a>
                </li>
                <li role='none'>
                    <a href='#' role='menuitem'>
                        3. Trin 3
                    </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 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 2 af 3
        <svg class="icon-svg" aria-hidden="true" focusable="false"><use xlink:href="#menu-down"></use></svg>
    </button>
    <div class="overflow-menu-inner" id="overflow4" aria-hidden="true">
        <nav>
            <ul class="sidenav-list" role="menu">
                <li role="none">
                    <a href="#" role="menuitem">
                        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" role="none">
                    <a href="#" role="menuitem" aria-current="page">
                        2. Trin 2 (valgt)
                    </a>
                </li>
                <li role="none">
                    <a href="#" role="menuitem">
                        3. Trin 3
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>

Klikbar

<nav>
    <ul class="sidenav-list" role="menu">
        <li role="none">
            <a href="" role="menuitem">
                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" role="none">
            <a href="" role="menuitem" aria-current="page">
                2. Trin 2

            </a>
        </li>
        <li role="none">
            <a href="" role="menuitem">
                3. Trin 3

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

Låst

<nav>
    <ul class="sidenav-list sidenav-list-locked" role="menu">
        <li class="disabled " role="none">
            <a tabindex="-1" aria-disabled="true" role="menuitem">
                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" role="none">
            <a tabindex="-1" aria-disabled="true" role="menuitem"
                aria-current="page">
                2. Trin 2 (valgt)

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

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

Ekstra information

<nav>
    <ul class="sidenav-list" role="menu">
        <li role="none">
            <a href="" role="menuitem">
                <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" role="none">
            <a href="" role="menuitem" aria-current="page">
                <div class="d-inline-block">
                    2. Trin 2 (valgt)

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

                </div>

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

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

                </div>

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