Shopify-Menü-Leitfaden: Architektur, Navigationsmuster, mobile Ergonomie und Storefront-UX

Die Navigation ist der Orientierungsmotor Ihres Shopify-Stores. Bevor Käufer Produktdetails prüfen, Bewertungen lesen oder kaufen, müssen sie Artikel schnell finden. Klare Pfade schaffen Erkundungsschwung, während versteckte Links, vage Bezeichnungen und unzugängliche Touch-Ziele Frustration auslösen.

Moderner E-Commerce erstreckt sich über zwei Welten: breite Desktop-Bildschirme mit horizontalem Scan-Raum und handliche Smartphones, die mit einem einzigen Daumen bedient werden. Das Ausbalancieren visueller Desktop-Übersicht mit mobiler Ergonomie erfordert überlegte strukturelle Entscheidungen.

Dieser Leitfaden bietet einen praxisnahen Bauplan für die Shopify-Navigation: wie die Plattform Menüdaten verwaltet, wie vier Kernmuster abschneiden, was Usability-Forschung empfiehlt und eine Checkliste für reale Gerätetests.

Schnelle Antwort: So funktionieren Shopify-Menüs

Shopify-Menüs werden unter Inhalt > Menüs erstellt und vom Theme dargestellt; ein Hauptelement kann bis zu zwei verschachtelte Ebenen enthalten (drei insgesamt). Nutzen Sie einfache Dropdowns für kleine Sortimente, Mega-Menüs für breite Desktop-Kataloge und halten Sie mobil Hauptlinks sichtbar statt alles hinter einem Hamburger zu verstecken.

Wichtige Kernpunkte

• Plattform-Hierarchie: Shopify erzwingt ein Limit von maximal drei Verschachtelungsebenen (ein Hauptelement plus bis zu zwei Unterebenen), verwaltet unter Inhalt > Menüs (Shopify Help Center).
• Desktop-Sichtbarkeit: Untersuchungen der Nielsen Norman Group belegen, dass Mega-Menüs Optionen auf einen Blick erfassbar machen, anstatt Listen im Gedächtnis behalten zu müssen (NN/g).
• Mobiles Engagement: Usability-Tests von NN/g ergaben, dass versteckte Menüs auf Mobilgeräten nur in 57% der Fälle genutzt wurden, während Combo-Navigation mit sichtbaren Links 86% erreichte (NN/g).

Wie Shopify-Menüs aufgebaut sind: Inhalt > Menüs, Themes und das Drei-Ebenen-Limit

Effiziente Navigation setzt voraus zu verstehen, wie Shopify Menüdaten von der Theme-Präsentation trennt. Menühierarchien existieren als persistente Store-Daten, während Themes die visuelle Darstellung steuern.

Abbildung 1: Konzeptillustration (Concept illustration) — Wie Shopify-Menüs aufgebaut sind: Inhalt > Menüs, Themes und das Drei-Ebenen-Limit

Wo Menüs im Admin-Bereich verwaltet werden

Im Shopify-Admin werden Navigationsstrukturen unter Inhalt > Menüs verwaltet (laut Shopify Help Center). Hier erstellen Händler Menüs, fügen Kategorielinks hinzu und organisieren Storefront-Pfade.

Da Menüs als Plattform-Datensätze statt als Theme-Code gespeichert sind, bleibt Ihre Kategoriehierarchie beim Theme-Wechsel vollständig erhalten. Verschachtelte Beziehungen entstehen durch simples Einrücken unter ein Elternelement.

Wie das Theme ein Menü auswählt

Während Menüdaten im Admin liegen, steuert Ihr Theme das Rendering im Storefront. Shopify-Themes verknüpfen Admin-Menüs über eine link_list-Einstellung (dokumentiert in der Shopify Entwicklerdokumentation), um Menüs für Header, Drawer oder Footer auszuwählen.

Beim Wechsel des Themes bleiben Ihre Links intakt. Sie müssen jedoch den Theme-Customizer des neuen Themes öffnen und Ihr Menü in der Header-Einstellung link_list neu auswählen. Werbebanner oder eigene Mega-Menü-Blöcke des alten Themes werden nicht automatisch übertragen.

