{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

NavigationBarKt

public final class NavigationBarKt


Summary

Public methods

static final void
@Composable
NavigationBar(
    @NonNull Modifier modifier,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @NonNull Dp tonalElevation,
    @NonNull WindowInsets windowInsets,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content
)

Material Design bottom navigation bar.

static final void
@Composable
NavigationBarItem(
    @NonNull RowScope receiver,
    boolean selected,
    @NonNull Function0<Unit> onClick,
    @Composable @NonNull Function0<Unit> icon,
    @NonNull Modifier modifier,
    boolean enabled,
    @Composable Function0<Unit> label,
    boolean alwaysShowLabel,
    @NonNull NavigationBarItemColors colors,
    @NonNull MutableInteractionSource interactionSource
)

Material Design navigation bar item.

Public methods

@Composable
public static final void NavigationBar(
    @NonNull Modifier modifier,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @NonNull Dp tonalElevation,
    @NonNull WindowInsets windowInsets,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content
)

Material Design bottom navigation bar.

Navigation bars offer a persistent and convenient way to switch between primary destinations in an app.

Navigation bar image

NavigationBar should contain three to five NavigationBarItems, each representing a singular destination.

A simple example looks like:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember

var selectedItem by remember { mutableIntStateOf(0) }
val items = listOf("Songs", "Artists", "Playlists")

NavigationBar {
    items.forEachIndexed { index, item ->
        NavigationBarItem(
            icon = { Icon(Icons.Filled.Favorite, contentDescription = item) },
            label = { Text(item) },
            selected = selectedItem == index,
            onClick = { selectedItem = index }
        )
    }
}

See NavigationBarItem for configuration specific to each item, and not the overall NavigationBar component.

Parameters
@NonNull Modifier modifier

the Modifier to be applied to this navigation bar

@NonNull Color containerColor

the color used for the background of this navigation bar. Use Color.Transparent to have no color.

@NonNull Color contentColor

the preferred color for content inside this navigation bar. Defaults to either the matching content color for containerColor, or to the current LocalContentColor if containerColor is not a color from the theme.

@NonNull Dp tonalElevation

when containerColor is ColorScheme.surface, a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: Surface.

@NonNull WindowInsets windowInsets

a window insets of the navigation bar.

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content

the content of this navigation bar, typically 3-5 NavigationBarItems

NavigationBarItem

@Composable
public static final void NavigationBarItem(
    @NonNull RowScope receiver,
    boolean selected,
    @NonNull Function0<Unit> onClick,
    @Composable @NonNull Function0<Unit> icon,
    @NonNull Modifier modifier,
    boolean enabled,
    @Composable Function0<Unit> label,
    boolean alwaysShowLabel,
    @NonNull NavigationBarItemColors colors,
    @NonNull MutableInteractionSource interactionSource
)

Material Design navigation bar item.

Navigation bars offer a persistent and convenient way to switch between primary destinations in an app.

The recommended configuration for a NavigationBarItem depends on how many items there are inside a NavigationBar:

A NavigationBarItem always shows text labels (if it exists) when selected. Showing text labels if not selected is controlled by alwaysShowLabel.

Parameters
boolean selected

whether this item is selected

@NonNull Function0<Unit> onClick

called when this item is clicked

@Composable @NonNull Function0<Unit> icon

icon for this item, typically an Icon

@NonNull Modifier modifier

the Modifier to be applied to this item

boolean enabled

controls the enabled state of this item. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

@Composable Function0<Unit> label

optional text label for this item

boolean alwaysShowLabel

whether to always show the label for this item. If false, the label will only be shown when this item is selected.

@NonNull NavigationBarItemColors colors

NavigationBarItemColors that will be used to resolve the colors used for this item in different states. See NavigationBarItemDefaults.colors.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this item. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this item in different states.