Shopify Header-Navigation: Layout-Modelle, Platzverteilung, Utility-Menüs und Breakpoint-Engineering

Ein Desktop-Header operiert innerhalb eines festen horizontalen Budgets, das Markenidentität, Produktkategorien, Utility-Tools und Checkout-Pfade ausbalanciert.

Wird der Header wie ein ungesteuerter Flexbox-Container behandelt, können Links mit der Suche kollidieren, in zweite Zeilen umbrechen oder in mobile Drawers kollabieren. Zuverlässige Navigation erfordert bewusste Layoutwahl, Platzbudgetierung und responsive Verifikation.

Schnelle Antwort: Welches Shopify-Header-Layout passt zu Ihrem Store?

Es gibt kein einzelnes bestes Shopify-Header-Layout. Katalogstarke Shops fahren meist mit einem linken Logo und Inline-Kategorielinks am besten, kleine Boutiquen können ein zentriertes Logo mit geteilten Links nutzen, und große Shops mit vielen Abteilungen brauchen einen zweistufigen Header mit separater Utility-Leiste. Vermeiden Sie es, die Desktop-Navigation hinter einem Hamburger zu verstecken.

Die Wahl der passenden Desktop-Header-Architektur hängt von vier Kernmodellen ab:

• Linkes Logo + Inline-Navigation: Verankert das Logo links, die Kategorielinks verlaufen nach rechts. Bietet die breiteste horizontale Strecke für Katalogkategorien und bündelt die Utilities rechts.
• Zentriertes Logo + Geteilte Navigation (Split): Zentriert das Logo, flankiert von Kategorielinks auf beiden Seiten. Passt zu kleinen Katalogen, teilt den horizontalen Platz aber in zwei kürzere Abschnitte.
• Zweistufig gestapelte Navigation (Two-Tier): Verteilt die Navigation auf zwei horizontale Leisten. Ein schmaler oberer Streifen beherbergt Utilities, die untere Leiste bleibt den Produktkategorien vorbehalten.
• Versteckter Desktop-Drawer: Verbirgt Links hinter einem Hamburger-Icon. Optisch minimal, doch die Nielsen Norman Group rät von versteckter Navigation in Desktop-Oberflächen ab.

Warum der Header-Platz auf Laptop-Bildschirmen knapp wird

Designer prüfen ein Template oft auf einem breiten Monitor. Manche Kunden surfen auf Laptops, auf denen die Display-Skalierung des Betriebssystems die Zahl der für die Seite verfügbaren CSS-Pixel verringert.

Als Veranschaulichung (eine Rechnung, keine Statistik): Ein 1920 px breiter Bildschirm bei 150 % Windows-Skalierung ergibt eine effektive CSS-Breite von 1280 px (1920 / 1.5 = 1280). Prüfen Sie in Ihren Store-Analytics, welche Viewport-Größen Ihre eigenen Kunden tatsächlich nutzen.

Überschreiten Header-Elemente die horizontale Breite, kann die Navigation auf drei verschiedene Arten brechen:

+-------------------------------------------------------------------------------+
|  Wide Viewport - Illustration                                                 |
|  [Brand Logo]   Women   Men   Accessories   Footwear   Sale   [Search] [Cart] |
+-------------------------------------------------------------------------------+

+-------------------------------------------------------------------------------+
|  Laptop-Width Viewport - Unplanned Wrapping Illustration                      |
|  [Brand Logo]   Women   Men   Accessories   Footwear                          |
|  Sale   [Search] [Cart]  <-- Wraps onto second line, shifting content downward|
+-------------------------------------------------------------------------------+

