ShortNavigationBar

Common/AllAndroid/JVM

Functions summary

Unit

@Composable ShortNavigationBar(     modifier: Modifier,     containerColor: Color,     contentColor: Color,     windowInsets: WindowInsets,     arrangement: ShortNavigationBarArrangement,     content: @Composable () -> Unit ) Material Design short navigation bar.

Cmn

Functions

ShortNavigationBar

Cmn

Artifact: androidx.compose.material3:material3

View Source

Added in 1.5.0-alpha16

@Composable
fun ShortNavigationBar(
    modifier: Modifier = Modifier,
    containerColor: Color = ShortNavigationBarDefaults.containerColor,
    contentColor: Color = ShortNavigationBarDefaults.contentColor,
    windowInsets: WindowInsets = ShortNavigationBarDefaults.windowInsets,
    arrangement: ShortNavigationBarArrangement = ShortNavigationBarDefaults.arrangement,
    content: @Composable () -> Unit
): Unit

Material Design short navigation bar.

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

The recommended configuration of the ShortNavigationBar depends on the width size of the screen it's being displayed at:

• In small screens, the ShortNavigationBar should contain three to five ShortNavigationBarItems, each representing a singular destination, and its arrangement should be ShortNavigationBarArrangement.EqualWeight, so that the navigation items are equally distributed on the bar.

• In medium screens, ShortNavigationBar should contain three to six ShortNavigationBarItems, each representing a singular destination, and its arrangement should be ShortNavigationBarArrangement.Centered, so that the navigation items are distributed grouped on the center of the bar.

A simple example of the first configuration looks like this:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Star
import androidx.compose.material.icons.outlined.FavoriteBorder
import androidx.compose.material.icons.outlined.Home
import androidx.compose.material.icons.outlined.StarBorder
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.ShortNavigationBar
import androidx.compose.material3.ShortNavigationBarItem
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")
val selectedIcons = listOf(Icons.Filled.Home, Icons.Filled.Favorite, Icons.Filled.Star)
val unselectedIcons =
    listOf(Icons.Outlined.Home, Icons.Outlined.FavoriteBorder, Icons.Outlined.StarBorder)

ShortNavigationBar {
    items.forEachIndexed { index, item ->
        ShortNavigationBarItem(
            icon = {
                Icon(
                    if (selectedItem == index) selectedIcons[index] else unselectedIcons[index],
                    contentDescription = null,
                )
            },
            label = { Text(item) },
            selected = selectedItem == index,
            onClick = { selectedItem = index },
        )
    }
}

And of the second configuration:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Star
import androidx.compose.material.icons.outlined.FavoriteBorder
import androidx.compose.material.icons.outlined.Home
import androidx.compose.material.icons.outlined.StarBorder
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.NavigationItemIconPosition
import androidx.compose.material3.ShortNavigationBar
import androidx.compose.material3.ShortNavigationBarArrangement
import androidx.compose.material3.ShortNavigationBarItem
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

var selectedItem by remember { mutableIntStateOf(0) }
val items = listOf("Songs", "Artists", "Playlists")
val selectedIcons = listOf(Icons.Filled.Home, Icons.Filled.Favorite, Icons.Filled.Star)
val unselectedIcons =
    listOf(Icons.Outlined.Home, Icons.Outlined.FavoriteBorder, Icons.Outlined.StarBorder)

Column {
    Text(
        "Note: this is configuration is better displayed in medium screen sizes.",
        Modifier.padding(16.dp),
    )

    Spacer(Modifier.height(32.dp))

    ShortNavigationBar(arrangement = ShortNavigationBarArrangement.Centered) {
        items.forEachIndexed { index, item ->
            ShortNavigationBarItem(
                iconPosition = NavigationItemIconPosition.Start,
                icon = {
                    Icon(
                        if (selectedItem == index) selectedIcons[index]
                        else unselectedIcons[index],
                        contentDescription = null,
                    )
                },
                label = { Text(item) },
                selected = selectedItem == index,
                onClick = { selectedItem = index },
            )
        }
    }
}

See ShortNavigationBarItem for configurations specific to each item, and not the overall ShortNavigationBar component.

Parameters
modifier: Modifier = Modifier	the Modifier to be applied to this navigation bar
containerColor: Color = ShortNavigationBarDefaults.containerColor	the color used for the background of this navigation bar. Use Color.Transparent to have no color
contentColor: Color = ShortNavigationBarDefaults.contentColor	the color for content inside this navigation bar.
windowInsets: WindowInsets = ShortNavigationBarDefaults.windowInsets	a window insets of the navigation bar
arrangement: ShortNavigationBarArrangement = ShortNavigationBarDefaults.arrangement	the ShortNavigationBarArrangement of this navigation bar
content: @Composable () -> Unit	the content of this navigation bar, typically ShortNavigationBarItems