# 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

```kotlin
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.

## Related components

- [Top app bar](https://m3e.ljzapps.app/docs/components/top-app-bar.md)
- [Button group](https://m3e.ljzapps.app/docs/components/button-group.md)
- [Bottom app bar](https://m3e.ljzapps.app/docs/components/bottom-app-bar.md)