Das Drei-Ebenen-Limit

Das fundamentale Gestaltungsprinzip der Shopify-Navigation ist ihr Verschachtelungslimit: Ein Hauptelement kann bis zu zwei verschachtelte Dropdown-Ebenen enthalten, was maximal drei Navigationsebenen ergibt (laut Shopify Help Center und Shopify Entwicklerdokumentation). Dies bildet ein Drei-Stufen-Modell: Hauptkategorie → Unterkategorie → Unterelement.

Planen Sie Ihre Menühierarchie so, dass sie innerhalb dieser drei Ebenen bleibt. Zudem weist das Shopify Help Center darauf hin, dass die meisten Themes maximal zwei verschachtelte Dropdown-Ebenen unterstützen.

Eine grundlegende Barrierefreiheitsregel besagt: Wenn ein Hauptelement ein Untermenü steuert, agiert es als Schalter zum Aufklappen und nicht als direkter Hyperlink (laut Shopify Help Center). Platzieren Sie stets einen Link “Alle [Kategorie] anzeigen” im Dropdown, damit Käufer die gesamte Kollektion erreichen.

Die vier zentralen Navigationsmuster: Dropdown, Mega-Menü, Drawer und Tab-Bar

Shopify-Storefronts setzen primär auf vier Navigationsmuster, die jeweils unterschiedliche Kompromisse zwischen Platzbedarf und Auffindbarkeit eingehen.

1. Einfaches Dropdown

Das klassische Dropdown öffnet beim Klick auf einen Hauptlink eine einfache vertikale Liste. Es eignet sich gut für fokussierte Kataloge. Bei größeren Sortimenten verbergen Standard-Dropdowns jedoch typischerweise die meisten Optionen der Nutzer (NN/g).

2. Mehrspaltiges Mega-Menü

Ein Mega-Menü erweitert die Navigation zu einem mehrspaltigen Panel. Die Nielsen Norman Group bestätigt, dass Mega-Menüs alles auf einen Blick zeigen, sodass Nutzer Optionen sehen statt sich erinnern zu müssen (NN/g). Thematische Gruppierungen unter klaren Überschriften machen einen breiten Katalog am Desktop leichter überschaubar.

Details finden Sie in unserem Leitfaden zu Shopify Mega-Menü Best Practices.

3. Off-Canvas Slide-Drawer

Der Slide-Drawer—geöffnet über das Hamburger-Icon—verbirgt die Navigation bis zur Berührung. Obwohl auf Smartphones üblich, warnt die Nielsen Norman Group davor, dass versteckte Menüs Optionen für Käufer am schlechtesten auffindbar machen (NN/g).

Zur Optimierung lesen Sie unsere Mobile Drawer-Menü Best Practices.

4. Untere Tab-Bar

Die untere Tab-Bar fixiert Kernziele am unteren Displayrand direkt in Daumenreichweite. Allerdings betont die Nielsen Norman Group, dass mehr als 5 Optionen in einer Leiste kaum hineinpassen, ohne optimale Touch-Größen zu gefährden (NN/g).

Layout-Hinweise bietet unser Leitfaden für eine untere Tab-Bar für Shopify.

Hybride Navigationsarchitektur

Shops kombinieren häufig mehrere Muster: ein Desktop-Mega-Menü mit einer mobilen Tab-Bar und einem Drawer, um schnelle Auffindbarkeit mit Katalogtiefe zu vereinen.

Desktop-Navigation: Wann ein Mega-Menü ein Dropdown übertrifft

Auf Desktop-Bildschirmen steht reichlich horizontaler Platz bereit. Forschung der Nielsen Norman Group unterstreicht, dass Mega-Menüs alles auf einen Blick präsentieren, wodurch Kunden Optionen sehen statt memorieren müssen (NN/g). Standard-Dropdowns verbergen dagegen typischerweise die meisten Optionen der Nutzer.

