VerticalFloatingToolbar
Android
```kotlin
@ExperimentalMaterial3ExpressiveApi
@ExperimentalMaterial3XrApi
@Composable
public fun VerticalFloatingToolbar(
expanded: Boolean,
modifier: Modifier = Modifier,
colors: FloatingToolbarColors = FloatingToolbarDefaults.standardFloatingToolbarColors(),
contentPadding: PaddingValues = FloatingToolbarDefaults.ContentPadding,
scrollBehavior: FloatingToolbarScrollBehavior? = null,
leadingContent: @Composable (ColumnScope.() -> Unit)? = null,
trailingContent: @Composable (ColumnScope.() -> Unit)? = null,
content: @Composable ColumnScope.() -> Unit,
)
```
#### Parameters
| | |
| --- | --- |
| expanded | whether the FloatingToolbar is in expanded mode, i.e. showing `leadingContent` and `trailingContent`. Note that the toolbar will stay expanded in case a touch exploration service (e.g., TalkBack) is active. |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this FloatingToolbar. |
| colors | the colors used for this floating toolbar. There are two predefined [FloatingToolbarColors](/jetpack-compose/androidx.compose.material3/material3/classes/FloatingToolbarColors) at [FloatingToolbarDefaults.standardFloatingToolbarColors](/jetpack-compose/androidx.compose.material3/material3/objects/FloatingToolbarDefaults) and [FloatingToolbarDefaults.vibrantFloatingToolbarColors](/jetpack-compose/androidx.compose.material3/material3/objects/FloatingToolbarDefaults) which you can use or modify. |
| contentPadding | the padding applied to the content of this FloatingToolbar. |
| scrollBehavior | a [FloatingToolbarScrollBehavior](/jetpack-compose/androidx.compose.material3/material3/interfaces/FloatingToolbarScrollBehavior). If null, this FloatingToolbar will not automatically react to scrolling. Note that the toolbar will not react to scrolling in case a touch exploration service (e.g., TalkBack) is active. |
| leadingContent | the leading content of this FloatingToolbar. The default layout here is a [Column](/jetpack-compose/androidx.compose.foundation/foundation-layout/composable-functions/Column), so content inside will be placed vertically. Only showing if `expanded` is true. |
| trailingContent | the trailing content of this FloatingToolbar. The default layout here is a [Column](/jetpack-compose/androidx.compose.foundation/foundation-layout/composable-functions/Column), so content inside will be placed vertically. Only showing if `expanded` is true. |
| content | the main content of this FloatingToolbar. The default layout here is a [Column](/jetpack-compose/androidx.compose.foundation/foundation-layout/composable-functions/Column), so content inside will be placed vertically. |
VerticalFloatingToolbar
Android
```kotlin
@ExperimentalMaterial3ExpressiveApi
@ExperimentalMaterial3XrApi
@Composable
public fun VerticalFloatingToolbar(
expanded: Boolean,
floatingActionButton: @Composable () -> Unit,
modifier: Modifier = Modifier,
colors: FloatingToolbarColors = FloatingToolbarDefaults.standardFloatingToolbarColors(),
contentPadding: PaddingValues = FloatingToolbarDefaults.ContentPadding,
scrollBehavior: FloatingToolbarScrollBehavior? = null,
shape: Shape = FloatingToolbarDefaults.ContainerShape,
floatingActionButtonPosition: FloatingToolbarVerticalFabPosition =
FloatingToolbarVerticalFabPosition.Bottom,
content: @Composable ColumnScope.() -> Unit,
)
```
#### Parameters
| | |
| --- | --- |
| expanded | whether the floating toolbar is expanded or not. In its expanded state, the FAB and the toolbar content are organized vertically. Otherwise, only the FAB is visible. Note that the toolbar will stay expanded in case a touch exploration service (e.g., TalkBack) is active. |
| floatingActionButton | a floating action button to be displayed by the toolbar. It's recommended to use a `FloatingToolbarDefaults.VibrantFloatingActionButton` or `FloatingToolbarDefaults.StandardFloatingActionButton` that is styled to match the [colors](/jetpack-compose/androidx.compose.material/material/classes/Colors). Note that the provided FAB's size is controlled by the floating toolbar and animates according to its state. In case a custom FAB is provided, make sure it's set with a [Modifier.fillMaxSize](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be sized correctly. |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this floating toolbar. |
| colors | the colors used for this floating toolbar. There are two predefined [FloatingToolbarColors](/jetpack-compose/androidx.compose.material3/material3/classes/FloatingToolbarColors) at [FloatingToolbarDefaults.standardFloatingToolbarColors](/jetpack-compose/androidx.compose.material3/material3/objects/FloatingToolbarDefaults) and [FloatingToolbarDefaults.vibrantFloatingToolbarColors](/jetpack-compose/androidx.compose.material3/material3/objects/FloatingToolbarDefaults) which you can use or modify. See also [floatingActionButton](/jetpack-compose/androidx.compose.material/material/components/FloatingActionButton) for more information on the right FAB to use for proper styling. |
| contentPadding | the padding applied to the content of this floating toolbar. |
| scrollBehavior | a [FloatingToolbarScrollBehavior](/jetpack-compose/androidx.compose.material3/material3/interfaces/FloatingToolbarScrollBehavior). If provided, this FloatingToolbar will automatically react to scrolling. |
| shape | the shape used for this floating toolbar content. |
| floatingActionButtonPosition | the position of the floating toolbar's floating action button. By default, the FAB is placed at the bottom of the toolbar (i.e. aligned to the bottom). |
| content | the main content of this floating toolbar. The default layout here is a [Column](/jetpack-compose/androidx.compose.foundation/foundation-layout/composable-functions/Column), so content inside will be placed vertically. |