# ShortNavigationBar

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/ShortNavigationBar.composable#ShortNavigationBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.ShortNavigationBarArrangement,kotlin.Function0)( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, containerColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, contentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, windowInsets: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets, arrangement: https://developer.android.com/reference/kotlin/androidx/compose/material3/ShortNavigationBarArrangement, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Material Design short navigation bar. | Cmn |

## Functions

### ShortNavigationBar

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/ShortNavigationBar.kt+function:ShortNavigationBar)

```
@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.

![Short navigation bar with vertical items
image](https://developer.android.com/images/reference/androidx/compose/material3/short-navigation-bar-vertical-items.png)

![Short navigation bar with horizontal items
image](https://developer.android.com/images/reference/androidx/compose/material3/short-navigation-bar-horizontal-items.png)

The recommended configuration of the `https://developer.android.com/reference/kotlin/androidx/compose/material3/ShortNavigationBar.composable#ShortNavigationBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.ShortNavigationBarArrangement,kotlin.Function0)` depends on the width size of the screen it's being displayed at:

- In small screens, the `https://developer.android.com/reference/kotlin/androidx/compose/material3/ShortNavigationBar.composable#ShortNavigationBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.ShortNavigationBarArrangement,kotlin.Function0)` should contain three to five `https://developer.android.com/reference/kotlin/androidx/compose/material3/ShortNavigationBarItem.composable#ShortNavigationBarItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.NavigationItemIconPosition,androidx.compose.material3.NavigationItemColors,androidx.compose.foundation.interaction.MutableInteractionSource)`s, each representing a singular destination, and its `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ShortNavigationBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.ShortNavigationBarArrangement,kotlin.Function0)` should be `https://developer.android.com/reference/kotlin/androidx/compose/material3/ShortNavigationBarArrangement#EqualWeight()`, so that the navigation items are equally distributed on the bar.

- In medium screens, `https://developer.android.com/reference/kotlin/androidx/compose/material3/ShortNavigationBar.composable#ShortNavigationBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.ShortNavigationBarArrangement,kotlin.Function0)` should contain three to six `https://developer.android.com/reference/kotlin/androidx/compose/material3/ShortNavigationBarItem.composable#ShortNavigationBarItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.NavigationItemIconPosition,androidx.compose.material3.NavigationItemColors,androidx.compose.foundation.interaction.MutableInteractionSource)`s, each representing a singular destination, and its `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ShortNavigationBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.ShortNavigationBarArrangement,kotlin.Function0)` should be `https://developer.android.com/reference/kotlin/androidx/compose/material3/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:

```kotlin
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.saveable.rememberSaveable

var selectedItem by rememberSaveable { 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:

```kotlin
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.saveable.rememberSaveable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

var selectedItem by rememberSaveable { 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 `https://developer.android.com/reference/kotlin/androidx/compose/material3/ShortNavigationBarItem.composable#ShortNavigationBarItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.NavigationItemIconPosition,androidx.compose.material3.NavigationItemColors,androidx.compose.foundation.interaction.MutableInteractionSource)` for configurations specific to each item, and not the overall `https://developer.android.com/reference/kotlin/androidx/compose/material3/ShortNavigationBar.composable#ShortNavigationBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.ShortNavigationBarArrangement,kotlin.Function0)` component.

| Parameters |
|---|---|
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this navigation bar |
| `containerColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = ShortNavigationBarDefaults.containerColor` | the color used for the background of this navigation bar. Use `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color#Transparent()` to have no color |
| `contentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = ShortNavigationBarDefaults.contentColor` | the color for content inside this navigation bar. |
| `windowInsets: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets = ShortNavigationBarDefaults.windowInsets` | a window insets of the navigation bar |
| `arrangement: https://developer.android.com/reference/kotlin/androidx/compose/material3/ShortNavigationBarArrangement = ShortNavigationBarDefaults.arrangement` | the `https://developer.android.com/reference/kotlin/androidx/compose/material3/ShortNavigationBarArrangement` of this navigation bar |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the content of this navigation bar, typically `https://developer.android.com/reference/kotlin/androidx/compose/material3/ShortNavigationBarItem.composable#ShortNavigationBarItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.NavigationItemIconPosition,androidx.compose.material3.NavigationItemColors,androidx.compose.foundation.interaction.MutableInteractionSource)`s |