Version:
Menubar
Die Menubar bietet gruppierte, ausführbare Funktionalitäten an.
Overview
Intro
Die Menubar dient zur Gruppierung von Funktionen.
broken_image | Menubar Tertiary-Primary |
broken_image | Menubar Tertiary-Secondary |
broken_image | Menubar Secondary-Primary |
broken_image | Menubar Secondary |
Verwendung
| 👍 Do | 👎 Don't |
|---|---|
| ... wenn mehrere Buttons nebeneinander dargestellt werden müssen. ... wenn mehrere Funktionen in einem Button gruppiert werden sollen (früher wurde dazu der Split-Button verwendet welcher seit v3.0 Deprecated ist). | ... wenn eine einzelner Button dargestellt werden soll, verwende dazu direkt den Button. |
Guidelines
Aufbau
1. Buttongruppe
Priorisiere die Buttons in der Menubar, wenn es möglich ist. Verwende dazu die unten genannten Varianten.
2. Menu-Button mit Unterfunktionen (Submenu)
Gruppiere ähnliche Funktionen in einem Menu\-Button mit Unterfunktionen.
3. Weitere Unterfunktionen
Bei Bedarf können Funktionen weiter gruppiert werden.
4. Overflow-Button
Menubars blenden einen Overflow\-Button ein, falls der Raum, um alle Buttons anzuzeigen, zu klein ist. Siehe
Overflow Verhalten.
broken_image
Menubar Aufbau
Varianten/Typen
Info für Dev:
Für die häufigsten Anwendungsfälle wie z.B. in Funktionszeilen innerhalb von Sektionen einer Objektseite oder in Tabellenseiten stehen vorgefertigte Toolbars zur Verfügung. Siehe auch den Show Cases für Toolbars.
Tertiär-Sekundär
Verwende diese Variante im Inhaltsbereich um die GUI nicht zu überladen. Siehe z.B. die Sektionen von Objektseiten.
broken_image
Variante Tertiär-Sekundär
Sekundär-Primär
Diese Variante ist exklusiv für die Funktionsleisten am unteren Bildschirmrand im Anwendungsrahmen und Modal Dialogen vorgesehen.
broken_image
Variante Sekundär-Primär
Tertiär-Primär
Verwende diese Variante im Inhaltsbereich, falls dort die Primäre Aktion liegt wie z.B. in der Suchleiste.
broken_image
Variante Tertiär-Primär
Deaktivierte Buttons mit Hinweis
SEIT VERSION 3.1.0
Meistens können sich Nutzer selbst erklären, warum eine Funktion bzw. ein Button deaktiviert ist wie z.B. warum man auf dem letzten Schritt eines Wizards nicht weiter klicken kann.
Es gibt jedoch auch Situationen in denen die Nutzer sich nicht erklären können, warum ein Button deaktiviert wurde. Für diese Anwendungsfälle können Hinweise angezeigt werden, damit die Nutzer den Zustand vom System besser nachvollziehen können. So können sie ggf. ihre Aufgaben auf einem anderen Weg weiter bearbeiten.
| 👍 Do | 👎 Don't |
|---|---|
| ... wenn fachliche Gründe dafür verantwortlich sind, dass eine Funktion mal aufgeführt werden kann und mal nicht. | ... wenn Berechtigungen permanent die Funktion dem Nutzer verwehren. Blende die Funktion dann vollständig und permanent aus! |
broken_image
Menubar Deaktivierte Aktion
Deaktivierte Unterfunktionen
broken_image
Menubar Deaktivierte Unterfunktion
INFO
Info für Dev:
Siehe die better\-disabled Varianten im Show Case.
Verhalten
Overflow Verhalten
Sobald nicht mehr alle Buttons angezeigt werden können erscheint eine Overflow Icon Button mit 3 Punkten. Ein Klick darauf ermöglicht den Zugriff auf die Funktionen die sonst nicht mehr verfügbar wären.
broken_image
Menubar Overflow
Unterelemente
Wenn ein Button in der Menubar Unterlemente enthält, wird bei einem Klick das Submenu getriggert und die Untermenüpunkte angezeigt.
broken_image
Menubar Submenu
Barrierefreiheit
Tastaturbedienung
Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") lässt sich zwischen den Menüpunkten springen und es wird jeweils die ausgewählte Option fokussiert. Mit den Pfeiltasten nach links oder rechts ist es ebenso möglich den Fokus auf andere Optionen zu setzen. Ist initial keine Option ausgewählt, wird die erste Option fokussiert und kann mit der Leertaste oder Eingabetaste ("Enter") ausgewählt werden. Gibt es in der Menubar eine Option mit Submenu, kann dieses über die Pfeiltasten nach oben oder unten ein- und ausgefahren werden.