React Bottom Navigation Bar: Safe Areas und Badges

Eine React Bottom Navigation Bar ist die Tab-Leiste, an die uns native Apps gewöhnt haben: drei bis fünf Ziele am unteren Rand, genau dort, wo der Daumen ohnehin ist. Im Web reicht dafür kein fixiertes <div> mit Icons. Die Leiste muss Abstand zum Home-Indikator des iPhones halten, die letzte Zeile der Seite sichtbar lassen, einem Screenreader sagen, dass im Posteingang 4 ungelesene Nachrichten liegen, dem Router folgen und klären, was ein großer Button in der Mitte und ein langer Scroll tun sollen. Dieser Guide geht jeden Punkt mit der Bottom Tab Bar von Wingo UI durch und zeigt dann, wann eine Sidebar die bessere Wahl ist.

Wann braucht eine Web-App eine Bottom Navigation Bar?

Wenn Leute sie auf dem Smartphone nutzen und pro Sitzung oft zwischen drei und fünf Hauptbereichen wechseln. Die Android-Richtlinien zur Navigation Bar (opens in a new tab) nennen die Bedingungen: drei bis fünf gleich wichtige Ziele, kompakte Fenstergrößen und dieselben Ziele auf allen Screens der App. Ein CRM mit Start, Kunden, Posteingang und Profil passt. Eine Marketing-Website, eine Doku-Seite oder ein Checkout passt nicht, weil dort niemand zwischen den Bereichen hin und her springt.

Der untere Rand ist der Grund für den Aufwand. In Steven Hoobers Feldstudie von 2013 (opens in a new tab) (1.333 Beobachtungen von Menschen an mobilen Geräten) hielten 49 % derjenigen, die den Bildschirm berührten, das Smartphone in einer Hand. Ein Hamburger-Menü oben in der Ecke liegt weit weg von diesem Daumen und versteckt jedes Ziel hinter einem zusätzlichen Tipp. In einer Web-App mit Bottom Tab Bar bleibt jedes Ziel sichtbar und einen Tipp entfernt, und der aktive Tab zeigt, wo man gerade ist.

Was braucht eine Bottom Tab Bar im Browser?

Fünf Aufgaben, die eine native Tab Bar von der Plattform geschenkt bekommt und die eine Webseite selbst erledigen muss:

Bau die Tabs aus Links. Das ARIA-Tabs-Pattern (opens in a new tab) beschreibt übereinanderliegende Inhaltsbereiche, die Tab-Panels, von denen immer nur einer sichtbar ist. Eine Tab-Leiste lädt dagegen eine andere Seite, also würde role="tablist" ein Widget ankündigen, das es gar nicht gibt.

Hier ist eine React Mobile Bottom Navigation für den Next.js App Router, verteilt auf zwei Dateien:

// app/(app)/mobile-nav.tsx
"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { House, Inbox, Plus, UserRound, Users } from "lucide-react";
import { BottomTabBar, type BottomTabBarItem } from "@/components/ui/bottom-tab-bar";

const tabs: BottomTabBarItem[] = [
  { label: "Start", href: "/", icon: <House />, activeIcon: <House className="fill-current/20" /> },
  { label: "Kunden", href: "/clients", icon: <Users />, activeIcon: <Users className="fill-current/20" /> },
  { label: "Posteingang", href: "/inbox", icon: <Inbox />, badge: 4 },
  { label: "Profil", href: "/profile", icon: <UserRound />, dot: true },
];

export function MobileNav() {
  return (
    <BottomTabBar
      className="md:hidden"
      items={tabs}
      currentPath={usePathname()}
      linkComponent={Link}
      action={{ label: "Neuer Kunde", icon: <Plus />, href: "/clients/new" }}
    />
  );
}

// app/(app)/layout.tsx
import type { ReactNode } from "react";
import type { Viewport } from "next";
import { MobileNav } from "./mobile-nav";

// ohne cover hält iOS die Seite in der Safe Area, und env() liefert 0
export const viewport: Viewport = { width: "device-width", initialScale: 1, viewportFit: "cover" };

