Navigation

AppBar

Sticky chrome that stays transparent until you scroll, with an optional collapsing large title.

AppBar

import { AppBar } from '@anomalia/ui';

Notes

The compact title only fades in once the large one is mostly gone — a crossfade at 50% shows both at once.
Scroll is read with a passive listener and safe-area insets are respected for PWAs.

Scroll the box below: the bar frosts over as soon as content passes under it, and the large title collapses into the compact one.

Content

Prop	Type	Default	Description
`title`	`string`	—	Compact (and large) title text.
`largeTitle`	`boolean`	`false`	Collapsing iOS-style large title.
`glass`	`boolean`	`true`	Frosted background once scrolled.
`scrollElement`	`HTMLElement \| null`	—	Scroll container to watch (defaults to window).

Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.