1. “3-Punkte” Symbol
2. Text Label
3. Menü-Eintrag mit Untermenü (optional)
4. Icon (optional)

Ein Pop-up-Menü kann, in speziellen Fällen, auch über einen Textbutton oder einen Link geöffnet werden (Beispiele: Pfadnavigation oder Verfahrensheader auf schmalen Screens). Hier muss die Beschriftung aussagekräftig zur jeweiligen Situation passen, bspw. “Weitere Links”.  
Pop-up-Menüs kommen außerdem auch bei Filterpillen oder Baumelementen zum Einsatz.

Es gibt zwei Varianten an Pop-up-Menüinhalten:

Ausführen einer Aktion (mit Enter oder Mausklick) schließt das Pop-up-Menü und führt die entsprechende Aktion aus.

Es befindet sich immer genau ein Eintrag im Zustand “ausgewählt (selected)”. Klick bzw. Enter auf einem Eintrag versetzt diesen in den Zustand “ausgewählt”, der vorher als ausgewählt gesetzte Eintrag wechselt wieder zum default-state (nicht ausgewählt) und das Pop-up-Menü wird geschlossen. Bei Fokuserhalt des selektierten Eintrags wird vom Screenreader “ausgewählt” ausgegeben.

Beim Anklicken öffnet sich ein Overlay, dessen Höhe durch die Anzahl der Einträge und dessen Breite durch den längsten Eintrag definiert wird. Die jeweilige Aktion bestimmt was genau durch einen Klick geschieht. In jedem Fall schließt sich das Pop-up-Menü wieder. 

Grundsätzlich sollte der Text eines der Pop-up-Menüeinträge möglichst kurz und präzise formuliert sein.  

Jeder Eintrag der Ausklappliste kann bestehen aus: 

• Nur Text: Grundsätzlich sollte der Text eines der Pop-up-Menüeinträge möglichst kurz und präzise formuliert sein. 
• Text + Icon: Die Funktion des Eintrags muss eindeutig aus dem angezeigten Text hervorgehen und die Grafik hat nur gestalterischen Charakter.

Bei Bedarf können die Einträge eines Pop-Up-Menüs durch Trennlinen unterteilt werden, um eine semantische Zusammengehörigkeit visuell noch zu unterstützen. Die Zusammengehörigkeit darf nicht allein durch die Linie vermittelt werden. Der Unterschied muss auch durch den Eintragsinhalt (Text) wahrnehmbar sein.

Wenn Trennlinien innerhalb von Pop-Up-Menüs verwendet werden, bedeutet das, das die mit Linie getrennten Blöcke im Code als Gruppen ausgezeichnet werden. Die Gruppen müssen eine aussagekräftige Beschriftung haben (nicht “Gruppe 1” oder ähnliches). Die Gruppentitel werden nur vom Screenreader mit ausgegeben, visuell aber nicht im Pop-Up-Menü angezeigt.

Falls ein Pop-Up-Menü Selektionen enthalten soll, darf keine Gruppierung verwendet werden. Bzw. umgekehrt: Falls Gruppierung verwendet wird, darf es keine selektierten Einträge geben.

Die Breite des Pop-Up-Menüs passt sich dem längsten Eintrag an. Die maximale Textlänge pro Zeile sind 32 Zeichen. Bei längerem Inhalt bricht dieser um, wird mehrzeilig und der Eintrag wird entsprechend höher.

Nach Durchführen der Aktion wird der Fokus auf das Element gesetzt, welches entsprechend der Arbeitsaufgabe als nächstes sinnvoll ist. 

Es können auch deaktivierte (disabled) Elemente im Pop-Up-Menü angezeigt werden. Diese können auch mit fokussiert werden. Vom Screenreader werden sie als deaktivierte Elemente ausgegeben. Falls möglich sollten die deaktivierten Elemente vor allem am Ende des Menüs angezeigt werden.

Wenn ein Menü ausschließlich deaktivierte Menü-Einträge enthält, so wird das Element, welches das Menü öffnet (z. B. Button oder Link), ebenfalls deaktiviert dargestellt und das Menü kann somit nicht mehr geöffnet werden.

Wenn der Button zu nah an der linken oberen Screen-Kante sitzt, richtet sich das Pop-up-Menü nach links aus.

