<div class='type'>Composable Component</div>



Material Design short navigation bar.

<img loading='lazy' class='hero-img' alt='Short navigation bar with vertical items image' src='/static/images/material3/short-navigation-bar-vertical-items.png'>

<a id='references'></a>



<h2 id="shortnavigationbar-modifier-containercolor-contentcolor-windowinsets-arrangement-content">ShortNavigationBar</h2>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@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,
)
```


#### Parameters

| | |
| --- | --- |
| modifier | the `Modifier` to be applied to this navigation bar |
| containerColor | the color used for the background of this navigation bar. Use `Color.Transparent` to have no color |
| contentColor | the color for content inside this navigation bar. |
| windowInsets | a window insets of the navigation bar |
| arrangement | the `ShortNavigationBarArrangement` of this navigation bar |
| content | the content of this navigation bar, typically `ShortNavigationBarItem`s |