ShortNavigationBar and WideNavigationRail in Compose

homeHomeexploreExplorelibrary_musicLibrarypersonProfile

Tap a destination: the pill indicator widens under the selected icon

Pick by window width: ShortNavigationBar on phones, WideNavigationRail on medium and expanded widths. These two are the only Expressive components that are already public in material3 1.4.0.

Phone

@Composable
fun BottomBar(destinations: List<Destination>, selected: Int, onSelect: (Int) -> Unit) {
    // ShortNavigationBar is the Expressive bottom bar: 64dp tall, 3 to 5 items on phones.
    // On medium widths set iconPosition = NavigationItemIconPosition.Start on the items.
    ShortNavigationBar {
        destinations.forEachIndexed { index, destination ->
            ShortNavigationBarItem(
                selected = selected == index,
                onClick = { onSelect(index) },
                icon = { Icon(destination.icon, contentDescription = null) },
                label = { Text(destination.label) },
            )
        }
    }
}

Tablet and desktop

@Composable
fun SideRail(destinations: List<Destination>, selected: Int, onSelect: (Int) -> Unit) {
    // For tablets and desktop. It expands in place, which is what M3 Expressive uses instead of a
    // navigation drawer. Show 3 to 7 items when collapsed.
    val state = rememberWideNavigationRailState(WideNavigationRailValue.Collapsed)
    val expanded = state.targetValue == WideNavigationRailValue.Expanded
    WideNavigationRail(state = state) {
        destinations.forEachIndexed { index, destination ->
            WideNavigationRailItem(
                selected = selected == index,
                onClick = { onSelect(index) },
                icon = { Icon(destination.icon, contentDescription = null) },
                label = { Text(destination.label) },
                railExpanded = expanded,
            )
        }
    }
}

ModalWideNavigationRail is the modal version for compact windows. In Google’s tablet examples, the expanded rail puts an extended FAB at the top.

Related: floating toolbar · design rules: large screens

Want your agent to get this right every time? Install the skill. If this page helped,star the repo on GitHub.