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

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="#arrow-drop-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'>
                        <span class='sidenav-number'>1.</span><span
                            class='sidenav-title'>Lorem ipsum</span>
                        <span class='sidenav-icon'>
                            <svg class='icon-svg' aria-hidden='true' focusable='false' tabindex='-1'><use xlink:href='#done'></use></svg>
                        </span>
                    </a>
                </li>
                <li role='none' class='active current'>
                    <a href='#' role='menuitem' aria-current='page'>
                        <span class='sidenav-number'>2.</span><span
                            class='sidenav-title'>Dolor sit amet</span>
                    </a>
                </li>
                <li role='none'>
                    <a href='#' role='menuitem'>
                        <span class='sidenav-number'>3.</span><span
                            class='sidenav-title'>Consectetur adipiscing
                            elit</span>
                    </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.

Responsiv

Vis dette eksempel i et nyt vindue: tringuide-responsive-overflowmenu 
<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="#arrow-drop-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">
                        <span class='sidenav-number'>1.</span><span
                            class='sidenav-title'>Trin 1</span>
                        <span class="sidenav-icon">
                            <svg class="icon-svg" aria-hidden="true" focusable="false"><use xlink:href="#done"></use></svg>
                        </span>
                    </a>
                </li>
                <li class="active current" role="none">
                    <a href="#" role="menuitem" aria-current="page">
                        <span class='sidenav-number'>2.</span><span
                            class='sidenav-title'>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>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>

Klikbar

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

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

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