1. Ungewollter Flexbox-Umbruch: Flex-Container schieben nachfolgende Kategorien oder Sucheingaben in eine zweite Zeile, was die Header-Höhe erhöht und das Hero-Merchandising nach unten verdrängt.
2. Horizontaler Überlauf und abgeschnittene Utilities: Flex-Container mit nowrap drängen Utilities über den Viewport-Rand hinaus, wodurch Warenkorb-Trigger außerhalb des Bildschirms verschwinden oder horizontale Scrollbalken entstehen.
3. Vorzeitiger Rückfall auf den Desktop-Drawer: Theme-Media-Queries können auf einem Desktop-Viewport in Laptop-Breite zum mobilen Hamburger-Menü umschalten, wenn der horizontale Platz nicht gesteuert wird.

Nach den web.dev Cumulative Layout Shift (CLS) Richtlinien gilt: „Eine Layout-Verschiebung tritt immer dann auf, wenn ein sichtbares Element seine Position von einem gerenderten Frame zum nächsten ändert“. Ein Header, der schon beim ersten Rendern umbricht, ist ein Layout-Problem, aber für sich genommen keine Layout-Verschiebung. Verschiebungen entstehen, wenn sich der Header nach der Anzeige ändert, etwa wenn eine spät ladende Schrift oder ein Skript seine Höhe verändert. Layout-Verschiebungen innerhalb von 500 Millisekunden nach einer Nutzereingabe werden aus dem CLS ausgeschlossen.

Was die Usability-Forschung zu Blickmustern, Suche und Utility-Links sagt

Veröffentlichte Usability-Forschung liefert einige Grunderwartungen an das Header-Design im E-Commerce. Sie klärt nicht jede Layout-Frage, deshalb kennzeichnen wir, wo ein Punkt unsere eigene Schlussfolgerung ist.

Sichtbare vs. versteckte Navigation auf dem Desktop

In der Studie der Nielsen Norman Group von Pernice & Budiu (2016) nutzten Menschen „auf dem Desktop versteckte Menüs in nur 27 % der Fälle“, während sichtbare und kombinierte Navigation in 48 % bzw. 50 % der Fälle genutzt wurde. Die Empfehlung von NN/g ist eindeutig: „Verwenden Sie keine versteckte Navigation (wie Hamburger-Icons) in Desktop-Benutzeroberflächen.“

Blickmuster oben links und die Hypothese der geteilten Navigation

Der NN/g-Artikel zum F-Muster (Pernice, 2017) beschreibt „viele Fixationen, die sich am oberen und am linken Rand der Seite konzentrieren“. Ein linksbündiges Logo mit Kategorielinks liegt in genau diesem Bereich.

Zentrierte Split-Navigation ist eine Hypothese. Wir haben keine veröffentlichte Studie gefunden, die sie testet. Beginnt die Aufmerksamkeit oben links, müssen Besucher, die die linke Flanke scannen, über das zentrale Logo hinwegspringen, um die Kategorien der rechten Flanke zu erreichen, sodass diese Links womöglich weniger Aufmerksamkeit erhalten. Händler mit Split-Headern sollten das Engagement mit Klickkarten oder Heatmaps prüfen.

Platzierung und Größe des Suchfelds

Die Empfehlung von NN/g zur Suche (Nielsen, 2001) lautet: „Auf Startseiten sollte die Suche ein Eingabefeld und kein Link sein“, platziert am oberen Seitenrand, meist in der rechten Ecke, und „breit genug, um die typische Suchanfrage aufzunehmen“. Eine kleine Boutique kann dennoch ein ausklappbares Such-Icon bevorzugen, um Platz zu sparen; betrachten Sie das als einen zu testenden Kompromiss und nicht als erforschte Best Practice.

Produktkategorien als Hauptebenen-Einträge

Baymard Institute (2023) stellte fest, dass „33 % der mobilen Websites die Produktkategorien nicht zu Elementen der obersten Ebene machen“, und merkt an, dass „Produktkategorien als Elemente der obersten Ebene auf Desktop-Websites der idealen mobilen Umsetzung entsprechen“. Unsere Schlussfolgerung: Stehen „Über uns“, „FAQ“ oder „Bestellung verfolgen“ in derselben Zeile wie die Kategorien, konkurrieren sie mit den Kategorien um begrenzten Platz und Aufmerksamkeit. Das ist ein gestalterisches Urteil, kein gemessenes Ergebnis.

