State of Compose 2023 results are in! Click here to learn more

← Back to Material Compose

BottomDrawerLayout

Component
in
Material
. Since 0.1.0-dev15

Overview

Code Examples

Navigation drawers provide access to destinations in your app.

Bottom navigation drawers are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.

These drawers open upon tapping the navigation menu icon in the bottom app bar. They are only for use on mobile.

See ModalDrawerLayout for a layout that introduces a classic from-the-side drawer.

Overloads

BottomDrawerLayout

@Composable
@ExperimentalMaterialApi
fun BottomDrawerLayout(
    drawerContent: @Composable ColumnScope.() -> Unit,
    modifier: Modifier = Modifier,
    drawerState: BottomDrawerState = rememberBottomDrawerState(BottomDrawerValue.Closed),
    gesturesEnabled: Boolean = true,
    drawerShape: Shape = MaterialTheme.shapes.large,
    drawerElevation: Dp = DrawerDefaults.Elevation,
    drawerBackgroundColor: Color = MaterialTheme.colors.surface,
    drawerContentColor: Color = contentColorFor(drawerBackgroundColor),
    scrimColor: Color = DrawerDefaults.scrimColor,
    bodyContent: @Composable () -> Unit
)

Parameters

NameDescription
drawerStatestate of the drawer
modifieroptional modifier for the drawer
gesturesEnabledwhether or not drawer can be interacted by gestures
drawerShapeshape of the drawer sheet
drawerElevationdrawer sheet elevation. This controls the size of the shadow below the drawer sheet
drawerContentcomposable that represents content inside the drawer
drawerBackgroundColorbackground color to be used for the drawer sheet
drawerContentColorcolor of the content to use inside the drawer sheet. Defaults to either the matching content color for drawerBackgroundColor, or, if it is not a color from the theme, this will keep the same value set above this Surface.
scrimColorcolor of the scrim that obscures content when the drawer is open
bodyContentcontent of the rest of the UI @throws IllegalStateException when parent has Float.POSITIVE_INFINITY heigh