{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "mobile-bottom-navigation", "name": "Mobile Bottom-Navigation und Bottom-Sheet-Menü", "name_en": "Mobile bottom navigation / expanding bottom nav", "kurz": "Die Leiste in der Daumenzone wächst selbst zum Sheet, per Wisch am Griff geht sie wieder zu.", "kategorie": "Navigation", "kategorie_slug": "navigation", "kategorie_nr": 3, "bau_chat": "C3", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "website_belege": 1, "stimmung": [ "präzise", "verspielt" ], "stimmung_roh": [ "app-artig", "freundlich", "funktional" ], "technik": [ "css", "gsap", "flip", "popover", "pointer-events" ], "technik_gruppen": [ "css", "js", "gsap" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Auf dem Telefon sitzt die Navigation unten in der Daumenzone. Entweder als schwebende Pille mit drei bis fünf Zielen oder als Leiste mit Marke und „Menü“-Knopf. Ein Tipp auf „Menü“ lässt genau diese Leiste nach oben zum Sheet wachsen. Die Fläche bleibt dieselbe, die Ecken bleiben rund, die Links stehen groß und linksbündig darin. Am Griff lässt sich das Sheet nach unten wegwischen. Beim Scrollen nach unten kann die Leiste schrumpfen.", "warum_es_wirkt": "Die Ziele liegen dort, wo der Daumen auf großen Telefonen ohnehin ist. Das Muster kennt jeder aus Apps. Weil die Leiste selbst zum Sheet wird, bleibt klar, woher das Menü kommt (Objektkonstanz).", "wann_einsetzen": "Bei überwiegend mobilen Besuchern und wenigen Zielen: Shops, Gastronomie, Events, Portfolios von Fotografen oder Studios.", "wann_nicht": "Wenn die Leiste wichtige Inhalte, Cookie-Banner oder Chat-Widgets unten verdeckt. Auf dem Desktop gehört die Navigation nach oben. Den Daumen-Knopf nie als Nach-oben-Knopf und nie zusätzlich zur vollen Leiste.", "varianten": [ "Leiste wächst zum Sheet (Expanding Bottom Navigation, Osmo-Ressource)", "Schwebende Pille mit Icons und Labels, „Mehr“ öffnet ein Sheet", "Sheet mit Drill-down für Unterebenen", "Mobiles Mega-Menü als Sheet", "Daumen-Knopf (FAB) öffnet ein Aktionsmenü mit Termin, Anrufen, WhatsApp und Anfahrt (Prinzip M3 Expressive FAB menu)", "Kontaktleiste für lokale Betriebe: Anrufen mit sichtbarer Nummer, WhatsApp oder Termin, Anfrage; weicht Consent-Banner, Tastatur und Footer" ], "umsetzung": "Leiste mit position: fixed; bottom: calc(12px + env(safe-area-inset-bottom)) und viewport-fit=cover im Viewport-Meta. Das Sheet liegt in Zielgröße bereit, clip-path zeigt im Ruhezustand nur die Leiste: inset(calc(100% - 56px) 14px 0 14px round 28px) → inset(0 round 28px). Alternativ GSAP Flip. Wischen mit Pointer Events (pointerdown/move/up) und setPointerCapture, Schwelle 80 px oder 0,5 px/ms; touch-action: none nur auf dem Griff. Beim Loslassen Inline-Transition und -Transform im selben Schritt entfernen, dann läuft der Übergang vom aktuellen Wischweg aus. Hintergrund sperren (overflow: hidden am Root, inert auf dem Inhalt), im Sheet overscroll-behavior: contain. Höhen in svh/dvh, weil die iOS-Adressleiste die Viewporthöhe ändert.", "mobil": "Ist die Mobile-Lösung. Auf dem Desktop als obere Navigation ausgeben, etwa als Pill-Navigation oder in den Ecken.", "reduzierte_bewegung": "Kein Morph: Die Leiste bleibt stehen, das Sheet blendet in 150 ms an seiner Zielposition ein. Keine Staffelung der Links.", "barrierefreiheit": "Wischen ist nur eine Zusatzgeste, ein sichtbarer Schließen-Knopf ist Pflicht. Der Knopf trägt aria-expanded und aria-controls. Im offenen Sheet bleibt der Fokus gefangen, Esc schließt und gibt den Fokus an den Knopf zurück. Der Seiteninhalt ist solange inert. Links stehen in einem