Vier Header-Layout-Modelle im Vergleich

Für die Wahl der passenden Header-Architektur müssen Händler jedes Modell an Katalogbreite, Suchanforderungen und Utility-Aufwand messen.

Hinweis: Dieser Vergleich ist eine Zusammenfassung architektonischer Muster, kein gemessenes Audit einzelner Shops.

Linksbündige Inline-Navigation ist ein verbreiteter Ausgangspunkt im E-Commerce. Das Logo links zu verankern und die Links nach rechts fließen zu lassen, gibt Produktkategorien eine ununterbrochene horizontale Strecke.

Zentrierte Split-Navigation bietet redaktionelle Symmetrie für Marken mit wenigen Links. Da der Platz jedoch geteilt wird, können zusätzliche Kategorien oder Lokalisierungs-Selektoren schnell zu Kollisionen führen.

Zweistufig gestapelte Navigation löst Platzkonflikte, indem sie Zuständigkeiten vertikal trennt. Händler mit hohem Volumen können Markenidentität, offene Suche und Utilities in der oberen Leiste unterbringen und die untere Leiste für Kategorien reservieren. Die Kategorietiefe kann dann in ein Mega-Menü wandern: Baymard berichtet, dass „Hover-basierte Dropdown-Menüs (auch ‚Mega-Menüs‘ genannt) derzeit bei 88 % aller führenden US-E-Commerce-Sites als Hauptnavigation verwendet werden“, und zwar in seinem Benchmark zur Hauptnavigation, dessen Beispiele aus einem UX-Benchmark von 344 E-Commerce-Sites stammen. Zum Panel-Design selbst lesen Sie unseren Leitfaden zu Shopify Mega-Menü Best Practices.

Unter dem Gesichtspunkt der Barrierefreiheit hält der W3C WAI ARIA Authoring Practices Guide fest: „Ein Menü, das visuell dauerhaft sichtbar ist, ist eine Menubar.“

Utility-Menüs von der Katalog-Navigation trennen

In der Website-Architektur umfasst die Utility-Navigation Werkzeuge, die Kundenaufgaben unterstützen, ohne zum Produktkatalog zu gehören, etwa Konto-Login, Bestellverfolgung, Währungsumschalter, Filialsuche und Kundensupport. NN/g formuliert es so: „Utility-Navigation besteht aus sekundären Aktionen und Werkzeugen“.

Abbildung 1: Concept illustration (Konzeptillustration) — Header mit in das Hauptmenü gemischten Utility-Links im Vergleich zu einem Header, der sie in eine Utility-Leiste auslagert.

Laut Nielsen Norman Group (Farrell, 2015) können Utility-Links im Vergleich zur Hauptnavigation „eine sekundäre (weniger prominente) visuelle Platzierung“ erhalten.

In Shopify-Storefronts haben Händler meist drei Wege, Utility-Links aus der Hauptzeile zu nehmen. Welche davon verfügbar sind, hängt von Ihrem Theme ab:

1. Ein sekundäres Menü oder Utility-Bereich im Header-Abschnitt des Themes: Manche Themes bieten eine Einstellung für ein zweites Menü oder einen schmalen Streifen über der Hauptleiste. Prüfen Sie die Header-Einstellungen Ihres Themes, um zu sehen, was es bereitstellt.
2. Eine obere Utility-Leiste: Unterstützt Ihr Theme einen Streifen über dem Haupt-Header, kann er Elemente wie Währungsauswahl, Kundenkonto und Bestellverfolgung aufnehmen und die Hauptleiste für Katalog-Links freihalten.
3. Verlagerung in den Footer: Institutionelle Links wie „Über uns“, „Presse“ und „FAQ“ in den Footer zu verschieben, räumt den Header auf und hält sie dennoch erreichbar.

Spezifische Hinweise zur Vereinfachung der Navigation im Checkout-Ablauf finden Sie in unserer Analyse zur Header-Navigation im Checkout.

