How to create Navigation rail?
Modern Android applications need intuitive and user-friendly navigation systems. While Bottom Navigation works well on phones, larger devices such as tablets, foldables, Chromebooks, and desktop-sized screens require a different navigation pattern. This is where Navigation Rail becomes useful.
Navigation Rail is a Material Design component that displays primary destinations vertically along the side of the screen. It provides quick access to different sections of an application while making efficient use of larger screen space.
In this article, you'll learn what Navigation Rail is, when to use it, its advantages, and how to create one in Jetpack Compose.
What is Navigation Rail?
Navigation Rail is a vertical navigation component placed on the left or right side of the screen. It allows users to switch between major destinations in an application.
Unlike Bottom Navigation, which appears at the bottom of the screen, Navigation Rail remains visible along the side, making it ideal for larger displays.
Common destinations inside a Navigation Rail include:
Home
Search
Favorites
Notifications
Settings
Profile
Users can easily switch between these destinations by tapping the corresponding navigation item.
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.=
Why Use Navigation Rail?
Navigation Rail offers several benefits:
Better Use of Screen Space
Large-screen devices often have unused space on the sides. Navigation Rail utilizes this space effectively.
Improved Navigation
Users can quickly access different sections without opening a menu or drawer.
Modern Material Design Experience
Navigation Rail follows Material Design guidelines and provides a professional look and feel.
Ideal for Tablets and Foldables
It enhances usability on devices with wider screens.
Navigation Rail vs Bottom Navigation
| Navigation Rail | Bottom Navigation |
|---|---|
| Vertical layout | Horizontal layout |
| Best for tablets | Best for phones |
| Uses side space | Uses bottom space |
| Better on large screens | Better on small screens |
| More visible during content browsing | Less visible when scrolling |
Components of a Navigation Rail
A Navigation Rail usually consists of:
NavigationRail
The container that holds all navigation items.
NavigationRailItem
Represents an individual destination.
Icon
Displays a visual representation of the destination.
Label
Provides descriptive text for the navigation item.
Selected State
Highlights the currently selected destination.
Creating a Simple Navigation Rail
Creating a Navigation Rail in Jetpack Compose is straightforward.
Basic steps:
- Add a NavigationRail component.
- Create multiple NavigationRailItem elements.
- Track the selected item.
- Update the selected destination when users tap an item.
Each item should contain:
- An icon
- A label
- Selection state
- Click action
Example Navigation Destinations
A typical application may contain:
Home
Displays the main dashboard.
Search
Allows users to search content.
Favorites
Shows saved items.
Notifications
Displays alerts and updates.
Settings
Contains application preferences.
Best Practices
Keep Navigation Items Limited
Avoid overcrowding the rail with too many destinations.
Recommended:
- 3 to 7 items
Use Meaningful Icons
Icons should clearly represent their destination.
Provide Labels
Labels improve usability and accessibility.
Highlight Selected Item
Always indicate the currently active destination.
Follow Material Design Guidelines
Maintain consistent spacing, typography, and icon sizes.
Common Use Cases
Navigation Rail is commonly used in:
Productivity Apps
- Note-taking apps
- Project management tools
- Document editors
Media Applications
- Music apps
- Video streaming apps
- Photo galleries
Business Applications
- CRM systems
- Analytics dashboards
- Inventory management apps
Educational Apps
- Learning platforms
- Course management systems
- Student portals
Navigation Rail with Responsive Design
Many modern applications switch navigation patterns depending on screen size.
For example:
Small Screens
Use Bottom Navigation.
Medium Screens
Use Navigation Rail.
Large Screens
Use Navigation Drawer.
This adaptive approach creates an optimal user experience across all devices.
Advantages of Navigation Rail
- Better large-screen support
- Cleaner interface
- Faster destination switching
- Material Design compliant
- Improved accessibility
- Consistent navigation experience
Limitations of Navigation Rail
- Consumes horizontal space
- Not suitable for very small screens
- Limited number of destinations
- May require responsive layouts
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 : -
Frequently Asked Questions (FAQ)
What is Navigation Rail in Jetpack Compose?
Navigation Rail is a Material Design navigation component that displays destinations vertically along the side of the screen.
When should I use Navigation Rail?
Use Navigation Rail for tablets, foldables, and larger screen devices where side navigation is more practical than bottom navigation.
How many items should a Navigation Rail contain?
Typically between 3 and 7 navigation destinations.
Can Navigation Rail replace Bottom Navigation?]
Yes. On larger screens, Navigation Rail often provides a better user experience than Bottom Navigation.
Does Navigation Rail support icons and labels?
Yes. Each item can display both an icon and a text label.
Is Navigation Rail part of Material Design 3?
Yes. Navigation Rail is included in Material Design 3 and is fully supported in Jetpack Compose.
Can Navigation Rail be used with Navigation Compose?
Yes. It works seamlessly with Navigation Compose to navigate between screens.
Is Navigation Rail responsive?
Yes. It is commonly used as part of adaptive layouts that adjust based on screen size.
Conclusion
Navigation Rail is a powerful Material Design component designed for medium and large-screen Android devices. It provides quick access to primary destinations while maintaining a clean and modern user interface. By using Navigation Rail in Jetpack Compose, developers can create responsive applications that deliver an excellent navigation experience across tablets, foldables, Chromebooks, and desktop-sized screens.
As Android devices continue to evolve, Navigation Rail is becoming an essential component for building adaptive and future-ready user interfaces.