Ein Pop-up-Menüeintrag kann auch Unteraktionen beinhalten. Diese öffnen sich als zweites Pop-up-Menü.

Bei kleiner Bildschirmhöhe: 

Der Menü-Button sowie mindestens 220 Pixel des Pop-up-Menüs in der Höhe (sofern es so hoch oder höher ist) müssen im geöffneten Zustand im sichtbaren Bereich liegen. Dabei muss immer ein Abstand zum oberen/unteren Bildschirmrand von mindestens 16 Pixel bestehen bleiben. Reicht der Platz nicht aus, um das Pop-up-Menü in über 220 Pixel Höhe darzustellen (plus den darüber/darunter liegenden Menü-Button) so scrollt die Seite automatisch beim Öffnen ein Stück nach oben/unten, so dass der Menü-Button mit 16px Abstand zum oberen/unteren Bildschirmrand zu sehen ist und das Pop-up-Menü den restlichen Seitenplatz füllt. Ist das Pop-up-Menü trotzdem noch höher, als im verfügbaren Seitenplatz darstellbar, so läuft es nach unten/oben aus dem sichtbaren Bereich hinaus und ist über die Seitenscrollbar erreichbar. Innerhalb des Pop-up-Menüs kann nicht gescrollt werden.

Ist das Menü länger als der Seiteninhalt, so wird die Seite nach unten verlängert, so dass das komplette Menü zuzüglich 16px Abstand nach unten darstellbar und somit auch über vertikales Scrollen erreichbar sind. Befinden sich Nutzende auf einer Seite mit grauem Hintergrund (z. B. Tabellen-Seiten oder Seiten mit Split-View), so wird die graue Fläche nach unten verlängert. Befinden sich Nutzende beispielsweise in einem Fullscreen-Formular, so wird der Weißraum zwischen letztem Formularelement und Formular-Footer entsprechend verlängert.  
WICHTIG: Sobald ein Pop-Up-Menü höher ist, als im verfügbaren Seitenplatz darstellbar, so muss es sich nach unten öffnen, so dass die Seite bei Bedarf nach unten verlängert werden kann. Eine Verlängerung der Seite nach oben hin ist nicht möglich.

Nach dem Schließen des Pop-up-Menüs bleibt die Scrollposition bestehen (es wird nicht zurück zu der Position gescrollt, die vor Öffnen des Menüs aktiv war). Falls die Seite durch Öffnen eines sehr langen Menüs “künstlich verlängert” wurde, so wird diese Verlängerung entfernt, sobald das Menü geschlossen wird. Falls sich Nutzende innerhalb dieses verlängerten Bereichs befunden haben, so befinden sie sich nach Schließen des Menüs am untersten Punkt der wieder verkürzten Seite.

In der Regel öffnet sich das Pop-up-Menü rechts neben dem Eltern-Eintrag (4px Überlappung).  
Bei nicht ausreichend Platz nach rechts kann das Menü jedoch auch nach links geöffnet werden. Ist weder nach rechts, noch nach links ausreichend Platz vorhanden, um das Unter-Pop-up in mind. 140px (bzw. 16 Zeichen) Breite mit mind. 16px Abstand zum Fensterrand darzustellen, so kann das Kind-Pop-Up auch nach unten (unter dem aktiven Eintrag des Eltern-Pop-Ups) geöffnet werden. 
So ist sichergestellt, dass alle Inhalte mit nur einen Scrollrichtung erreichbar sind.

Sobald ein Untermenü geöffnet wird, hat dessen Sichtbarkeit und die Sichtbarkeit des Elternelements Priorität. Der Menü-Button, von dem aus das Obermenü geöffnet wurde, kann bei wenig Platz aus dem Sichtfeld verschwinden. 
Mindestens 220 Pixel des Untermenüs in der Höhe (sofern es so hoch oder höher ist) sowie das Eltern-Element müssen im geöffneten Zustand im sichtbaren Bereich liegen. Reicht der Platz nicht aus, um das Untermenü-Menü in über 220 Pixel Höhe darzustellen (plus das darüberliegende Elternelement) so scrollt die Seite automatisch beim Öffnen ein Stück nach unten, so dass das Elternelement mit 16px Abstand zum oberen Bildschirmrand zu sehen ist und das Untermenü den restlichen Seitenplatz füllt. Ist das Untermenü trotzdem noch höher, als im verfügbaren Seitenplatz darstellbar, so läuft es nach unten aus dem sichtbaren Bereich hinaus und ist über die Scrollbar der Seite erreichbar. Ein Scrollen allein innerhalb des Untermenü-Containers ist nicht möglich. 
Ist das Haupt- oder Untermenü länger als der Seiteninhalt, so wird die Seite nach unten verlängert, so dass das komplette Menü zuzüglich 16px Abstand nach unten darstellbar und somit auch über vertikales Scrollen erreichbar sind. Befinden sich Nutzende auf einer Seite mit grauem Hintergrund (z. B. Tabellen-Seiten oder Seiten mit Split-View), so wird die graue Fläche nach unten verlängert. Befinden sich Nutzende beispielsweise in einem Fullscreen-Formular, so wird der Weißraum zwischen letztem Formularelement und Formularfooter entsprechend verlängert. 

