App bar row

A row of actions that moves what does not fit into an overflow menu.

Category: Layout and structure
API status: Expressive
Compose APIs: AppBarRow, AppBarColumn, AppBarOverflowIndicator
Interactive page: https://m3e.ljzapps.app/#components/app-bar-row

When to use

App bar row is the layout behind app bar actions. Declare each action once with a label and an icon. When space runs out the remaining actions become menu items with the same label.

Use AppBarColumn for the same behavior in a vertical bar.

Playground

The interactive page has a playground with live property controls for this component and generated code.

Examples

Custom overflow indicator

AppBarRow(
    modifier = Modifier.width(240.dp),
    overflowIndicator = { menuState ->
        IconButton(onClick = { if (menuState.isShowing) menuState.dismiss() else menuState.show() }) {
            Icon(Icons.Rounded.MoreHoriz, contentDescription = "More actions")
        }
    },
) {
    clickableItem(onClick = {}, icon = { Icon(Icons.Rounded.Edit, contentDescription = null) }, label = "Edit")
    clickableItem(onClick = {}, icon = { Icon(Icons.Rounded.Share, contentDescription = null) }, label = "Share")
    clickableItem(onClick = {}, icon = { Icon(Icons.Rounded.Delete, contentDescription = null) }, label = "Delete")
}

Parameters

Name	Type	Default	Description
`overflowIndicator`	`@Composable (AppBarMenuState) -> Unit`	`AppBarOverflowIndicator`	Shown when items overflow.
`maxItemCount`	`Int`	`Int.MAX_VALUE`	Upper limit of visible actions.
`content`	`AppBarRowScope.() -> Unit`		clickableItem, toggleableItem and customItem.

Guidelines

Do:

Order actions by importance.
Keep labels short.

Don't:

Do not hide the most important action in the overflow.
Do not repeat actions in both places.

Accessibility

The label is the menu text and the accessible name of the icon. Always set it.