Gå til sidens indhold

Komponenter

Overflow menu

Du kan bruge overflow menuer til at vise eller skjule en liste af links eller knapper. Når brugeren klikker på menulinjen, folder listen sig ud.

Retningslinjer

Tilgængelighed

  • Overflow menuer skal kunne aktiveres og håndteres fra tastatur.
  • Overflow menuer skjuler indhold for brugeren og bør anvendes i begrænset omfang.
  • Overflow menuer skal kunne aktiveres og håndteres fra tastatur og brugeren skal kunne anvende tab-tasten til navigation.

Brugervenlighed

Anvendes til

  • Overflow menuer anvendes i tilfælde, hvor brugeren skal tilbydes ekstra funktionalitet på begrænset plads.
  • Overflow menuer er velegnede til funktioner som fx profilhåndtering o.l.

Anvendes ikke til

  • Overflow menu anvendes ikke til primær navigation.
  • Overflow menu bør ikke have mindre end 3 punkter og mere end 7-10 punkter.

Vejledning

  • Indholdet af en dropdown menu bør være handlingsanvisende i et klart sprog.
  • Brugerspecifikke handlinger som fx ”Slet” bør placeres til sidst i menuen for at undgå utilsigtede valg.
  • Overvej om det er nødvendigt med dette ekstra navigationselement.

Standard

<div class="container pt-6">

    <div class="overflow-menu  overflow-menu--open-right ">
        <button class="button-overflow-menu js-dropdown "
            data-js-target="#overflow1" aria-haspopup="true"
            aria-expanded="false">
            Overflow menu
            <svg class="icon-svg" aria-hidden="true" focusable="false" tabindex="-1"><use xlink:href="#dots-vertical"></use></svg>
            <span class="sr-only">Åbner overflow menu</span>
        </button>
        <div class="overflow-menu-inner" id="overflow1" aria-hidden="true">

            <ul class='overflow-list'>
                <li><button>Option 1</button></li>
                <li><button>Option 2</button></li>
                <li><a href='#'>Option 3 as link</a></li>
                <li><button>Option 4 is longer text</button></li>
            </ul>

        </div>
    </div>

</div>

Overflow menu - åbner til venstre

<div class="container pt-6 align-text-right">

    <div class="overflow-menu  overflow-menu--open-left ">
        <button class="button-overflow-menu js-dropdown "
            data-js-target="#overflow2" aria-haspopup="true"
            aria-expanded="false">
            Overflow menu
            <svg class="icon-svg" aria-hidden="true" focusable="false" tabindex="-1"><use xlink:href="#dots-vertical"></use></svg>
            <span class="sr-only">Åbner overflow menu</span>
        </button>
        <div class="overflow-menu-inner" id="overflow2" aria-hidden="true">

            <ul class='overflow-list'>
                <li><button>Option 1</button></li>
                <li><button>Option 2</button></li>
                <li><a href='#'>Option 3 as link</a></li>
                <li><button>Option 4 is longer text</button></li>
            </ul>

        </div>
    </div>

</div>