Breakpoint-Engineering: Den Header bei Laptop-Breiten testen

Verlassen Sie sich nicht auf die Sichtprüfung auf einem Breitbildmonitor, sondern planen Sie den Header gegen ein explizites horizontales Pixelbudget.

Abbildung 2: Concept illustration (Konzeptillustration) — ein Shopify Header, getestet bei der Breite eines großen Monitors und bei einer schmaleren Laptop-Breite, für die das Menü einen Plan braucht.

Die Formel für die verfügbare Breite

Schätzen Sie das horizontale Pixelbudget für die primären Kategorielinks mit dieser praktischen Formel:

Available Width = Viewport Width - (Logo Width + Utility Cluster Width + Container Padding & Margins)
Max Width Per Item = Available Width / Number of Primary Links

Eine hypothetische Struktur (keine echten Messwerte): Messen Sie Logo, Utility-Gruppe und Ränder in Ihrem eigenen Store, ziehen Sie sie von der Viewport-Breite ab, um die Available Width zu erhalten, und teilen Sie diese durch die Anzahl der Kategorielinks, um ein Budget pro Link zu bekommen. Vergleichen Sie dieses Budget mit dem breitesten Label, das Sie in Ihrem Store messen.

Reale Label-Breiten in den DevTools messen

Um zu prüfen, ob die Navigation ohne Umbruch passt, untersuchen Sie die Label-Breiten direkt in den Browser-Entwicklertools:

1. Öffnen Sie die Chrome DevTools (Cmd+Option+I oder F12) und aktivieren Sie den Geräte-Modus.
2. Stellen Sie die responsive Viewport-Breite auf die effektive Laptop-Breite aus dem Skalierungsbeispiel oben ein oder auf eine Breite aus Ihren eigenen Analytics.
3. Untersuchen Sie das längste Navigations-Label im Computed-Tab und notieren Sie dessen gerenderte Pixelbreite inklusive Padding und Margin.
4. Multiplizieren Sie die Breite des längsten Labels für eine konservative Prüfung mit der Linkanzahl. Übersteigt die Summe die Available Width, wird das Menü voraussichtlich umbrechen oder abgeschnitten.

Architektonische Faustregeln

Dies sind gestalterische Urteile, keine gemessenen Schwellenwerte. Bestätigen Sie sie immer mit der obigen Breitenprüfung.

• Shop mit kleinem Katalog: Bei wenigen Hauptkategorien passt ein linkes Logo mit Inline-Menü oder ein zentriertes Split-Logo meist leichter auf Laptop-Viewports.
• Shop mit mittlerem Katalog: Ein linkes Logo mit Inline-Menü kann funktionieren, wenn die Utility-Links kompakte Icons sind und die Labels kurz.
• Großer Shop mit mehreren Abteilungen: Bei vielen Hauptkategorien kollidiert Inline-Navigation auf Laptop-Bildschirmen wahrscheinlich. Erwägen Sie ein zweistufig gestapeltes Layout oder ein Mega-Menü, das die Tiefe aus der Leiste verlagert.
• Internationaler oder Multi-Währungs-Shop: Lokalisierungs-Selektoren verbrauchen horizontalen Utility-Platz. Erwägen Sie, die Selektoren in eine obere Utility-Leiste oder den Footer zu verlegen.

Übersteigt die Navigation die verfügbare Breite, haben Sie drei Wege zur Abhilfe: primäre Links reduzieren, Label-Texte kürzen oder auf ein zweistufiges Layout wechseln. Vermeiden Sie es, die Desktop-Navigation vorschnell in einen Off-Canvas-Drawer zu kollabieren.

Shopify-spezifische Fallstricke: Markets-Selektoren, Header-DOM-Größe und Großbuchstaben

Navigation innerhalb von Shopify bringt plattformspezifische Herausforderungen mit sich.

Währungs- und Sprachauswahl in Shopify Markets

