Prinzipien Grundlagen Barrierefreiheit Design System Guidelines Deutsch Français Italiano English Unsere Gestaltungsprinzipien Nutzerzentriert Wiedererkennbar Inklusiv Reduziert Ganzheitlich Selbsterklärend Aufgabenorientiert Passend SBB Markenportal Logo Digitale Uhr Nutzungsrechte Basis-Farben Zusätzliche Farben Off-Brand Farben Icons Fahrplan-Icons Piktogramme Über Barrierefreiheit Über diesen Guide Kontakt Weitere Informationen Product Owner User Research Interaction Design Visual Design Development Content Design Testing Was ist ein Design System?​ Designing Coding FAQ Hilfe Prozess Contribution Kontakt Übersicht Basis Komponenten Übersicht Releases Design Tokens Komponenten Übersicht Basis Informationen Übersicht Basis Komponenten Übersicht Power-Apps Digitale Werbebanner SAP AI Design: Grundlagen App Icons Contextmenu Übersicht

Was macht die Komponente?

  • Bietet kontextspezifische Aktionen an, entweder dynamisch per Maus-Rechtsklick auf ein Element oder statisch über ein Icon.

Wann soll die Komponente eingesetzt werden?

  • Wenn auf einem Objekt je nach Zustand oder Rolle den Benutzer*innen Aktionen zur effizienten Ausführung angeboten werden sollen.

Regeln

  • Ein Contextmenu kann über die rechte Maustaste oder ein Icon angeboten werden.
  • Das Contextmenu kann Icons enthalten, muss aber nicht.
  • Auf einer Ebene des Contextmenu gibt es entweder bei allen Menuitems ein Icon oder bei keinem.
  • Menuitems können gruppiert werden. Gruppen werden durch einen Strich getrennt.
  • Ein Contextmenu kann zur Sortierung von Elementen genutzt werden. In diesem Fall wird mittels Pfeil gezeigt, nach welchem Attribut in welche Richtung sortiert ist.
  • Es ist erlaubt, auch tiefere Ebenenstrukturen anzubieten. Es sollte aber darauf geachtet werden, dass je mehr Verschachtelung, desto ineffizienter die Bedienung.
Varianten

Zustände

Die Komponente hat folgende Zustände:

  • Default
  • Hover

Varianten

Standard

Diese Variante hat zusätzlich folgende Zustände:

  • Expanded (optional)

Darstellung des Kontextmenüs


Icon

Diese Variante hat zusätzlich folgende Zustände:

  • Expanded Hover Underneath
  • Expanded Hover Above

Darstellung des Kontextmenüs mit Icon


  • Als Icon werden standardmässig die drei Punkte verwendet.

Sorting

Diese Variante hat zusätzlich folgende Zustände:

  • Expanded Hover
  • Expanded Active

Darstellung des Kontextmenüs zur Sortierung von Inhalten


  • Zur Anzeige der Sortierung wird das Pfeil-Icon verwendet.
  • Per Default wird absteigend (ascending) sortiert.
  • Beim Hover auf aktiv sortiertes Attribut wird das Pfeil-Icon gedreht.
  • Der ganze Menueintrag (Name und Icon) ist klickbar.

Spezifikationen

DesignCode