export default function AppLayout({ children }: { children: ReactNode }) {
  return (
    <>
      <main className="pb-(--bottom-bar-offset)">{children}</main>
      <MobileNav />
    </>
  );
}

Die Leiste ist am Viewport fixiert und misst sich selbst, Safe Area eingeschlossen. Das Padding auf <main> stimmt also immer. Auf dem Desktop, wo md:hidden sie ausblendet, misst sie 0. Ein geschätztes pb-16 ist falsch, sobald sich das Inset oder die Größe ändert. Der Guide zu Safe Areas erklärt das CSS dahinter. Render die Leiste im Server-HTML und blende sie per CSS aus. Entscheidest du das mit einem useIsMobile()-Hook, rendert der Server nichts, und die Leiste springt erst nach der Hydration ins Bild, wie der Guide zum useMobile-Hook zeigt.

Wie sollten Badges und Labels in der Tab-Leiste funktionieren?

Eine Zahl für Dinge, die eine Aktion verlangen, ein Punkt für etwas Neues, und beides wird als Teil des Tab-Namens vorgelesen. badge: 4 rendert eine Zahl (über 99 steht 99+), dot: true einen 8px großen Punkt, standardmäßig rot (badgeTone="danger"), weil man eine rote Zahl als ungelesen versteht. Das sichtbare Badge ist aria-hidden, und der Link heißt dann „Posteingang, 4 ungelesen“ (badgeLabel) oder „Profil, neu“ (dotLabel). So liest ein Screenreader nie eine zusammenhanglose Zahl vor. Apples Richtlinien zu Tab Bars (opens in a new tab) (aktualisiert im Juni 2026) raten, Badges für wirklich wichtige Informationen aufzuheben, damit sie ihre Wirkung und Bedeutung nicht verlieren: ungelesene Nachrichten und offene Freigaben, kein neues Feature.

Bleib bei showLabels="always". Dieselben Richtlinien empfehlen Labels an den Tabs, weil sie die Navigation erleichtern, und nach Möglichkeit einzelne Wörter. "active" und "never" gibt es für Consumer-Apps mit vielen Icons. Mit "never" bleiben die Labels für Screenreader im DOM und werden zu title-Tooltips. activeIcon tauscht das Icon aus, solange der Tab aktiv ist, etwa gegen eine gefüllte Version des Outline-Icons. Apple geht noch weiter und empfiehlt auf jedem Tab gefüllte Symbole oder Icons, passend zur Plattform.

Sollte der Button in der Mitte ein Tab, eine Aktion oder ein FAB sein?

Eine Aktion, nie ein Tab, und nur dann, wenn eine einzige Aktion zum Anlegen die App dominiert. Apple ist hier streng: Eine Tab Bar soll der Navigation dienen und keine Aktionen anbieten. Wir liefern den erhöhten Button in der Mitte trotzdem, denn in einer App, die um ein einziges Verb herum gebaut ist (Posten, Verkaufen, Scannen), hat sich dieses Verb den am besten erreichbaren Platz verdient. Die Prop action rendert ihn in der Mitte (bei vier Tabs: zwei, die Aktion, zwei), gefüllt mit dem tone und benannt über sein label. Er bekommt nie die Markierung des aktiven Tabs, damit ihn niemand mit der aktuellen Position verwechselt.

Lässt sich in der App mehreres anlegen, oder folgst du Apples Regel, dann überlass die Leiste der Navigation und nimm einen FAB. Er liest --bottom-bar-offset und schwebt damit 16px über der Tab-Leiste und dem Home-Indikator, ohne das Inset doppelt zu zählen:

import { FileText, UserPlus } from "lucide-react";
import { Fab, type FabAction } from "@/components/ui/fab";

const actions: FabAction[] = [
  { id: "client", label: "Neuer Kunde", icon: <UserPlus />, href: "/clients/new" },
  { id: "invoice", label: "Neue Rechnung", icon: <FileText />, href: "/invoices/new" },
];