Stores, die in mehrere Länder verkaufen, ergänzen den Header oft um Währungs-, Länder- oder Sprachwähler. Je nach Theme können diese als recht breite Schaltflächen mit Währungscode oder Flagge erscheinen. In einem einzeiligen Inline-Header nimmt ein breiter Selektor den Kategorien Platz weg und kann auf Laptops Umbrüche auslösen. Erwägen Sie, Markets-Selektoren in einen oberen Utility-Streifen oder den Footer zu setzen.

Header-DOM-Größe und Liquid-Overhead

Ein umfangreiches mehrstufiges Dropdown direkt in Liquid zu rendern, fügt sein Markup jeder Seitenantwort hinzu, und dieses Markup zählt zur DOM-Größe der Seite. Nach den Google Chrome Lighthouse Richtlinien zur DOM-Größe „warnt“ Lighthouse, „wenn das Body-Element mehr als ~800 Knoten hat“, und „meldet einen Fehler, wenn das Body-Element mehr als ~1.400 Knoten hat“. Ein schwerer Header verbraucht einen Teil dieses Budgets, bevor der Seiteninhalt gerendert wird. Mehr dazu in unserem Leitfaden zu Navigation und Core Web Vitals.

Großbuchstaben-Typografie und Zeichenabstand

Markenrichtlinien schreiben für Navigationslinks oft Großbuchstaben mit erweitertem Zeichenabstand vor. Text in Großbuchstaben zu setzen (text-transform: uppercase) macht ihn im Vergleich zur normalen Schreibweise in der Regel breiter, und letter-spacing fügt nach jedem Zeichen Abstand hinzu. Messen Sie die gerenderten Label-Breiten neu, sobald Sie die Typografie Ihres Storefronts ändern.

Grenzen der nativen Menüschachtelung in Shopify

Laut der Dokumentation des Shopify Help Centers zu Dropdown-Menüs „kann das Element der obersten Ebene bis zu zwei Ebenen verschachtelter Dropdown-Menüs enthalten“, was eine Plattformgrenze von drei Navigationsebenen setzt. Diese Menüs konfigurieren Sie im Shopify-Admin und verbinden sie mit Themes wie Horizon oder anderen aus unserem Shopify-Theme-Hub.

Vor- und Nachteile: Wann welches Header-Modell vermieden werden sollte

Jedes Header-Layout wägt Ästhetik, Platzeffizienz und Auffindbarkeit des Katalogs gegeneinander ab.

Single-Product-Stores mit Inline-Headern können zwischen Markenzeichen und Warenkorb-Icon unschönen leeren Raum aufweisen. Umgekehrt kann ein zentriertes Split-Layout auf jeder Seite knapp werden, wenn eine Marke saisonale Kollektionen oder internationale Währungswähler hinzufügt.

Zweistufig gestapelte Header erhöhen die vertikale Höhe und schieben Hero-Inhalte auf der Seite nach unten. Messen Sie daher die Gesamthöhe aus Ankündigungsleiste, Utility-Leiste und Hauptnavigation. Für Stores, in denen mobile Käufer die überwältigende Mehrheit stellen, lohnt sich diese zusätzliche Desktop-Höhe womöglich nicht.

Schließlich widersprechen versteckte Desktop-Drawer der Empfehlung von NN/g und dessen Befund, dass Desktop-Nutzer versteckte Menüs weit seltener nutzten als sichtbare (27 % gegenüber 48 % der Fälle). Off-Canvas-Drawer sind auf mobilen Bildschirmen Standard, doch Desktop-Viewports bieten meist Platz für sichtbare Links. Zur Architektur mobiler Drawer lesen Sie unseren Leitfaden zum Design mobiler Drawer-Menüs.

Aktions-Checkliste: Audit für Ihren Shopify-Header

Prüfen Sie den Header Ihres Shopify-Storefronts mit dieser sechsstufigen Checkliste:

