How to disable ripple effect on any Jetpack Compose view?

In Jetpack Compose, how to remove (or change the shape of) the ripple effect when clicking on an Item ?

This is an example with NavigationBar from Material Design 3

var selectedItem by remember { mutableStateOf(0) }
val items = listOf("Songs", "Artists", "Playlists")

NavigationBar {
    items.forEachIndexed { index, item ->
        NavigationBarItem(
            icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
            label = { Text(item) },
            selected = selectedItem == index,
            onClick = { selectedItem = index }
        )
    }
}

Trying to add a Modifier with

modifier = Modifier.clickable(interactionSource = interactionSource,indication = null){}

both on the NavigationBar and on the NavigationBarItem, does not work.

You can do it by providing LocalIndication. All views inside CompositionLocalProvider content will have no ripple.

CompositionLocalProvider(
    LocalIndication provides ClearIndicationNodeFactory,
) {
    NavigationBar {
        items.forEachIndexed { index, item ->
            NavigationBarItem(
                icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
                label = { Text(item) },
                selected = selectedItem == index,
                onClick = { selectedItem = index }
            )
        }
    }
}

ClearIndicationNodeFactory:

data object ClearIndicationNodeFactory : IndicationNodeFactory {
    override fun create(interactionSource: InteractionSource): DelegatableNode = object : Modifier.Node() {}
}

Old answer, before Compose 1.7.0 you can do it by providing LocalRippleTheme.

CompositionLocalProvider(
    LocalRippleTheme provides ClearRippleTheme
) {
    NavigationBar {
        items.forEachIndexed { index, item ->
            NavigationBarItem(
                icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
                label = { Text(item) },
                selected = selectedItem == index,
                onClick = { selectedItem = index }
            )
        }
    }
}

ClearRippleTheme:

object ClearRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor(): Color = Color.Transparent

    @Composable
    override fun rippleAlpha() = RippleAlpha(
        draggedAlpha = 0.0f,
        focusedAlpha = 0.0f,
        hoveredAlpha = 0.0f,
        pressedAlpha = 0.0f,
    )
}