How to create Navigation rail?
Navigation Rail is most useful components of Material Design if our apps are used on a device of larger screen such as tablet and desktop. It make easy for users to navigate. It looks like a sidebar and can contains three to seven app destination items. We use NavigationRailItem to represent a destination within a Navigation Rail.
It should be placed at the side edge of large screen devices such as tablets or desktop when an application has three to seven top-level destinations.
In this tutorial we will learn to create Navigation Rail.
Create a New Project and select Empty Activity In my case, application name is coding Bihar you can use any other name.
| Feature | NavigationRail | Bottom Navigation |
|---|---|---|
| Screen type | Large / Tablet | Small / Phone |
| Orientation | Vertical | Horizontal |
| Visibility | Always visible | Limited space |
MainActivity
package com.example.codingbihar
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier
import com.example.codingbihar.ui.theme.CodingBiharTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
CodingBiharTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
NavigationRails()
}
}
}
}
}Create a separate file for Navigation Rail and named it as NavigationRails
NavigationRails
package com.example.codingbihar
import androidx.compose.foundation.layout.Row
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationRail
import androidx.compose.material3.NavigationRailItem
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
@Composable
fun NavigationRails() {
var selectedItem by remember { mutableStateOf(0) }
val items = listOf("Home", "Search", "Settings")
val icons = listOf(Icons.Filled.Home,
Icons.Filled.Search, Icons.Filled.Settings)
Row {
NavigationRail {
items.forEachIndexed { index, item ->
NavigationRailItem(
icon = { Icon(icons[index], contentDescription = item) },
label = { Text(item) },
selected = selectedItem == index,
onClick = { selectedItem = index }
)
}
}
}
}OUTPUT : -
About the Author
Sandeep Kumar is an Android developer and educator who writes beginner-friendly Jetpack Compose tutorials on CodingBihar.com. His focus is on clean UI, Material Design 3, and real-world Android apps.