Gå til sidens indhold

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

Overflow menu

Eksempel på overflow menu komponent

Eksempler og retningslinjer

Installation

HTML Struktur

Kodeeksempel
<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" focusable="false" aria-hidden="true"><use xlink:href="#more-vert"></use></svg>
    </button>
    <div class="overflow-menu-inner" id="overflow1" aria-hidden="true">
        <ul class='overflow-list'>
            <li><button>Mulighed 1</button></li>
            <li><button>Mulighed 2</button></li>
            <li><a href='#'>Mulighed 3 er et link</a></li>
            <li><button>Mulighed 4 er en længere tekst</button></li>
        </ul>
    </div>
</div>

Klasser

Følgende aria tags styrer hvorvidt menuen er foldet ud:

  • Button: aria-expanded="false"
  • Overflow menu: aria-hidden="true"

Følgende klasser styrer i hvilken retning menuen skal folde ud:

  • Venstre: .overflow-menu--open-left
  • Højre: .overflow-menu--open-right

Der er lavet et specifikt liste element til overflow-menuen (se .overflow-list) som kan indeholde links eller buttons. Det er dog ikke nødvendigt at benytte denne liste. Overflow-menuen er bare en container hvor man kan placere det indhold man nu har lyst til.

Skjul/vis

Initialiser collapse/expand javascript med at placere følgende på button elementet: class="js-dropdown" data-js-target="#overflow1"

Elementet som skal collapses/expandes skal have et matchende id id="overflow1" (placeres på .overflow-menu-inner)

JavaScript

Collapse komponenten kræver JavaScript for at fungere. Man kan enten gøre brug af DKFDS.init() eller initiere komponenten manuelt med nedenstående:

new DKFDS.Dropdown(document.getElementById('OVERFLOW-BUTTON-ID')).init();

Events

Event key Element Beskrivelse
fds.dropdown.open button.js-dropdown Når en overflow menu bliver foldet ud, bliver eventet fds.dropdown.open udløst på knappen
fds.dropdown.close button.js-dropdown Når en overflow menu bliver foldet ind, bliver eventet fds.dropdown.close udløst på knappe

Tilgængelighed

Overflow menu skal kunne aktiveres og håndteres fra tastatur.

Overflow menu skjuler indhold for brugeren og bør anvendes i begrænset omfang.

Overflow menu skal kunne aktiveres og håndteres fra tastatur og brugeren skal kunne anvende tastaturet til navigation.

Varianter

Sortering

Kodeeksempel
<div class="overflow-menu overflow-menu--sort overflow-menu--open-right"
    id="overflow-sort-example">
    <button class="button-overflow-menu" data-js-target="overflow-sort-example-panel"
        aria-haspopup="true" aria-expanded="false">
        <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#sort-default"></use></svg>Sortér:<span
            class="selected-value"></span>
    </button>
    <div class="overflow-menu-inner" id="overflow-sort-example-panel" aria-hidden="true">
        <ul class='overflow-list' role="menu">
            <li role="menuitem">
                <button id="newfirst" aria-current="true">Nyeste først</button>
            </li>
            <li role="menuitem">
                <button id="oldfirst">Ældste først</button>
            </li>
            <li role="menuitem">
                <button id="affaldstype-asc">Affaldstype (A-Å)</button>
            </li>
            <li role="menuitem">
                <button id="affaldstype-desc">Affaldstype (Å-A)</button>
            </li>
        </ul>
    </div>
</div>

JavaScript

Overflow menu med sorteringsfunktion kræver JavaScript for at fungere. Man kan enten gøre brug af DKFDS.init() eller initiere komponenten manuelt med nedenstående:

new DKFDS.DropdownSort(document.getElementById('OVERFLOW-MENU-CONTAINER')).init();
Events
Event key Element Beskrivelse
fds.dropdown.open button.js-dropdown Når en overflow menu bliver foldet ud, bliver eventet fds.dropdown.open udløst på knappen
fds.dropdown.close button.js-dropdown Når en overflow menu bliver foldet ind, bliver eventet fds.dropdown.close udløst på knappe
fds.dropdown.selected button.js-dropdown Når en værdi bliver valgt