Nach dem Schließen des Untermenüs bleibt die Scrollposition bestehen (es wird nicht zurück zu der Position gescrollt, die vor Öffnen des Untermenüs aktiv war). Falls die Seite durch Öffnen eines sehr langen Menüs “künstlich verlängert” wurde, so wird diese Verlängerung entfernt, sobald das Menü geschlossen wird. Falls sich Nutzende innerhalb dieses verlängerten Bereichs befunden haben, so befinden sie sich nach Schließen des Menüs am untersten Punkt der wieder verkürzten Seite.

Die unten dargestellten Zustände gelten auch für zweizeilige und dreizeilige Elemente.

Wenn es sich, wie im Regelfall, um einen 3-Punkte-Button handelt, lautet der Alternativtext “Weitere Aktionen”. Handelt es sich um einen Textbutton oder einen Link, muss die Beschriftung aussagekräftig zur jeweiligen Situation passen, bspw. “Weitere Links”. 

Die Bildmarke innerhalb eines Eintrags muss als Layoutgrafik deklariert sein.

Deaktivierte (disabled) Elemente im Pop-Up-Menü können auch mit fokussiert werden und werden vom Screenreader als deaktivierte Elemente ausgegeben.

Menü-Einträge mit Untermenüs:

Screenreader geben bei Fokuserhalt eines Menüeintrags mit Unter-Aktionen einen entsprechenden Hinweis aus, dass ein Untermenü verfügbar ist.

• Mit der Tab-Taste wird der Pop-up-Menü Button fokussiert. 
• Enter oder Leertaste öffnet das Pop-up-Menü mit verschiedenen Aktionen
  Pfeiltasten nach oben/unten öffnen das Pop-up-Menü ebenfalls.
• Beim Öffnen ist der erste Eintrag fokussiert. Falls einer der Einträge sich im Zustand “selected/ausgewählt” befindet, so ist dieser beim Öffnen des Pop-up-Menüs fokussiert. 
• Pfeiltasten nach unten/oben wechseln den Fokus zur nächsten/vorherigen Auswahloption, unabhängig davon, ob diese aktiv oder deaktiviert dargestellt ist. Ist der erste Menüeintrag fokussiert, so springt der Fokus durch Pfeil nach oben auf den letzten Eintrag. Ist der letzte Menüeintrag fokussiert, so springt der Fokus durch Pfeil nach unten wieder auf den ersten Eintrag.
• Bei Drücken eines Buchstaben (A-Z) wird (falls vorhanden) der nächste Eintrag, dessen primärer Text mit dem entsprechenden Buchstaben beginnt, fokussiert (ausgehend vom aktuell fokussierten Eintrag). Dies gilt auch dann, wenn die Pop-up-Menüinhalte gruppiert sind. Das Menü wird weiterhin wie eine flache Liste durchsucht. Dies gilt auch dann, wenn die Pop-up-Menüinhalte gruppiert sind. Das Menü wird weiterhin wie eine flache Liste durchsucht.
• Enter oder Leertaste aktiviert die jeweilige Aktion des fokussierten Eintrags und schließt das Pop-up-Menü. Falls es sich um ein Pop-up-Menü mit selektierbaren Einträgen handelt, so wird durch Enter oder Leertaste der fokussierte Eintrag in den Status “ausgewählt” versetzt. Der vorher ausgewählte Eintrag wird als nicht mehr ausgewählt gekennzeichnet. Falls der fokussierte Eintrag bereits ausgewählt ist und Enter/Leertaste gedrückt wird, so schließt sich das Pop-up und es wird keine Änderung durchgeführt. Nach Schließen des Pop-up-Menüs: Falls sich Nutzende nach der Aktion an gleichen Stelle befinden und das Element noch existiert wird der Button/Link wieder fokussiert. 
• Deaktivierte (disabled) Elemente können nicht mit Enter oder Leertaste ausgewählt werden. Ist ein deaktiviertes Element fokussiert, so hat die Enter oder Leertaste keine Auswirkung ( Pop-up bleibt geöffnet und die Hervorhebung bleibt unverändert)
• Drücken der Home-Taste bei geöffnetem Pop-up-Menü verschiebt den Fokus auf das erste Element der Liste. Dies gilt unabhängig davon, ob die Pop-up-Menüeinträge gruppiert sind > Fokus wird immer auf erstes Menüelement gesetzt.
• Drücken der End-Taste bei geöffnetem Pop-up-Menü verschiebt den Fokus auf die letzte Element der Liste. Dies gilt unabhängig davon, ob die Pop-up-Menüeinträge gruppiert sind > Fokus wird immer auf letztes Menüelement gesetzt.
• Das Pop-up-Menü kann auch ohne Auswahl mit der Esc-Taste geschlossen werden. Der Fokus verbleibt auf dem Pop-up-Menü Button
• Die Tab-Taste wechselt zum nächsten interaktiven Element.