Hover-Timing ohne Flackern kalibrieren

Ein häufiger Fehler bei Desktop-Mega-Menüs ist eine unkalibrierte Hover-Empfindlichkeit. Öffnet sich das Menü, sobald der Cursor ein Header-Element berührt, kann es versehentlich aufspringen, wenn Kunden die Maus über den Header bewegen.

Die Nielsen Norman Group empfiehlt klare Zeitwerte: Der Cursor sollte 0,5 Sekunden stillstehen, bevor Hover-Panels eingeblendet werden (NN/g). Danach sollte das Menü innerhalb von 0,1 Sekunden erscheinen (NN/g). Dies verhindert versehentliches Öffnen bei flüssiger Interaktion.

Links im Panel übersichtlich gruppieren

Links im Mega-Menü verlangen eine saubere visuelle Hierarchie. Ordnen Sie Links in thematische Blöcke mit prägnanten Überschriften. Jeder Kategorielink sollte nur an einer logischen Stelle vorkommen. Vorschaubilder können unterstützen, dürfen Textbeschriftungen jedoch keinesfalls ersetzen.

Verstecken Sie die Hauptnavigation am Desktop niemals hinter einem Hamburger-Icon, wenn ausreichend Platz vorhanden ist. Die Nielsen Norman Group fand heraus, dass Desktop-Nutzer versteckte Menüs nur in 27% der Fälle nutzten (NN/g). Weitere Einblicke bieten unsere Shopify Mega-Menü Best Practices.

Mobile Ergonomie: Daumenreichweite, versteckte Menüs und Tab-Bars

Während Desktop-Navigation eine Frage der Informationsarchitektur ist, stellt mobile Navigation eine biomechanische Herausforderung dar. Beim Smartphone-Shopping bestimmt die physische Reichweite den Komfort.

Abbildung 2: Konzeptillustration (Concept illustration) — Mobile Ergonomie: Daumenreichweite, versteckte Menüs und Tab-Bars

Wie Menschen Smartphones tatsächlich halten

In einer empirischen Ergonomiestudie erfasste Steven Hoober 1.333 Beobachtungen von Personen mit Mobilgeräten in öffentlichen Umgebungen (UXmatters). Darunter berührten 780 aktiv den Touchscreen zum Scrollen, Tippen oder Auswählen.

Die Analyse der Griffhaltungen dieser 780 aktiven Touchscreen-Nutzer ergab folgende Verteilung:

• Einhändige Nutzung: 49% hielten und bedienten ihr Smartphone vollständig mit nur einer Hand.
• Gestützte Haltung: 36% hielten das Gerät in einer Hand und tippten mit den Fingern der zweiten Hand.
• Zweihändige Nutzung: 15% hielten das Telefon mit beiden Händen und tippten mit beiden Daumen.

Hoobers Studie beobachtete mobile Nutzer 2013 an öffentlichen Orten und dokumentierte Greifgewohnheiten, ohne Konversionsraten zu messen. Smartphones haben sich seit 2013 verändert; lesen Sie die Zahlen daher als Momentaufnahme von Greifgewohnheiten, nicht als Messung Ihrer eigenen Kunden.

Die ergonomische Erkenntnis: In Hoobers Stichprobe bediente rund die Hälfte der Personen, die den Bildschirm berührten, ihr Gerät mit einer Hand. Liegen Navigationsschaltflächen ausschließlich in oberen Ecken, müssen Einhand-Nutzer womöglich umgreifen. Vertiefende Details bietet unsere Studie zur Daumenzonen-Ergonomie.

Was das Verstecken des Menüs kostet

Das Verstecken mobiler Navigation hinter einem Hamburger-Button verursacht messbare Usability-Verluste. In Tests untersuchte die Nielsen Norman Group die Nutzungsrate verschiedener Layouts (NN/g):

