BubbleTabBar

Navigation

Mobile Bottom-Navigation im App-Stil: Das aktive Icon hebt sich in einer kreisrunden Bubble aus der Leiste, die mit Overshoot-Federung zur neuen Position springt. Ein Ring in Seitenfarbe erzeugt die Aussparungs-Illusion.

Live Demo

App-Inhalt — Tabs unten antippen

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`tabs`	`BubbleTab[]`	Ja	—	Tabs {icon, label, href?} (3–5 empfohlen)
`activeIndex`	`number`	Nein	—	Aktiver Index (kontrolliert)
`defaultIndex`	`number`	Nein	`0`	Initial aktiver Index
`onChange`	`(index) => void`	Nein	—	Callback bei Tab-Wechsel
`backgroundColor`	`string`	Nein	`'#101521'`	Farbe der Leiste
`accentColor`	`string`	Nein	`'#22d3ee'`	Farbe der Bubble
`surfaceColor`	`string`	Nein	`'#f8fafc'`	Seitenfarbe (für den Aussparungs-Ring)
`fixed`	`boolean`	Nein	`false`	Fixiert am unteren Bildschirmrand
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse

Code-Beispiel

<BubbleTabBar
  fixed
  surfaceColor="#f8fafc"
  tabs={[
    { icon: '🏠', label: 'Start' },
    { icon: '🍕', label: 'Karte' },
    { icon: '🗓️', label: 'Reservieren' },
    { icon: '📞', label: 'Kontakt' },
  ]}
  onChange={(i)=> console.log('Tab', i)}
/>