Menubar ​

Die Menubar bietet gruppierte, ausführbare Funktionalitäten an.

Overview ​

Intro ​

Die Menubar dient zur Gruppierung von Funktionen.

Menubar Tertiary-Primary
Menubar Tertiary-Secondary
Menubar Secondary-Primary
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.

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.

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.

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.

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!

Menubar Deaktivierte Aktion

Deaktivierte Unterfunktionen ​

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.

Menubar Overflow

Unterelemente ​

Wenn ein Button in der Menubar Unterlemente enthält, wird bei einem Klick das Submenu getriggert und die Untermenüpunkte angezeigt.

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.

Develop Vue ​

Die Implementierung der Webcomponenten in Vue.js kann in folgendem Showcase innerhalb des AKDB Netzwerks betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/komponenten-menu-bar--docs

Develop Flow ​

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter: https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=component%252Fmenubar

Code Examples ​

Install ​

Maven ​

xml
<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-menu-bar-flow</artifactId>
</dependency>

Import ​

java
import com.vaadin.flow.component.contextmenu.MenuItem;
import com.vaadin.flow.component.contextmenu.SubMenu;
import com.vaadin.flow.component.menubar.MenuBar;
import com.vaadin.flow.component.menubar.MenuBarVariant;

Variants ​

Secondary (Default) ​

java
MenuBar menuBar = new MenuBar();
menuBar.addItem("Datei");
menuBar.addItem("Bearbeiten");
menuBar.addItem("Ansicht");

Primary ​

java
MenuBar menuBar = new MenuBar();
MenuItem item = menuBar.addItem("Aktionen");
item.addThemeNames(MenuBarVariant.LUMO_PRIMARY.getVariantName());

Tertiary ​

java
MenuBar menuBar = new MenuBar();
MenuItem item = menuBar.addItem("Mehr");
item.addThemeNames(MenuBarVariant.LUMO_TERTIARY.getVariantName());

With Drop-Down ​

java
MenuBar menuBar = new MenuBar();
MenuItem menu = menuBar.addItem("Exportieren");
menu.addThemeNames(MenuBarVariant.LUMO_DROPDOWN_INDICATORS.getVariantName());

SubMenu subMenu = menu.getSubMenu();
subMenu.addItem("Als PDF");
subMenu.addItem("Als Excel");
subMenu.addItem("Als CSV");

Disabled Item ​

java
MenuBar menuBar = new MenuBar();
menuBar.addItem("Bearbeiten");
menuBar.addItem("Löschen").setEnabled(false);

Split button ​

java
MenuBar menuBar = new MenuBar();
menuBar.addThemeNames("split");
menuBar.addItem("Main action");
MenuBar menuBar = new MenuBar();
MenuItem menu = menuBar.addItem("");
SubMenu subMenu = menu.getSubMenu();
subMenu.addItem("Second action");
subMenu.addItem("Third action");
subMenu.addItem("Fourth action");