• Schritt 1: Laptop-Viewport-Audit durchführen — Öffnen Sie die Chrome DevTools und testen Sie Ihren Storefront bei der effektiven Laptop-Breite aus dem Skalierungsbeispiel und bei den Breiten aus Ihren eigenen Analytics. Bestätigen Sie, dass Kategorielinks nicht umbrechen, keine horizontalen Scrollbalken erscheinen und das Theme nicht zu einem Hamburger-Menü kollabiert.
• Schritt 2: Utility-Links ohne Commerce-Bezug aus der Katalogzeile entfernen — Nehmen Sie „Bestellung verfolgen“, „Über uns“ und „FAQ“ aus dem primären Kategoriemenü. Verlagern Sie sie in eine obere Utility-Leiste, ein Konto-Dropdown oder ein Footer-Menü.
• Schritt 3: Budget für die Header-Höhe festlegen — Messen Sie die Gesamthöhe aus Ankündigungsleiste, Utility-Leiste und Hauptnavigation. Prüfen Sie, wie viel vom ersten Bildschirm sie auf einem Laptop einnehmen.
• Schritt 4: Navigations-Typografie und Label-Formulierungen prüfen — Untersuchen Sie das längste Kategorie-Label. Kürzen Sie umständliche Formulierungen (zum Beispiel „Herren-Oberbekleidung und Jacken“ zu „Herrenjacken“). Prüfen Sie, ob Großbuchstaben oder Zeichenabstand die Label-Breiten aufblähen.
• Schritt 5: Größe von Klick- und Touch-Zielen prüfen — Stellen Sie sicher, dass Header-Icons und -Links das W3C WCAG 2.2 Erfolgskriterium 2.5.8 Zielgröße (Minimum) erfüllen: ein Zeigerziel von mindestens 24 mal 24 CSS-Pixeln oder ausreichender Abstand um kleinere Ziele.
• Schritt 6: Tastaturnavigation und Fokusführung validieren — Prüfen Sie, dass Shopper Ihren Header mit Tab und Shift+Tab durchlaufen können. Kontrollieren Sie, dass Escape ein geöffnetes Dropdown schließt und den Fokus auf das Element zurückgibt, das es geöffnet hat, wie im W3C WAI ARIA Menubar Pattern.

Wie sich Navi+ in Ihre Architektur einfügt

Wächst ein Katalog über das hinaus, was der Theme-Header aufnehmen kann, ist eine Möglichkeit individuelle Liquid-Arbeit. Navi+ ist eine Shopify-App, die separate Menüs aufbaut, ohne dass Sie den Header-Code des Themes bearbeiten müssen.

• Getrennte Desktop- und Mobil-Menüs: Erstellen Sie ein Desktop Mega Menu für Desktop-Besucher und konfigurieren Sie ein Mobile Menu (Drawer), eine Tab Bar (siehe unsere Analyse zur mobilen Tab-Bar-Architektur), ein Icon Menu oder einen Floating Button für Mobilgeräte.
• Bis zu 3 Ebenen: Wie die nativen Shopify-Menüs reichen Navi+ Menüs bis zu drei Ebenen. Ein Desktop Mega Menu kann die Kategorietiefe in einem Panel statt in der Header-Leiste unterbringen.
• Theme App Embed: Navi+ wird über ein Standard-Shopify-Theme-App-Embed aktiviert. Menüs werden als Konfiguration gespeichert und im Browser durch App-Skripte gerendert, ohne Liquid-Theme-Dateien zu verändern.

Wir machen hier keine Geschwindigkeitsversprechen. Messen Sie die Auswirkung auf Ihrem eigenen Storefront mit Google PageSpeed Insights.

Wann Navi+ nicht nötig ist: Single-Product-Marken oder Stores mit sehr kleinem Katalog brauchen selten eine Navigations-App eines Drittanbieters. Für diese Stores können die eigenen Header-Einstellungen des Themes ausreichen. Unsere Navi+ Einrichtungsanleitungen für Shopify-Themes decken beliebte Themes ab, falls Sie vergleichen möchten.

