Glowup
NAVIGATION · 74 / 89
TopAppBar
TopAppBar — a Material You navigation component for React Native and web.
󱀫
packages/ui/src/components/TopAppBar.tsx
Live demo

Orders

Properties
4 controls
Title
Subtitle
Variant
Small
󰍝
Elevated (scrolled)
Usage
TopAppBar.tsx
<TopAppBar title="Orders" />
Variants
The states and shapes this component is meant to be used in.
Small

Orders

Center-aligned

Orders

Medium

Orders

12 open
Large, scrolled

Orders

API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
10 on TopAppBarProps
Filter props
󰍉
title
required
React.ReactNode
actions
React.ReactNode
After the title: up to three action `IconButton`s per M3.
divider
boolean
default: false
A hairline under the bar.
elevated
boolean
default: false
The on-scroll state: `surfaceContainer` instead of `surface`.
leading
React.ReactNode
Before the title: typically a back or menu `IconButton`.
safeArea
boolean
default: true
Pads the top safe-area inset. Defaults to `true`.
style
StyleProp<ViewStyle>
subtitle
string
A second line under the title.
testID
string
variant
"small" | "center" | "medium" | "large"
default: "small"
`"small"` and `"center"` keep the title in the 64dp row; `"medium"` and `"large"` move it to a second, larger line. Defaults to `"small"`.