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

Overflow menu

Eksempler og retningslinjer

Installation

HTML Struktur

<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"><use xlink:href="#dots-vertical"></use></svg>
    </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>

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.

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'));

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