NN/g stellte fest, dass mobile Käufer versteckte Navigation in nur 57% der Fälle nutzten, Combo-Navigation—sichtbare Hauptpfade kombiniert mit einem Drawer—dagegen in 86% der Fälle (NN/g). NN/g testete keine Seiten mit ausschließlich sichtbarer Navigation auf Handys; verglichen werden also versteckte und kombinierte Navigation. In diesem Test ging sichtbare Hauptnavigation mit deutlich höherer Nutzung einher.

Wann eine Tab-Bar optimal passt

Um Auffindbarkeitsverluste auf Touchscreens zu beheben, setzen Stores auf eine permanente untere Tab-Bar. Die Nielsen Norman Group empfiehlt ausdrücklich, 4 oder weniger Hauptlinks als sichtbare Links anzuzeigen (NN/g).

Eine Tab-Bar setzt dies um, indem sie Kernbereiche dauerhaft in Daumenreichweite platziert. Händler sollten sich jedoch beschränken: NN/g warnt, dass bei mehr als 5 Optionen in einer Leiste touch-gerechte Zielflächen kaum haltbar sind (NN/g).

Die Nielsen Norman Group betont zudem, dass zu kleine oder zu dichte Links mobilen Nutzern großen Frust bereiten (NN/g). Zu viele Icons führen zu Fehleingaben. Beschränken Sie die Tab-Bar auf wenige Kernziele.

Architekturmodelle finden Sie in unseren Leitfäden zur unteren Tab-Bar für Shopify und mobilen Navigation jenseits des Hamburgers.

Barrierefreiheit und Performance: Menüs, die Kunden wirklich nutzen können

Visuelles Design nützt wenig, wenn das Menü schwer bedienbar ist oder den Storefront ausbremst. Erstklassige Shopify-Menüs müssen Barrierefreiheitsstandards erfüllen und die DOM-Last gering halten.

Interaktive Schalter vs. direkte Hyperlinks

Bedienelemente müssen ihre Funktion unmissverständlich signalisieren. Laut Shopify Help Center dient ein Hauptelement mit Untermenü als Schalter zum Auf- und Zuklappen, nicht als direkter Link zu einer Kollektionsseite.

Ein Element gleichzeitig als Kollektionslink und Untermenü-Schalter einzusetzen, verlangt von einem einzigen Bedienelement zwei Aufgaben und verwirrt Tastatur-, Screenreader- und Touch-Nutzer. Behandeln Sie Elemente mit Untermenü rein als Aufklapp-Schalter mit einem Link “Alle [Kategorie] anzeigen” im Menü.

Standortindikatoren und Touch-Flächen

Die Nielsen Norman Group bezeichnet das Fehlen klarer Standortindikatoren als wahrscheinlich häufigsten Menüfehler im Web (NN/g). Aktive Links müssen durch Fettung, hohen Kontrast oder Unterstreichungen deutlich hervorgehoben werden.

Touch-Ziele verdienen die gleiche Sorgfalt. NN/g betont, dass zu kleine oder eng beieinander liegende Links mobile Nutzer extrem frustrieren (NN/g). Mobile Touch-Flächen benötigen ausreichende Größe und Abstände.

Mehr dazu in unserem Leitfaden für barrierefreie Navigation.

DOM-Knotenzahl und Rendering-Overhead

Jeder Menülink, Spalten-Wrapper, Bild- und Listeneintrag vergrößert das Document Object Model (DOM). In seinen Performance-Audits warnt Google Chrome Lighthouse ab etwa 800 Knoten im Body und meldet ab etwa 1.400 Knoten einen Fehler (Google Chrome Lighthouse).

Gibt Ihr Theme getrennte Container für Desktop- und Mobile-Menü aus, kann derselbe Kategoriebaum zweimal im Seitencode stehen. Prüfen Sie Ihr eigenes Theme: Jeder doppelte Link erhöht die oben genannte Knotenzahl.

Interaction to Next Paint (INP) auf Mobilgeräten

Unter Googles Core Web Vitals misst Interaction to Next Paint (INP) die Reaktionsfähigkeit auf Nutzerinteraktionen. Laut Google Chrome Web.dev signalisiert ein INP-Wert von maximal 200 Millisekunden eine gute Reaktionszeit.

