---
title: Side Bar
date: '2025-07-30'
description: Side Bars are commonly used for displaying all top level destinations in a wide screen (such as tablets or landscape
  phones).
---

<!-- AUTOGEN:START -->
:::preview[sidebar]
@code
```kotlin
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import com.composables.icons.lucide.ChartNoAxesCombined
import com.composables.icons.lucide.Cog
import com.composables.icons.lucide.House
import com.composables.icons.lucide.Lucide
import com.composables.icons.lucide.Package
import com.composables.uikit.components.Icon
import com.composables.uikit.components.SideBar
import com.composables.uikit.components.SideBarItem
import com.composables.uikit.components.Text

@Composable
fun SideBarExample() {
    var selectedIndex by remember { mutableStateOf(0) }

    SideBar(
        navigationItems = {
            SideBarItem(
                onClick = { selectedIndex = 0 },
                selected = selectedIndex == 0,
                modifier = Modifier.fillMaxWidth(),
                icon = { Icon(Lucide.House, contentDescription = null) },
                title = { Text("Home") }
            )

            SideBarItem(
                onClick = { selectedIndex = 1 },
                selected = selectedIndex == 1,
                modifier = Modifier.fillMaxWidth(),
                icon = { Icon(Lucide.ChartNoAxesCombined, contentDescription = null) },
                title = { Text("Orders") }
            )

            SideBarItem(
                onClick = { selectedIndex = 2 },
                selected = selectedIndex == 2,
                modifier = Modifier.fillMaxWidth(),
                icon = { Icon(Lucide.Package, contentDescription = null) },
                title = { Text("Products") }
            )

            SideBarItem(
                onClick = { selectedIndex = 3 },
                selected = selectedIndex == 3,
                modifier = Modifier.fillMaxWidth(),
                icon = { Icon(Lucide.Cog, contentDescription = null) },
                title = { Text("Settings") }
            )
        }
    )
}
```
@end
:::

## Installation

{{uikit:installation}}

## Usage

```kotlin
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import com.composables.icons.lucide.ChartNoAxesCombined
import com.composables.icons.lucide.Cog
import com.composables.icons.lucide.House
import com.composables.icons.lucide.Lucide
import com.composables.icons.lucide.Package
import com.composables.uikit.components.Icon
import com.composables.uikit.components.SideBar
import com.composables.uikit.components.SideBarItem
import com.composables.uikit.components.Text

@Composable
fun SideBarExample() {
    var selectedIndex by remember { mutableStateOf(0) }

    SideBar(
        navigationItems = {
            SideBarItem(
                onClick = { selectedIndex = 0 },
                selected = selectedIndex == 0,
                modifier = Modifier.fillMaxWidth(),
                icon = { Icon(Lucide.House, contentDescription = null) },
                title = { Text("Home") }
            )

            SideBarItem(
                onClick = { selectedIndex = 1 },
                selected = selectedIndex == 1,
                modifier = Modifier.fillMaxWidth(),
                icon = { Icon(Lucide.ChartNoAxesCombined, contentDescription = null) },
                title = { Text("Orders") }
            )

            SideBarItem(
                onClick = { selectedIndex = 2 },
                selected = selectedIndex == 2,
                modifier = Modifier.fillMaxWidth(),
                icon = { Icon(Lucide.Package, contentDescription = null) },
                title = { Text("Products") }
            )

            SideBarItem(
                onClick = { selectedIndex = 3 },
                selected = selectedIndex == 3,
                modifier = Modifier.fillMaxWidth(),
                icon = { Icon(Lucide.Cog, contentDescription = null) },
                title = { Text("Settings") }
            )
        }
    )
}
```
<!-- AUTOGEN:END -->