Bottom Navigation – eine feste Leiste von Symbolen am unteren Bildschirmrand – ist das Standard-Navigationsmuster fast jeder mobilen App: Instagram, Amazon, TikTok oder Ihre Banking-App. Öffnen Sie eine davon, und dieselbe Reihe von 4–5 Icons liegt griffbereit am unteren Rand, ohne dass Sie tippen müssen, um ein Menü zu öffnen. Bei Shopify wird dieses Muster meist als Tab Bar bezeichnet. Dieser Leitfaden erklärt, was eine Tab Bar leistet, wann sie sich lohnt und auf welche technischen Details es ankommt, damit sie sich wie eine native App anfühlt.
- Die untere Menüleiste hält 3–5 zentrale Shop-Pfade auf jeder Seite sichtbar – ganz ohne Extra-Klick.
- Baymards UX-Benchmark 2025 bewertet 67 % der mobilen E-Commerce-Websites bei der Navigation als „mittelmäßig bis mangelhaft“ – schlechter als auf dem Desktop (58 %).
- Die entscheidenden Faktoren: Touch-Ziel-Größe (min. 44×44px), iPhone Safe-Area-Abstand und Kollisionsvermeidung mit Chat-Widgets.
Was ist eine mobile Bottom Navigation?
Bottom Navigation ist eine fest am unteren Bildschirmrand verankerte Leiste, die eine kleine Anzahl prägnanter Ziele (Icon + Text) bereithält – typischerweise Startseite, Kategorien / Shop, Suche, Warenkorb und Kundenkonto. Anders als das verdeckte Hamburger-Menü erfordert sie kein Öffnen: Die Kernpfade bleiben auf jeder Unterseite stets sichtbar.
Dies ist kein reines E-Commerce-Konstrukt, sondern feste Leitlinie in Apples Human Interface Guidelines und Googles Material Design. Genau deshalb fühlen sich Besucher sofort intuitiv zurecht: Sie kennen dieses Navigationsmuster bereits aus ihrem täglichen Smartphone-Gebrauch.
Weiterführender ArtikelWarum das Hamburger-Menü auf Mobilgeräten schwächelt und wie die Thumb Zone wirkt →
Warum lohnt sich der Bildschirmplatz am unteren Rand?
Ein permanenter horizontaler Streifen am unteren Bildschirmrand kostet sichtbaren Platz. Doch UX-Studien belegen eindeutig den Mehrwert für Online-Shops:
- Der Baymard Institute UX-Benchmark 2025 ergab, dass 67 % der mobilen E-Commerce-Shops bei der Kategorie- und Startseitennavigation als „mittelmäßig bis mangelhaft“ eingestuft werden (Desktop: 58 %). Mobile Navigation ist die größere Hürde.
- Usability-Tests der Nielsen Norman Group zeigen: Versteckte Navigation (Hamburger) wird auf Smartphones nur in 57 % der Fälle genutzt, während hybride Kombi-Navigation mit dauerhaft sichtbaren Kernlinks eine Nutzungsrate von 86 % erreicht.
- Die Daumenzonen-Forschung von Steven Hoober (über 1.300 analysierte Interaktionen) belegt, dass der Daumen natürlicherweise im unteren Drittel des Bildschirms ruht – genau dort, wo die Tab Bar sitzt, und weit entfernt vom Hamburger-Icon oben links.
Welche Menüpunkte gehören in die Tab Bar?
Apple und Google empfehlen einheitlich 3 bis 5 Elemente. Weniger als drei verschenkt den Raum; mehr als fünf verkleinert die Klickflächen unzulässig.
Empfohlene Best-Practice-Kombination:
- Home (Startseite) – der vertraute Orientierungspunkt
- Kategorien / Shop – das Sortiment oder Öffner für ein Slide-Menü
- Suche – erste Anlaufstelle für wiederkehrende Käufer
- Warenkorb – mit Live-Badge für Artikelanzahl
- Konto / Wunschliste – für Kundenbindung und Stammkunden
Erstellen Sie eine mobile Tab Bar mit Navi+ Menu Builder
Perfekt für mobile Shopify-Käufer: Ergonomische Touch-Ziele, iPhone Safe-Area-Padding, Warenkorb-Badge und automatische Abstandshaltung zu Chat-Widgets.