• Pfeiltaste nach rechts, Enter oder Leertaste öffnet das untergeordnete Pop-up-Menü und setzt den Fokus auf den ersten Eintrag.
• Pfeiltaste nach links bei geöffnetem Kind-Menü schließt das Kind-Pop-up-Menü und setzt den Fokus wieder auf das Eltern-Element, von dem aus das Untermenü geöffnet wurde.
• Mit Esc-Taste wird das aktuell fokussierte Kind-Menü geschlossen. Der Fokus liegt anschließend wieder auf dem Eltern-Element, von dem aus das Untermenü geöffnet wurde.

• Klick mit linker Maustaste auf den Pop-up-Menü Button öffnet das Menü.
• Klick mit linker Maustaste auf eine der Aktionen führt diese aus und schließt das Menü. Falls es sich um ein Pop-up-Menü mit selektierbaren Einträgen handelt, so wird durch Klick mit linker Maustaste der fokussierte Eintrag in den Status “ausgewählt” versetzt. Der vorher ausgewählte Eintrag wird als nicht mehr ausgewählt gekennzeichnet. Falls der angeklickte Eintrag bereits ausgewählt ist, so schließt sich das Pop-up und es wird keine Änderung durchgeführt. Sollten sich Nutzende nach der Aktion an der gleichen Stelle befinden und das Element noch existieren wird der Button/Link wieder fokussiert. 
• Klick mit linker Maustaste auf deaktivierte (disabled) Elemente setzt den Fokus auf diese, es wird jedoch keine Aktion ausgeführt und das Pop-up-Menü bleibt geöffnet. 
  Klicken außerhalb des Menüs schließt es ohne eine Aktion ausgeführt zu haben. Auch, wenn mit der linken Maustaste erneut auf das Element geklickt wurde, von dem aus das Pop-up-Menü geöffnet wurde, schließt es sich und geht nicht direkt wieder auf.

• Bei Hover oder Klick mit linker Maustaste auf einen Pop-up-Eintrag mit Unteraktionen öffnet sich das Unter-Menü.
• Hover oder Klick mit linker Maustaste auf einen anderen Eintrag mit Unteroptionen auf gleicher Ebene öffnet dessen Kind-Menü und schließt das vorher geöffnete. (Pro Ebene darf nur ein Menü gleichzeitig geöffnet sein.)
• Klick mit linker Maustaste auf eine Aktion im Haupt- oder Untermenü führt diese aus und schließt beide Menüs.
• Klick mit linker Maustaste auf das Elternelement des geöffneten Untermenüs schließt das Untermenü und der Fokus liegt auf dem Elternelement.
• Klick mit linker Maustaste irgendwo außerhalb der Pop-up-Menüs schießt sowohl Haupt- als auch Untermenü, ohne, dass eine Menüaktion ausgeführt wird.