Google hält fest, dass INP reines Scrollen nicht berücksichtigt (Google Chrome Web.dev). INP erfasst jedoch Klick- und Touch-Latenzen—wie das Öffnen eines Drawers oder Wechseln eines Tabs. Schwerer JavaScript-Code an Menüschaltern blockiert den Hauptthread und treibt INP über 200 Millisekunden.

Details finden Sie in unserem Beitrag über Einfluss der Navigation auf Page Speed.

Das passende Menümuster für Ihren Store wählen

Die Wahl des Navigationsmusters ist eine strukturelle Entscheidung basierend auf Sortimentskomplexität und Kundenverhalten.

Store-Profil-Matrix

Navigations-Entscheidungsrahmen

Zur Auswahl des passenden Musters beantworten Sie drei strukturelle Fragen:

1. Anzahl der Hauptziele: Zeigen Sie bei 4 oder weniger Hauptelementen sichtbare Links an, statt sie hinter einem Icon zu verbergen (NN/g).
2. Unterkategorie-Tiefe: Umfasst das Sortiment diverse Subkategorien, erlaubt ein Mega-Menü das Erfassen auf einen Blick statt Auswendiglernen (NN/g).
3. Mobiler Traffic-Anteil: Prüfen Sie Shopify Analytics. Hoher Smartphone-Anteil verlangt Daumenreichweite und Combo-Navigation, damit Einkaufsziele sichtbar bleiben.

Shopify Store Navigations-Entscheidungsbaum:
+-- Hauptebene <= 4 Ziele?
|   +-- Ja: Als sichtbare Links anzeigen (NN/g-Empfehlung)
|   +-- Nein: In logische Kategorie-Zentren bündeln
|
+-- Umfasst der Katalog diverse getrennte Unterkategorien?
|   +-- Nein: Einfache Dropdowns nutzen, um Leerraum zu vermeiden
|   +-- Ja: Mehrspaltiges Mega-Menü am Desktop für Überblick auf einen Blick nutzen
|
+-- Mobiler Traffic-Check:
    +-- Überwiegend Smartphone-Besucher?
        +-- Reine versteckte Hamburger-Navigation meiden (nur 57% Nutzung)
        +-- Combo-Navigation bevorzugen: wichtige Links sichtbar + Drawer für den tiefen Katalog (86% vs. 57% im NN/g-Test)

Trade-offs: Wann komplexe Menüs ungeeignet sind

Komplexe Navigationsmuster wie mehrspaltige Mega-Menüs und Tab-Bars verbessern die Übersicht, sind aber nicht universell sinnvoll. Falsch eingesetzt, erzeugen sie Reibung.

1. Kleine Stores oder Monomarken

Für Stores mit kleinem Sortiment ist ein mehrspaltiges Mega-Menü kontraproduktiv. Wenige Artikel in riesigen Panels wirken verloren und erzeugen unnötige Klicks. Für Monomarken-Stores bietet ein kompakter horizontaler Header den schnellsten Produktzugang.

2. Ebenen-Überlappung auf mobilen Displays

Tab-Bars bieten zwar Ergonomievorteile, beanspruchen jedoch vertikalen Bildschirmplatz. Nutzt Ihr Store bereits Chat-Widgets, Cookie-Banner oder Ankündigungsleisten, drohen visuelle Konflikte. Verdeckt ein Chat-Button den Warenkorb-Button oder ein Tab-Icon, erreichen Kunden es nicht. Prüfen Sie schwebende Elemente vorab gründlich.

3. Rendering-Aufwand und hochauflösende Grafiken

Mega-Menüs mit hochauflösenden Fotos und Bannern zu überfrachten, bläht die HTML-Nutzlast auf. Unnötig geladene Medien treiben die DOM-Knotenzahl Richtung Lightouses 800-Knoten-Warnschwelle (Google Chrome Lighthouse). Zudem sind Panels, die sich nur per Hover öffnen, auf Touchscreens schwer bedienbar.

