core/com.orange.ouds.core.component/OudsNavigationBar

OudsNavigationBar

fun OudsNavigationBar(modifier: Modifier = Modifier, translucent: Boolean = false, windowInsets: WindowInsets = NavigationBarDefaults.windowInsets, content: @Composable RowScope.() -> Unit)

The navigation bar lets people switch between UI views on smaller devices. It offers a persistent and convenient way to switch between primary destinations in an app.

OudsNavigationBar should contain three to five OudsNavigationBarItem, each representing a singular destination.

OudsNavigationBar default appearance is opaque but, if you need a translucent blurred navigation bar (supported from Android 13) as specified on OUDS design side, you can implement it in your app with the help of Haze library. To do this, use OudsNavigationBar with translucent parameter set to true and follow these steps:

Add Haze dependency
Follow Haze basic usage instructions:

Define Haze state in the screen containing the navigation bar: val hazeState = rememberHazeState()
Use hazeEffect Modifier on OudsNavigationBar providing OUDS blur radius: Modifier.hazeEffect(state = hazeState, style = HazeStyle(tint = null, blurRadius = OudsTheme.navigationBarBlur.dp)),
Apply hazeSource Modifier on the content that scrolls behind the navigation bar: Modifier.hazeSource(state = hazeState)

As your screen content needs to scroll behind the navigation bar, you'll probably need to adjust paddings and to add a spacer at the end of the screen content that will have the height of OudsNavigationBar. For this, please use OudsNavigationBarHeight constant.

Parameters

modifier

Modifier applied to the navigation bar.

translucent

Whether the navigation bar should be translucent.

windowInsets

Window insets of the navigation bar.

content

Content of the navigation bar.

Samples

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Call
import androidx.compose.material.icons.filled.DateRange
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Settings
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsNavigationBar
import com.orange.ouds.core.component.OudsNavigationBarItem
import com.orange.ouds.core.component.OudsNavigationBarItemIcon
import com.orange.ouds.core.utilities.OudsPreview

fun main() { 
   //sampleStart 
   data class Menu(val label: String, val imageVector: ImageVector, val enabled: Boolean = true)

val items = listOf(
    Menu("Call", Icons.Default.Call),
    Menu("Email", Icons.Default.Email),
    Menu("Agenda", Icons.Default.DateRange, enabled = false),
    Menu("Settings", Icons.Default.Settings)
)
var selectedItemIndex: Int by rememberSaveable { mutableIntStateOf(0) }

OudsNavigationBar {
    items.forEachIndexed { index, item ->
        val isSelected = index == selectedItemIndex
        OudsNavigationBarItem(
            modifier = Modifier.weight(1f),
            selected = isSelected,
            onClick = {
                selectedItemIndex = index
                // Do something else here
            },
            icon = OudsNavigationBarItemIcon(
                imageVector = item.imageVector,
                contentDescription = item.label
            ),
            label = item.label,
            enabled = item.enabled
        )
    }
} 
   //sampleEnd
}