Small and center-aligned bars with navigation and actions
Top app bars display a screen title plus a leading navigation icon and trailing action icons. Material 3 ships small, center-aligned, medium, and large variants; the small and center-aligned forms are shown here.
A title aligned to the start, with navigation and action icons.
TopAppBar(
title = { Text("Inbox") },
navigationIcon = {
IconButton(onClick = {}) { Icon(Icons.Filled.Menu, "Open menu") }
},
actions = {
IconButton(onClick = {}) { Icon(Icons.Filled.Search, "Search") }
IconButton(onClick = {}) { Icon(Icons.Filled.MoreVert, "More") }
}
)The title is centered, ideal for top-level screens.
CenterAlignedTopAppBar(
title = { Text("Home") },
navigationIcon = {
IconButton(onClick = {}) { Icon(Icons.AutoMirrored.Filled.ArrowBack, "Back") }
},
actions = {
IconButton(onClick = {}) { Icon(Icons.Filled.Settings, "Settings") }
}
)