The tab bar of a mobile app
Three to five top-level destinations along the bottom of the screen, each an icon over a label, with the selected icon drawn filled. Pressing a destination reports its key through onValueChange, and the host marks the current page with activeKey; a destination with an href renders as a real link. Inside these demos the bar sits in its stage; in an app, the fixed prop pins it to the bottom of the viewport above the home-indicator area.
Platforms
The platform prop draws the same markup three ways. Default is the Rift bar, built entirely from the system’s tokens. The ios and android variants are close matches for the iOS 26 Liquid Glass tab bar and the Material 3 Expressive navigation bar, for mocks and prototypes that should read as the real system chrome. A shipped native app should use the native component instead. Every bar here is live: press a destination to move the selection.
iOS search and minimising
On iOS a search destination gets its own glass circle beside the capsule; on the other platforms it joins the bar as the last tab. The minimized prop folds the capsule down to the selected destination alone, which is what the system bar does while a page scrolls down. The component leaves the scroll logic to the host, so the second demo sets the prop from the stage’s scroll direction. The glass on the web is frosted rather than refracted: Apple’s lensing needs shader access to the content behind it, which no browser gives a stylesheet.
Badges
A badge is a count on the icon’s top corner, or a plain dot when set to true. Screen readers hear the count as part of the destination’s name. The smallest set a tab bar should carry is three destinations, shown here with a search tab joining the bar.
// From the npm package
import { BottomNav } from 'rift-ds/components/BottomNav/BottomNav';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/bottom-nav.json