export function CreateFab() {
  return <Fab className="md:hidden" label="Hinzufügen" actions={actions} />;
}

Sollte sich eine Bottom Navigation Bar beim Scrollen ausblenden?

Nur in langen Feeds und auf Lese-Screens, und nur, wenn sie genau dann zurückkommt, wenn man sie brauchen könnte. Apple warnt, dass Leute bei ausgeblendeter Tab Bar vergessen können, in welchem Bereich der App sie sind. Die iOS-Richtlinien beschreiben, wie eine Tab Bar mit Zubehör, etwa dem MiniPlayer in der Musik-App, beim Runterscrollen schrumpft. Ein Tipp auf einen Tab oder Scrollen nach oben holt sie zurück.

Wenn du sie ausblendest, zeigt hideOnScroll das Verhalten, das du übernehmen solltest:

• Sie folgt dem Finger. Die Leiste bewegt sich Pixel für Pixel mit dem Scroll, bis sie ihre eigene Höhe plus Safe Area zurückgelegt hat, und rastet auf sichtbar oder ausgeblendet ein, sobald das Scrollen aufhört. Ein Boolean, der je nach Richtung umschaltet, lässt die Leiste schon bei 2px Scroll springen.
• Sie kommt zurück beim Hochscrollen, ganz oben, am Ende des Inhalts und immer dann, wenn der Tastaturfokus in ihr liegt.
• Sie bewegt sich nur per Transform. Der Fortschritt liegt in einem Motion Value, also rendert Scrollen weder die Leiste noch die Seite neu. Eine Version, die im Scroll-Handler setState aufruft, rendert bei jedem Scroll-Event.
• Mit Reduced Motion gleitet die Leiste nicht, sondern wechselt direkt, nachdem eine volle Leistenhöhe gescrollt wurde.

Wann ist eine Sidebar die bessere Wahl?

Wenn es mehr als fünf Hauptziele gibt, wenn sie verschachtelt sind oder wenn die meisten Sitzungen am Laptop stattfinden. Apple schlägt für Apps mit komplexer Informationsstruktur eine Sidebar vor, oder eine Tab Bar, die sich in eine Sidebar verwandelt, und rät von Overflow-Tabs ab. Android empfiehlt die Leiste für kompakte Fenster.

Die meisten Apps brauchen beides. Darum rendert die App Shell ab 768px die Sidebar neben der Seite und darunter dieselbe Sidebar in einem Drawer plus eine Tab-Leiste für die täglichen Ziele:

// app/(app)/layout.tsx mit der App Shell
import type { ReactNode } from "react";
import { AppShell } from "@/components/ui/app-shell";
import { Sidebar } from "@/components/ui/sidebar";
import { Topbar } from "@/components/ui/topbar";
import { nav, tabs } from "./nav";

export default function AppLayout({ children }: { children: ReactNode }) {
  return (
    <AppShell sidebar={<Sidebar groups={nav} filter />} topbar={<Topbar title="Summit CRM" />} tabs={tabs}>
      {children}
    </AppShell>
  );
}

nav enthält jedes Ziel in Gruppen, tabs die vier, die Leute jeden Tag öffnen. Die Shell rendert die Tab-Leiste selbst und liest die Route aus einem LinkProvider (component={Link}, currentPath={usePathname()}), den du einmal in einem Client-Provider setzt. Das Next.js Admin-Dashboard-Tutorial baut diesen Provider und das ganze Layout. Die Admin Shell ergänzt einen Mehr-Tab, der den Drawer öffnet.

Falls du eine shadcn Bottom Navigation gesucht hast: Stand Oktober 2026 enthält die Komponentenliste (opens in a new tab) von shadcn/ui keine, und die Sidebar (opens in a new tab) wird unter 768px zu einem 18rem breiten Sheet, zwei Tipps von jedem Ziel entfernt. Die Bottom Navigation (opens in a new tab) von Material UI ist eine solide React-Komponente für die untere Navigation und die bessere Wahl, wenn deine App schon auf Material UI läuft. Stand Oktober 2026 deckt ihre Doku Labels, feste Positionierung und Router-Links ab und überlässt dir Badges, Safe Areas und das Ausblenden beim Scrollen.

