Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProThe top bar of a screen with leading and trailing actions and an optional large title that collapses into the bar as the content scrolls.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it as the header of a phone screen: a title, a back or menu button and one to three actions. Use large for top-level screens with a scrolling list.
Do not use it as a site header with a nav menu (use a navbar) or for dialogs. Do not put more than three trailing actions in it.
| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
AppBar | title | ReactNode | required | The screen title (the h1). |
AppBar | large | boolean | false | Large title that collapses on scroll. |
AppBar | centered | boolean | false | Centre the compact title. |
AppBar | scrollRef | RefObject<HTMLElement> | window | The element that scrolls under the bar. |
AppBar | leading / trailing | ReactNode | - | Actions at the start and end. |
AppBar | collapseDistance | number | 48 | Scroll in px over which the large title collapses. |
The component ships with a Testing Library test (app-bar.test.tsx). jsdom has no touch or layout, so the test drives the component through its keyboard and pointer-free paths and checks roles, names and state.