Floating Tab Bar

Floating glass tab bar. Pro · Effects › Glass

An iOS 26 floating Liquid Glass tab bar with a selection indicator that stretches like a drop of liquid as it slides between tabs, an optional accessory button, and a compact mode while content scrolls. Accessibility pattern: a <nav> landmark of links/buttons with aria-current="page", not an ARIA tablist. A tab bar switches between top-level destinations that own their own content, scroll position and history; the tabs pattern (tablist + tabpanel) is for panels within one page. Items are reached with Tab like any navigation.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add floating-tab-bar

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { FloatingTabBar } from 'valyro-ui-pro';

Props

Prop	Type	Default
`items` *	`FloatingTabBarItem[]`		Tabs in order, each an icon over a label; without a value the first enabled one is current.
`value`	`string`		Controlled `value`; use with `onValueChange`.
`defaultValue`	`string`		Initial `value` when uncontrolled.
`onValueChange`	`(value: string) => void`		Called with the new `value` when it changes.
`accessory`	`FloatingTabBarAccessory`		A separate circular button beside the bar, such as Search.
`scrollContainer`	`RefObject<HTMLElement \| null> \| 'window'`		Scrolling this container (or the window) down minimizes the bar to a compact pill; scrolling up, reaching the top or focusing the bar with the keyboard expands it.
`minimized`	`boolean`		Controlled `minimized`; use with `onMinimizedChange`.
`defaultMinimized`	`boolean`	`false`	Initial `minimized` when uncontrolled.
`onMinimizedChange`	`(minimized: boolean) => void`		Called with the new `minimized` when it changes.
`position`	`'fixed' \| 'absolute' \| 'static'`	`'fixed'`	`fixed` floats over the viewport, `absolute` over the nearest positioned ancestor; both keep clear of safe-area insets.
`labels`	`Partial<FloatingTabBarLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Glass Lens — Glass lens with real refraction
Morphing Capsule — Capsule that flows between states
Aurora Background — Slow aurora behind your content
Gradient Background — Slowly shifting gradient
Bubble Background — Soft colored bubbles, one follows the cursor
Stars Background — Starry sky with cursor parallax
Hexagon Background — Hexagon grid with a glowing trail
Hole Background — Portal tunnel with rings and particles
Fireworks Background — Fireworks for wins and achievements, launch on click
Spotlight — Stage beams and a cursor spotlight
Meteors — Falling meteors
Background Pattern — Fading dot, grid and line backgrounds

Previous: Morphing Capsule · Next: Aurora Background · All Effects