Skip to content

Bars

The Bars components provide navigation and top app bar functionality for your application. They include both navigation bars for bottom navigation and various top app bar configurations.

Usage

NavigationBar {
    NavigationBarItem(
        icon = Icons.Default.Home,
        selected = selectedItem == 0,
        onClick = { selectedItem = 0 },
        label = "Home"
    )
    NavigationBarItem(
        icon = Icons.Default.Search,
        selected = selectedItem == 1,
        onClick = { selectedItem = 1 },
        label = "Search"
    )
}

Simple Top Bar

SimpleTopBar(
    title = "My App",
    textStyle = MaterialTheme.typography.titleLarge,
    actions = {
        TopBarAction(
            icon = Icons.Default.Settings,
            onClick = { /* Handle action */ },
            contentDescription = "Settings"
        )
    }
)

Top Bar with Back Button

TopBarWithBackButton(
    title = "Details",
    textStyle = MaterialTheme.typography.titleLarge,
    onBackClicked = { /* Handle back navigation */ },
    actions = {
        TopBarAction(
            icon = Icons.Default.Share,
            onClick = { /* Handle share */ },
            contentDescription = "Share"
        )
    }
)

Center Aligned Top Bar

CenterAlignedTopAppBar(
    title = "Centered Title",
    textStyle = MaterialTheme.typography.titleLarge,
    logo = painterResource(R.drawable.logo),
    actions = {
        TopBarAction(
            icon = Icons.Default.MoreVert,
            onClick = { /* Handle menu */ },
            contentDescription = "More options"
        )
    }
)