JetpackTopAppBar

fun JetpackTopAppBar(@StringRes titleRes: Int, navigationIcon: ImageVector, navigationIconContentDescription: String?, actionIcon: ImageVector, actionIconContentDescription: String?, modifier: Modifier = Modifier, colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(), onNavigationClick: () -> Unit = {}, onActionClick: () -> Unit = {})

A Jetpack Compose top app bar with a title, navigation icon, and action icon.

Center-aligned top app bar with navigation and action icons. Use for screens that need both back navigation and a primary action.

Usage Example:

JetpackTopAppBar(
titleRes = R.string.edit_profile,
navigationIcon = Icons.AutoMirrored.Filled.ArrowBack,
navigationIconContentDescription = "Navigate back",
actionIcon = Icons.Default.Save,
actionIconContentDescription = "Save changes",
onNavigationClick = { navController.navigateUp() },
onActionClick = { viewModel.saveProfile() }
)

Parameters

titleRes

The string resource ID for the title of the top app bar.

navigationIcon

The navigation icon to be displayed on the top app bar.

navigationIconContentDescription

The content description for the navigation icon.

actionIcon

The action icon to be displayed on the top app bar.

actionIconContentDescription

The content description for the action icon.

modifier

The modifier for this top app bar.

colors

The colors for this top app bar.

onNavigationClick

The callback when the navigation icon is clicked.

onActionClick

The callback when the action icon is clicked.


fun JetpackTopAppBar(@StringRes titleRes: Int, actionIcon: ImageVector, actionIconContentDescription: String?, modifier: Modifier = Modifier, colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(), onActionClick: () -> Unit = {})

A Jetpack Compose top app bar with a title and action icon.

Center-aligned top app bar with only an action icon (no navigation icon). Use for top-level screens where back navigation isn't needed.

Usage Example:

JetpackTopAppBar(
titleRes = R.string.settings,
actionIcon = Icons.Default.Info,
actionIconContentDescription = "About",
onActionClick = { navController.navigate(About) }
)

Parameters

titleRes

The string resource ID for the title of the top app bar.

actionIcon

The action icon to be displayed on the top app bar.

actionIconContentDescription

The content description for the action icon.

modifier

The modifier for this top app bar.

colors

The colors for this top app bar.

onActionClick

The callback when the action icon is clicked.