AppBar
Top app bars for navigation and actions
npx rootnative add appbar
With Subtitle
One line under the title. Medium and large bars grow to hold it.
Small
Small App Bar
Supporting text
Center Aligned
Centered App Bar
Supporting text
Medium
Medium App Bar
Supporting text
Large
Large App Bar
Supporting text
Close Button
navigationIcon="close" for a modal. The second bar passes an IconButton to leading and trailing; both sit on the title line.
Collapse on Scroll
Medium and large bars collapse to the small form as the content scrolls, driven by `scrollOffset` from inertia's useScroll().
Medium
Scroll content row 1
Scroll content row 2
Scroll content row 3
Scroll content row 4
Scroll content row 5
Scroll content row 6
Scroll content row 7
Scroll content row 8
Scroll content row 9
Scroll content row 10
Scroll content row 11
Scroll content row 12
Scroll content row 13
Scroll content row 14
Scroll content row 15
Scroll content row 16
Large
Scroll content row 1
Scroll content row 2
Scroll content row 3
Scroll content row 4
Scroll content row 5
Scroll content row 6
Scroll content row 7
Scroll content row 8
Scroll content row 9
Scroll content row 10
Scroll content row 11
Scroll content row 12
Scroll content row 13
Scroll content row 14
Scroll content row 15
Scroll content row 16
Medium with subtitle
Medium App Bar
Supporting text
Scroll content row 1
Scroll content row 2
Scroll content row 3
Scroll content row 4
Scroll content row 5
Scroll content row 6
Scroll content row 7
Scroll content row 8
Scroll content row 9
Scroll content row 10
Scroll content row 11
Scroll content row 12
Scroll content row 13
Scroll content row 14
Scroll content row 15
Scroll content row 16
Large with subtitle
Large App Bar
Supporting text
Scroll content row 1
Scroll content row 2
Scroll content row 3
Scroll content row 4
Scroll content row 5
Scroll content row 6
Scroll content row 7
Scroll content row 8
Scroll content row 9
Scroll content row 10
Scroll content row 11
Scroll content row 12
Scroll content row 13
Scroll content row 14
Scroll content row 15
Scroll content row 16
Color Schemes
Surface Container Highest
Surface Container Highest
Custom Title Style
titleStyle merges over the variant's type scale — the back button and actions are unaffected.
Long Title
Small
Very Long App Bar Title That Should Truncate Properly
Center Aligned
Very Long App Bar Title That Should Truncate Properly
Medium
Very Long App Bar Title That Should Truncate Properly
Large
Very Long App Bar Title That Should Truncate Properly