Navigation Rail in Jetpack Compose

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.

Also Read How to create radio button in jetpack compose?

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.

MainActivity

Copy this code →

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 

Copy this code →

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 : -

************************End***********************