4. Wenn native Shopify-Themes völlig ausreichen

Passt Ihr Sortiment sauber in Shopifys Drei-Ebenen-Struktur und bietet Ihr Theme einen reaktionsschnellen Drawer, brauchen Sie womöglich keine externe App. Prüfen Sie zuerst, was Ihr Theme bereits bietet. Prüfen Sie native Grenzen anhand unseres Leitfadens zu Shopify Theme-Menü-Grenzen.

Wo sich Navi+ einordnet

Für Händler, deren Sortiment oder mobile UX über Theme-Grenzen hinauswächst, bietet Navi+ eine modulare Navigations-Suite speziell für Shopify.

Modulare Navigation speziell für Shopify

Navi+ ermöglicht Händlern die Bereitstellung essenzieller Elemente—wie eine mobile Tab-Bar, Off-Canvas Drawer, Desktop- und Mobile-Mega-Menüs, Icon-Gitter und Floating Action Buttons—ohne Programmieraufwand. Die Tab-Bar verankert Hauptziele am Daumen und bietet ein optionales Auto-Hide beim Scrollen.

Theme-Code bleibt unberührt & native 3-Ebenen-Unterstützung

Navi+ installiert sich rein über native Shopify App Embeds ohne Eingriffe in Liquid-Templates. Ihre Theme-Dateien bleiben unangetastet. Menüstrukturen unterstützen bis zu drei Ebenen gemäß Plattform-Standards. Zudem können Händler ein bestehendes Shopify-Menü einbetten und dessen Kopie per “Sync now”-Klick aktualisieren.

Bei Theme-Wechseln weiterverwendbar

Da Ihre Menüs in Navi+ gespeichert sind, setzt ein Theme-Wechsel Ihre Navigationsstruktur nicht zurück. Sie müssen das Navi+ App Embed im neuen Theme aktivieren und die Platzierung prüfen. Navi+ wurde auf 331 Themes getestet, siehe das Navi+ Theme-Kompatibilitätsverzeichnis.

Wenn Ihr Theme-Menü bereits für Ihren Katalog funktioniert, behalten Sie es bei. Wenn Sie eine untere Tab-Bar oder ein Mega-Menü ohne Bearbeitung des Theme-Codes wünschen, können Sie Navi+ auf Ihrem aktuellen Theme ausprobieren und anhand der folgenden Checkliste überprüfen.

Aktions-Checkliste: Ihr Shopify-Menü prüfen

Nutzen Sie diese Prüfliste, um Ihre Store-Navigation auf echten Geräten hinsichtlich Usability, Ergonomie und Performance zu testen.

• Menütiefe im Admin prüfen: Unter Inhalt > Menüs kontrollieren, dass Kategoriebäume nicht tiefer als drei Ebenen verschachtelt sind. Sicherstellen, dass Elternelemente einen Link “Alle [Kategorie] anzeigen” im Dropdown enthalten.
• Einhand-Reichweitentest durchführen: Auf einem echten Smartphone versuchen, die drei wichtigsten Kollektionen nur mit dem Daumen zu öffnen, ohne umzugreifen. Fällt dies schwer, sichtbare Links oder eine Tab-Bar ergänzen.
• DOM-Knoten im Storefront messen: In der Chrome-Konsole document.querySelectorAll('body *').length ausführen und mit Lighthouses Warnschwelle von rund 800 Knoten sowie der Fehlerschwelle von rund 1.400 Knoten vergleichen.
• Standortanzeigen und Touch-Ziele prüfen: Sicherstellen, dass aktive Kategorien gut erkennbar hervorgehoben sind (fett oder unterstrichen) und Touch-Ziele genug Abstand haben, um Fehlklicks zu vermeiden.
• Navigations- vs. Such-Analytics vergleichen: In Shopify Analytics die Konversionsrate von Menü-Besuchern mit Suchenden vergleichen, um unzureichend auffindbare Katalogpfade aufzudecken.

FAQ

Wie viele Menüebenen unterstützt Shopify?

