# Scaffold

> The basic screen layout: top bar, bottom bar, FAB, snackbars and content.

- Category: Layout and structure
- API status: Expressive
- Compose APIs: `Scaffold`, `FabPosition`, `ScaffoldDefaults`
- Interactive page: https://m3e.ljzapps.app/#components/scaffold

## When to use

Scaffold places the app bars, the FAB and the snackbar host around your content and reports the padding the content needs. Always apply that padding, otherwise content hides behind the bars.

For screens that adapt to the window size, combine it with the adaptive scaffolds and a navigation rail.

## Playground

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

## Examples

### Top bar and FAB

```kotlin
Scaffold(
    modifier = Modifier.fillMaxWidth().height(320.dp),
    topBar = { CenterAlignedTopAppBar(title = { Text("Library") }) },
    floatingActionButton = {
        FloatingActionButton(onClick = {}) { Icon(Icons.Rounded.Add, contentDescription = "Add") }
    },
) { padding ->
    LazyColumn(contentPadding = padding) {
        items((1..20).toList()) { ListItem(headlineContent = { Text("Item $it") }) }
    }
}
```

## Parameters

| Name | Type | Default | Description |
|---|---|---|---|
| `topBar / bottomBar` | `@Composable () -> Unit` | `{}` | App bar slots. |
| `floatingActionButton` | `@Composable () -> Unit` | `{}` | The FAB slot. |
| `floatingActionButtonPosition` | `FabPosition` | `FabPosition.End` | Start, End, Center or EndOverlay. |
| `snackbarHost` | `@Composable () -> Unit` | `{}` | Where snackbars appear. |
| `content` | `@Composable (PaddingValues) -> Unit` |  | Receives the inner padding. |

## Guidelines

Do:
- Apply the content padding.
- Hoist snackbar state outside the scaffold.

Don't:
- Do not nest scaffolds.
- Do not put the FAB into the bottom bar slot.

## Accessibility

- The landmark order is top bar, content, bottom bar. Keep it so keyboard focus follows the visual order.

## Related components

- [Top app bar](https://m3e.ljzapps.app/docs/components/top-app-bar.md)
- [Bottom app bar](https://m3e.ljzapps.app/docs/components/bottom-app-bar.md)
- [Snackbar](https://m3e.ljzapps.app/docs/components/snackbar.md)
- [List-detail layout](https://m3e.ljzapps.app/docs/components/list-detail.md)