Version:
Context Menu
Das Context Menu bietet Nutzern kontextbezogene Aktionen, die abhängig vom gewählten Element oder der aktuellen Position im Interface angezeigt werden können.
Overview
Intro
Das Context Menu ermöglicht dem Nutzer den Zugriff auf kontextbezogene Funktionen, die sich je nach gewähltem Element oder Position im Interface unterscheiden. Es wird typischerweise durch einen Rechtsklick geöffnet und zeigt ein Menü mit relevanten Aktionen an.
broken_image
Intro
Verwendung
| 👍 Do | 👎 Don't |
|---|---|
| ... wenn kontextbezogene Aktionen zu angeboten werden sollen, die sich je nach ausgewähltem Element unterscheiden (z.B. "Speichern", "Kopieren" oder "Bearbeiten" bei Bildern). ... wenn Aktionen, die selten gebraucht werden, dennoch schnell verfügbar sein müssen. ... wenn mehrere Elemente gleichzeitig markiert werden und gemeinsame Aktionen angeboten werden. | … wenn Hauptfunktionen nicht sichtbar sind und ausschließlich über ein Kontextmenü erreichbar wären. ... wenn 15+ Einträge im Context Menu verwendet werden sollen. Wenn zu viele Optionen vorhanden sind, fasse diese zusammen oder nutze Untermenüs. … wenn wichtige sicherheitsrelevante Aktionen (z. B. „Alle Daten löschen“) versteckt wären, statt mit zusätzlicher Bestätigung im Haupt‑UI angezeigt zu werden. |
Guidelines
Aufbau
Das Context Menu wird derzeit nur in Tabellen eingesetzt. Es kann jedoch auch auf andere native HTML‑Elemente, wie Absätze ( <p> ), angewendet werden. Die angezeigten Aktionen passen sich dynamisch an den jeweiligen Kontext an und ermöglichen eine effiziente, platzsparende Interaktion.
broken_image
Verwendung in Tabellen
Varianten
Context Menu Items stehen in verschiedenen Varianten zur Verfügung, um unterschiedliche Anwendungsfälle abzudecken. Varianten unterscheiden sich in Funktion oder Interaktionsverhalten. Die Auswahl der passenden Variante hängt vom Kontext ab.
broken_image | Default Item Führt beim Anklicken eine Aktion aus und hat keine Auswahlzustände oder Untermenüs. |
broken_image | Check Item Ein Menüeintrag mit einem Kontrollhäkchen, das den Zustand einer Option anzeigt (aktiviert/deaktiviert). Kann durch Anklicken umgeschaltet werden. |
broken_image | Submenu Item Öffnet durch Anklicken ein weiteres, untergeordnetes Kontextmenü, um zusätzliche, thematisch verwandte Aktionen oder Optionen anzubieten. |
States
Ein Context Menu Item hat verschiedene Zustände.
broken_image | Enabled State |
broken_image | Hover State |
broken_image | Active State |
broken_image | Selected State |
broken_image | Disabled State |
Barrierefreiheit
Tastaturbedienung
Über die Tastenkombination Shift \+ F10 lässt sich das Context Menu bei Auswahl eines geeigneten HTML-Elements öffnen. Über die Pfeiltasten lässt sich zwischen den einzelnen Menüeinträgen wechseln.
Spezifische Hinweise
Gesperrte Context Menu Items sollten standardmäßig nicht über die Tastatur fokussierbar sein. Erst wenn der Nutzer entsprechende Einstellungen vornimmt, sollten auch diese in den Fokussierungs-Kreislauf aufgenommen werden.