The header of a mobile screen
A leading menu, back or close button, the screen title with an optional subtitle, and up to three trailing icon actions, with any more listed behind a More button. The bar sticks to the top of its scroll container and watches the window’s scroll, or the element passed as scrollTarget, or takes a scrolled prop from the host, so it can switch to its scrolled surface as content passes under it.
Platforms
The platform prop draws the same bar three ways. Default is the Rift bar, built from the system’s tokens. The ios variant matches the iOS 26 navigation bar, with a glass circle for the leading control and one glass capsule for the trailing actions; the android variant matches the Material 3 Expressive top app bar. The platform variants are for mocks and prototypes that should read as the real system chrome, and a shipped native app should use the native component. Scroll a stage to see each bar’s scrolled state.
Collapsing titles
Medium and large sizes add an expanded title under the bar that folds away as content scrolls under it, while the bar’s own title fades in. Only one of the two copies is the heading at any moment. On iOS both sizes are the large title, which collapses to the centred inline title. Scroll inside each stage to collapse it, and back to the top to open it again. The iOS scroll edge blurs on the web rather than refracting: Apple’s lensing needs shader access to the content behind it, which no browser gives a stylesheet.
Actions and overflow
The bar shows up to three trailing actions and lists the rest in a menu behind a More button. An action’s badge is a dot, announced to screen readers as new. The close control suits a screen that dismisses rather than going back, such as a compose sheet.
// From the npm package
import { TopAppBar } from 'rift-ds/components/TopAppBar/TopAppBar';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/top-app-bar.json