Biofarma | Bind UI

Bottom navigation can have up to 5 tabs with one active tab. You can optionally add a badge to one of the tabs.

Type	Resource
Design	Figma
Mobile	Mobile Storybook
Code	Gitlab

Bottom Navigation Preview

Usage

import id.co.biofarma.binduiandroid.components.bottom_navigation.BottomNavigation

fun BottomNavigationScreen() {
    var selectedTab by remember { mutableStateOf(0) }
    val tabs = listOf(
        "Home" to BottomNavigationMenuObj(icon = Icons.Outlined.Home),
        "Search" to BottomNavigationMenuObj(icon = Icons.Outlined.Search),
        "Like" to BottomNavigationMenuObj(icon = Icons.Outlined.Like),
        "Chat" to BottomNavigationMenuObj(
            icon = Icons.Outlined.Chat,
            notificationCount = 99,
        ),
        "Acocunt" to BottomNavigationMenuObj(
            icon = Icons.Outlined.User),
            notificationCount = 2,
            type = BottomNavigationMenuObjType.NUMBER
    )
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        verticalAlignment = Alignment.Bottom
    ) {
        BottomNavigation(
            items = tabs,
            activeTab = selectedTab,
            onTabSelected = { selectedTab = it }
        )
 
    }
}

Examples

Items

Use items to set the number of menus displayed with a minimum of 2 items to a maximum of 5 items.

Bottom Navigation Example Items

fun BottomNavigationScreen() {
    var selectedTab by remember { mutableStateOf(0) }
    val tabs = listOf(
        "Home" to BottomNavigationMenuObj(icon = Icons.Outlined.Home),
        "Acocunt" to BottomNavigationMenuObj(icon = Icons.Outlined.User))
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        verticalAlignment = Alignment.Bottom
    ) {
        BottomNavigation(
            items = tabs,
            activeTab = selectedTab,
            onTabSelected = { selectedTab = it }
        )
 
    }
}
fun BottomNavigationScreen() {
    var selectedTab by remember { mutableStateOf(0) }
    val tabs = listOf(
        "Home" to BottomNavigationMenuObj(icon = Icons.Outlined.Home),
        "Search" to BottomNavigationMenuObj(icon = Icons.Outlined.Search),
        "Acocunt" to BottomNavigationMenuObj(icon = Icons.Outlined.User))
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        verticalAlignment = Alignment.Bottom
    ) {
        BottomNavigation(
            items = tabs,
            activeTab = selectedTab,
            onTabSelected = { selectedTab = it }
        )
 
    }
}
fun BottomNavigationScreen() {
    var selectedTab by remember { mutableStateOf(0) }
    val tabs = listOf(
        "Home" to BottomNavigationMenuObj(icon = Icons.Outlined.Home),
        "Search" to BottomNavigationMenuObj(icon = Icons.Outlined.Search),
        "Chat" to BottomNavigationMenuObj(icon = Icons.Outlined.Chat),
        "Acocunt" to BottomNavigationMenuObj(icon = Icons.Outlined.User))
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        verticalAlignment = Alignment.Bottom
    ) {
        BottomNavigation(
            items = tabs,
            activeTab = selectedTab,
            onTabSelected = { selectedTab = it }
        )
 
    }
}
fun BottomNavigationScreen() {
    var selectedTab by remember { mutableStateOf(0) }
    val tabs = listOf(
        "Home" to BottomNavigationMenuObj(icon = Icons.Outlined.Home),
        "Search" to BottomNavigationMenuObj(icon = Icons.Outlined.Search),
        "Like" to BottomNavigationMenuObj(icon = Icons.Outlined.Like),
        "Chat" to BottomNavigationMenuObj(icon = Icons.Outlined.Chat),
        "Acocunt" to BottomNavigationMenuObj(icon = Icons.Outlined.User))
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        verticalAlignment = Alignment.Bottom
    ) {
        BottomNavigation(
            items = tabs,
            activeTab = selectedTab,
            onTabSelected = { selectedTab = it }
        )
 
    }
}

No Labels

Use the empty string “ ” if items are created without labels.

Bottom Navigation Example No Labels

fun BottomNavigationScreen() {
    var selectedTab by remember { mutableStateOf(0) }
    val tabs = listOf(
        " " to BottomNavigationMenuObj(icon = Icons.Outlined.Home),
        " " to BottomNavigationMenuObj(icon = Icons.Outlined.User))
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        verticalAlignment = Alignment.Bottom
    ) {
        BottomNavigation(
            items = tabs,
            activeTab = selectedTab,
            onTabSelected = { selectedTab = it }
        )
 
    }
}
fun BottomNavigationScreen() {
    var selectedTab by remember { mutableStateOf(0) }
    val tabs = listOf(
        " " to BottomNavigationMenuObj(icon = Icons.Outlined.Home),
        " " to BottomNavigationMenuObj(icon = Icons.Outlined.Search),
        " " to BottomNavigationMenuObj(icon = Icons.Outlined.User))
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        verticalAlignment = Alignment.Bottom
    ) {
        BottomNavigation(
            items = tabs,
            activeTab = selectedTab,
            onTabSelected = { selectedTab = it }
        )
 
    }
}
fun BottomNavigationScreen() {
    var selectedTab by remember { mutableStateOf(0) }
    val tabs = listOf(
        " " to BottomNavigationMenuObj(icon = Icons.Outlined.Home),
        " " to BottomNavigationMenuObj(icon = Icons.Outlined.Search),
        " " to BottomNavigationMenuObj(icon = Icons.Outlined.Chat),
        " " to BottomNavigationMenuObj(icon = Icons.Outlined.User))
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        verticalAlignment = Alignment.Bottom
    ) {
        BottomNavigation(
            items = tabs,
            activeTab = selectedTab,
            onTabSelected = { selectedTab = it }
        )
 
    }
}
fun BottomNavigationScreen() {
    var selectedTab by remember { mutableStateOf(0) }
    val tabs = listOf(
        " " to BottomNavigationMenuObj(icon = Icons.Outlined.Home),
        " " to BottomNavigationMenuObj(icon = Icons.Outlined.Search),
        " " to BottomNavigationMenuObj(icon = Icons.Outlined.Like),
        " " to BottomNavigationMenuObj(icon = Icons.Outlined.Chat),
        " " to BottomNavigationMenuObj(icon = Icons.Outlined.User))
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        verticalAlignment = Alignment.Bottom
    ) {
        BottomNavigation(
            items = tabs,
            activeTab = selectedTab,
            onTabSelected = { selectedTab = it }
        )
 
    }
}

Props

Props	Required	Default	Type	description
items	false	-	`List<Pair<String, BottomNavigationMenuObj>>`	A list of items containing menus and labels for bottom navigation.
activeTab	false	-	`int`	The value with the active menu tab item.
onTabSelected	false	-	`(Int) -> Unit`	A callback function to be executed when a menu item is clicked and becomes active.

Avatar Card