Navigation bars

Navigation bars offer a persistent and convenient way to switch between primary destinations in an app.

package io.material.compose

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
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.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import io.material.compose.model.post1
import io.material.compose.ui.design.PostCardPopular

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun NavigationRailSample() {
    var selectedItem by remember { mutableStateOf(0) }
    LazyColumn(
        Modifier.padding(75.dp,0.dp,0.dp,0.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        val list = (0..25).map { it.toString() }
        items(count = list.size) {
            // * card view
            PostCardPopular(post1, {})
        }
    }

    val items = listOf("Home", "Search", "Settings")
    val icons = listOf(Icons.Filled.Home, Icons.Filled.Search, Icons.Filled.Settings)
    //..........................................................................................
    // Navigation Rail Sample
    NavigationRail {
        items.forEachIndexed { index, item ->
            NavigationRailItem(
                icon = { Icon(icons[index], contentDescription = item) },
                label = { Text(item) },
                selected = selectedItem == index,
                onClick = { selectedItem = index }
            )
        }
    }
}

..

Navigation Rail

Navigation rails provide ergonomic movement between primary destinations in apps.

package io.material.compose

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
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.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import io.material.compose.model.post1
import io.material.compose.ui.design.PostCardPopular

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun NavigationRailSample() {
    var selectedItem by remember { mutableStateOf(0) }
    LazyColumn(
        Modifier.padding(75.dp,0.dp,0.dp,0.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        val list = (0..25).map { it.toString() }
        items(count = list.size) {
            // * card view
            PostCardPopular(post1, {})
        }
    }

    val items = listOf("Home", "Search", "Settings")
    val icons = listOf(Icons.Filled.Home, Icons.Filled.Search, Icons.Filled.Settings)
    //..........................................................................................
    // Navigation Rail Sample
    NavigationRail {
        items.forEachIndexed { index, item ->
            NavigationRailItem(
                icon = { Icon(icons[index], contentDescription = item) },
                label = { Text(item) },
                selected = selectedItem == index,
                onClick = { selectedItem = index }
            )
        }
    }
}

• Navigation rail with only selected label

NavigationRail {
        items.forEachIndexed { index, item ->
            NavigationRailItem(
                icon = { Icon(icons[index], contentDescription = item) },
                label = { Text(item) },
                selected = selectedItem == index,
                onClick = { selectedItem = index },
                alwaysShowLabel = false
            )
        }
    }

• Navigation rail bottom align

A Spacer that pushes the NavigationRail items to the bottom of the NavigationRail.

 NavigationRail {
        // A Spacer that pushes the NavigationRail items to the bottom of the NavigationRail.
        Spacer(Modifier.weight(1f))
        items.forEachIndexed { index, item ->
            NavigationRailItem(
                icon = { Icon(icons[index], contentDescription = item) },
                label = { Text(item) },
                selected = selectedItem == index,
                onClick = { selectedItem = index },
                alwaysShowLabel = false
            )
        }
    }

..

Menus

Menus display a list of choices on temporary surfaces.

package io.material.compose

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.Divider
import androidx.compose.material.DropdownMenu
import androidx.compose.material.DropdownMenuItem
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.navigation.NavController
import io.material.compose.ui.theme.Purple40


@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MenuDemo(navController: NavController) {
    val context = LocalContext.current
    var expanded by remember { mutableStateOf(false) }

    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                title = { Text("Menus") },
                Modifier.background(Purple40),
                navigationIcon = {
                    IconButton(onClick = { /* doSomething() */
                        navController.navigateUp()
                    }) {
                        Icon(
                            imageVector = Icons.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },

                actions = {
                    IconButton(onClick = {
                        customChromeTab(context)
                    }) {
                        Icon(
                            painter = painterResource(id = R.drawable.ic_baseline_open_in_new_24),
                            tint = Purple40,
                            //imageVector = Icons.Filled.PlayArrow,
                            contentDescription = "Read more"
                        )
                    }
                }
            )
        },
        content = {
            Box(modifier = Modifier.fillMaxSize()) {

                Button(
                    onClick = {
                        expanded=true
                    },
                    modifier = Modifier.align(Alignment.Center)
                ) {
                    Text(text = "Menu Sample",style = MaterialTheme.typography.labelLarge)
                }

            }
        }
    )


    //............................................................................................
    Box(modifier = Modifier.fillMaxSize().wrapContentSize(Alignment.Center)) {
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            DropdownMenuItem(onClick = { /* Handle refresh! */
                expanded = false
            }) {
                androidx.compose.material.Text("Refresh",style = MaterialTheme.typography.labelLarge)
            }
            DropdownMenuItem(onClick = { /* Handle settings! */
                expanded = false
            }) {
                androidx.compose.material.Text("Settings",style = MaterialTheme.typography.labelLarge)
            }
            Divider()
            DropdownMenuItem(onClick = { /* Handle send feedback! */
                expanded = false
            }) {
                androidx.compose.material.Text("Send Feedback",style = MaterialTheme.typography.labelLarge)
            }
        }
    }

}

..