AppBar

AppBar is the bar at the top of a screen or a Window, with a title, an optional leading control and actions at the end.

Usage

Call Components.AppBar with a scope and a table of properties:

C.AppBar(scope, {
    Title = "Library",
    Leading = C.IconButton(scope, { Name = "menu", OnClick = openDrawer }),
    Actions = { C.IconButton(scope, { Name = "search" }) },
    FadeAtTop = true, -- (1)!
    ScrollOffset = scrollY,
})

1. With FadeAtTop the bar is flat at the top of the content, with no divider or shadow, and becomes raised as ScrollOffset grows.

Properties

Name	Type	Required	Default	Description
Radius	any		{ Metrics.RadiusPanel, 0 }	Corner radius, as a number or a table with one radius per corner. The default rounds the top corners.
Theme	ThemeRef		The contextual theme	Theme to use for this component instead of the one from Theme.Provide.
LayoutOrder	UsedAs<number>		0	Position in a parent UIListLayout or UIGridLayout.
Size	UsedAs<UDim2>		UDim2.new(1, 0, 0, Metrics.AppBarHeight)	Size of the component.
ZIndex	UsedAs<number>		10	Z index of the component.
Title	UsedAs<string>		-	Text shown in the bar.
Leading	Instance		-	Control at the start of the bar, such as a menu button.
Actions	{ Instance }		-	Controls at the end of the bar, laid out in a row.
FadeAtTop	boolean		-	Start flat and become raised as the content scrolls under the bar.
ScrollOffset	UsedAs<number>		-	Scroll position of the content in pixels, as a number or a state. It drives FadeAtTop.
FadeRamp	number		24	Scroll distance in pixels over which the bar goes from flat to raised.
FadeTo	Color3		Colors.SurfaceContainerHigh	Fill of the flat bar. Match the content or window fill.
RaisedColor	Color3		Colors.Surface	Fill of the raised bar.
Shadow	boolean		true	Set false to remove the shadow.

See also

• Window
• NavigationRail