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

OudsNavigationBar

fun OudsNavigationBar(items: List<OudsNavigationBarItem>, modifier: Modifier = Modifier, translucent: Boolean = false, windowInsets: WindowInsets = ShortNavigationBarDefaults.windowInsets)

The Navigation bar (aka Bottom navigation bar on Material 2) provides access to an app’s primary destinations using 3 to 5 persistent tabs. Each destination is represented by an icon and optionally a text label. Positioned at the bottom of the screen, it supports quick switching between top-level sections, following Material Design navigation patterns.

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

The layout of the items automatically adapts to the screen width:

On medium screens (width >= 600dp): Items are centered, with the icon positioned at the start of the label.
On compact screens (width < 600dp): Items are equally distributed, with the icon positioned on top of the label.

OudsNavigationBar default appearance is opaque but, if you need a translucent blurred navigation bar 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.components.bar.blurRadius.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 add an additional bottom padding that will have the height of OudsNavigationBar. For this, please use OudsNavigationBarHeight constant.

Design

Guidelines	unified-design-system.orange.com
Version	1.0.0

Parameters

items

List of OudsNavigationBarItem to display in the navigation bar.

modifier

Modifier applied to the navigation bar.

translucent

Whether the navigation bar should be translucent.

windowInsets

Window insets 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.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.OudsNavigationBarItemBadge
import com.orange.ouds.core.component.OudsNavigationBarItemIcon
import com.orange.ouds.core.utilities.OudsPreview

fun main() { 
   //sampleStart 
   data class Item(val label: String, val imageVector: ImageVector, val count: Int? = null)

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

OudsNavigationBar(
    items = items.mapIndexed { index, item ->
        val isSelected = index == selectedItemIndex
        OudsNavigationBarItem(
            selected = isSelected,
            onClick = {
                selectedItemIndex = index
                // Do something else here
            },
            icon = OudsNavigationBarItemIcon(imageVector = item.imageVector),
            label = item.label,
            badge = item.count?.let { count ->
                OudsNavigationBarItemBadge(contentDescription = "$count unread emails", count = count)
            }
        )
    }
) 
   //sampleEnd
}