Was macht eine Bottom Navigation Bar in Produktion kaputt?

• Start ist auf jeder Seite aktiv. Ein selbst geschriebenes pathname.startsWith(href) trifft / überall. Die Leiste prüft / nur exakt und nimmt das längste passende href, so bleibt bei /clients/northwind-tech der Tab Kunden aktiv.
• Ein Tipp auf den aktiven Tab tut nichts. Leute erwarten, dass er nach oben scrollt oder zum ersten Screen des Tabs zurückgeht. scrollToTopOnReselect macht beides, und onReselect kann einen Feed neu laden.
• Ein sechster Tab. Bei mehr als fünf Einträgen warnt die Leiste im Development-Modus. Verschieb den Rest in einen Mehr-Tab oder den Drawer.
• Safaris schwebende Toolbar. Seit iOS 26 schwebt Safaris Toolbar im Tab-Layout Compact über dem unteren Teil der Seite, und laut einem Forenbeitrag vom September 2025 (opens in a new tab) rendert Safari fixierte Inhalte nicht unterhalb dieser Bedienelemente. Teste auf einem echten iPhone in den Tab-Layouts Compact, Bottom und Top.
• Zwei Leisten, zwei Insets. Eine Kaufleiste über der Tab-Leiste darf den Home-Indikator nicht noch einmal auffüllen. Der Guide zu Mobile-first React-Komponenten zeigt, wie man die Leisten stapelt.

Was solltest du installieren?

npx wingo-ui@latest add bottom-tab-bar kopiert die Komponente nach components/ui/, zusammen mit dem Badge, den Helfern für Navigation und Motion und den Scroll-Hooks, die sie importiert. Bottom Tab Bar, FAB, Sidebar und App Shell gehören zu Wingo UI Pro, das Badge ist kostenlos. Der Guide zum React Floating Action Button behandelt den FAB, der über der Tab-Leiste sitzt. Weitere Guides wie diesen findest du unter Mobile UI in React.

Häufige Fragen

Wie viele Einträge sollte eine Bottom Navigation Bar haben?

Drei bis fünf. Die Android-Richtlinien nennen drei bis fünf gleich wichtige Ziele, und Apples Richtlinien zur Tab Bar raten von Overflow-Tabs ab. Gibt es mehr Bereiche, kommen die vier meistgenutzten in die Leiste und alle zusammen in einen Drawer oder eine Sidebar.

Hat shadcn/ui eine Bottom Navigation?

Stand Oktober 2026 nicht: Die Komponentenliste enthält weder eine Bottom Navigation noch eine Tab Bar, und die Sidebar wird unter 768px zu einem 18rem breiten Sheet. Die Bottom Tab Bar von Wingo UI, eine Pro-Komponente, installierst du genauso als Quellcode in dein Projekt, mit npx wingo-ui@latest add bottom-tab-bar.

Sollte eine Bottom Navigation Bar role="tablist" verwenden?

Nein. Das ARIA-Tabs-Pattern ist für Panels gedacht, die innerhalb einer Seite wechseln. Eine Leiste, die die Seite wechselt, ist Navigation: ein nav-Element mit Links und aria-current="page" am aktiven Link.

Sollte sich eine Bottom Navigation Bar beim Scrollen ausblenden?

Nur in langen Feeds und auf Lese-Screens, denn eine ausgeblendete Leiste verbirgt auch, wo man sich in der App befindet. Wenn sie sich ausblendet, sollte sie dem Finger folgen, sich nur per Transform bewegen und zurückkommen: beim Hochscrollen, ganz oben, am Ende der Seite und solange der Tastaturfokus in ihr liegt.

Ist die Bottom Tab Bar von Wingo UI kostenlos?

Nein. Die Bottom Tab Bar von Wingo UI ist eine Pro-Komponente, genau wie FAB, Sidebar und App Shell. Das Badge, das sie für Zahlen nutzt, ist kostenlos.