Shopify unterstützt nativ bis zu drei Navigationsebenen: ein Hauptelement mit bis zu zwei verschachtelten Dropdown-Ebenen (Shopify Help Center). Die meisten Themes halten sich an dieses Drei-Stufen-Limit.

Wo bearbeite ich Navigationsmenüs im Shopify-Admin?

Sie verwalten die gesamte Store-Navigation im Shopify-Admin unter Inhalt > Menüs (Shopify Help Center), wo Sie Links anlegen und Ebenen ordnen. Die Theme-Einstellungen legen anschließend fest, welches Menü angezeigt wird.

Gehen meine Menüs verloren, wenn ich mein Shopify-Theme wechsle?

Nein. Menüs werden als Plattformdaten unter Inhalt > Menüs gespeichert, nicht im Theme-Code. Beim Theme-Wechsel müssen Sie das Menü lediglich in den Header-Einstellungen des neuen Themes neu zuweisen (Shopify Entwicklerdokumentation).

Wann sollte ich bei Shopify ein Mega-Menü statt eines Dropdowns nutzen?

Nutzen Sie ein Mega-Menü, wenn Ihr Katalog vielfältige Unterkategorien umfasst, die Kunden auf einen Blick überblicken müssen (NN/g). Bei kleinen Katalogen vermeidet ein einfaches Dropdown unnötigen Leerraum.

Warum ist das Verstecken aller Links hinter einem Hamburger-Menü mobil problematisch?

Usability-Tests der Nielsen Norman Group belegen, dass Käufer versteckte mobile Menüs nur in 57% der Fälle nutzen, verglichen mit 86% bei Combo-Navigation mit sichtbaren Links (NN/g).

Was ist die empfohlene Höchstzahl an Elementen für eine mobile Tab-Bar?

Halten Sie eine mobile Tab-Bar bei wenigen Kernzielen. NN/g weist darauf hin, dass sich bei mehr als 5 Optionen kaum noch alle in einer Tab- oder Navigationsleiste unterbringen lassen, ohne die optimale Touch-Größe zu verlieren (NN/g).

Sources

• Shopify Help Center: Menus and links — Verwaltung von Store-Navigationsmenüs im Shopify-Adminbereich.
• Shopify Help Center: Drop-down menus — Richtlinien zum Drei-Ebenen-Limit und zum Verhalten von Aufklapp-Schaltflächen.
• Shopify Dev Documentation: Navigation Architecture — Technische Referenz für Theme-Einstellungen zu link_list und mehrstufiges Rendering.
• Nielsen Norman Group: Mega Menus Work Well (Angie Li & Jakob Nielsen, 2017) — Forschung zur Übersicht auf einen Blick und empfohlenen 0,5-Sekunden-Hover-Verweilzeit.
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation (Kara Pernice & Raluca Budiu, 2016) — Usability-Vergleich zwischen sichtbarer, versteckter und Combo-Navigation.
• Nielsen Norman Group: Mobile Navigation Patterns (Raluca Budiu, 2015) — Analyse von Drawer-Menüs und Navigationsleisten mit Warnung vor mehr als 5 Elementen.
• Nielsen Norman Group: Menu Design Best Practices (Page Laubheimer, 2024) — Prinzipien zur Standortanzeige und Wahrung ausreichender Touch-Abstände.
• UXmatters: How Do Users Really Hold Mobile Devices? (Steven Hoober, 2013) — Empirische Erhebung von 1.333 Interaktionen zu einhändigen, gestützten und beidhändigen Haltungen.
• Google Chrome Lighthouse: DOM Size Thresholds — Leistungsrichtlinien mit 800-Knoten-Warnschwelle und 1.400-Knoten-Fehlerschwelle.
• Google Chrome Web.dev: Interaction to Next Paint (INP) — Core Web Vitals Standards mit dem 200-Millisekunden-Schwellenwert für Reaktivität.
• Navi+ Theme-Kompatibilitätsverzeichnis — Übersichtsseite der 331 Shopify-Themes, auf denen Navi+ getestet wurde.