Wenn der Header Ihres Themes keinen Platz mehr hat, können Sie Navi+ ausprobieren, um ein separates Desktop Mega Menu und Mobile Menu ohne Änderungen am Theme-Code zu bauen — und danach die Laptop-Breiten-Prüfung aus der Checkliste oben erneut durchführen.

Häufig gestellte Fragen (FAQ)

Wie ändere ich das Header-Menü in Shopify?

Öffnen Sie Ihr Theme im Theme-Editor und wählen Sie den Bereich Header. Laut Shopify Help Center können Sie bei den meisten Themes das Standard-Hauptmenü ändern, indem Sie die Einstellungen im Header-Bereich des Themes bearbeiten.

Wie viele Ebenen kann ein Shopify-Dropdown-Menü haben?

Laut offizieller Shopify-Dokumentation kann ein Element der obersten Ebene bis zu zwei Ebenen verschachtelter Dropdown-Menüs enthalten, was maximal drei Navigationsebenen ergibt.

Sollte ich ein Hamburger-Menü auf dem Desktop verwenden?

Die Nielsen Norman Group rät davon ab: „Verwenden Sie keine versteckte Navigation (wie Hamburger-Icons) in Desktop-Benutzeroberflächen.“ In ihrem Test nutzten Desktop-Anwender versteckte Menüs in 27 % der Fälle gegenüber 48 % bei sichtbarer Navigation.

Wo sollte das Suchfeld im Header platziert werden?

NN/g empfiehlt ein Eingabefeld statt eines Links, platziert am oberen Seitenrand (meist in der rechten Ecke) und breit genug, um die typische Suchanfrage aufzunehmen.

Wo sollten Links für Konto, Bestellverfolgung und Währung platziert werden?

Dies ist Utility-Navigation: sekundäre Aktionen und Werkzeuge. NN/g weist darauf hin, dass sie eine sekundäre, weniger prominente Platzierung erhalten können, sodass eine obere Utility-Leiste oder die rechte Seite des Headers funktioniert, getrennt von den Katalogkategorien.

Wie groß sollten Links und Icons im Header sein?

Nach W3C WCAG 2.2 SC 2.5.8 beträgt die Zielgröße für Zeigereingaben mindestens 24 mal 24 CSS-Pixel, sofern keine Ausnahme gilt, etwa ausreichender Abstand um das Ziel.

Quellen

1. Nielsen Norman Group: Pernice, K. & Budiu, R. (2016). Hamburger Menus and Hidden Navigation Hurt UX Metrics. nngroup.com/articles/hamburger-menus
2. Nielsen Norman Group: Nielsen, J. (2001). Search: Visible and Simple. nngroup.com/articles/search-visible-and-simple
3. Nielsen Norman Group: Pernice, K. (2017). F-Shaped Pattern of Reading: Misunderstood, But Still Relevant. nngroup.com/articles/f-shaped-pattern-reading-web-content
4. Nielsen Norman Group: Farrell, S. (2015). Utility Navigation: What It Is and How to Design It. nngroup.com/articles/utility-navigation
5. Baymard Institute: ‘Main Navigation’ Design Examples. baymard.com/homepage-and-category-usability/benchmark/page-types/drop-down-menu
6. Baymard Institute (2023): Make Product Categories the Top-Level Navigation Items on Mobile Sites (33% Don’t). baymard.com/blog/main-navigation-product-categories
7. Shopify Help Center: Set up drop-down menus in your online store. help.shopify.com
8. W3C Web Accessibility Initiative: Understanding SC 2.5.8: Target Size (Minimum). w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
9. W3C WAI ARIA: Menu and Menubar Pattern. w3.org/WAI/ARIA/apg/patterns/menubar
10. Google web.dev: Cumulative Layout Shift (CLS). web.dev/articles/cls
11. Google Chrome Lighthouse: Avoid an excessive DOM size. developer.chrome.com
12. Navi+: Setup guides for Shopify themes. naviplus.io/shopify-themes