Top App Bars

App bars indicate the current location within the app and provide quick actions.

Preview

Code

import androidx.compose.runtime.Composable
import com.composables.uikit.components.Icon
import com.composables.icons.lucide.Bell
import com.composables.icons.lucide.Lucide
import com.composables.icons.lucide.Menu
import com.composables.icons.lucide.Search
import com.composables.uikit.components.IconButton
import com.composables.uikit.components.TopAppBar
import com.composables.uikit.components.Text

@Composable
fun TopAppBarExample() {
    TopAppBar(
        navigation = {
            IconButton(onClick = { /* TODO */ }) {
                Icon(Lucide.Menu, "Toggle Menu")
            }
        },
        title = {
            Text("News")
        },
        actions = {
            IconButton(onClick = { /* TODO */ }) {
                Icon(Lucide.Bell, "Notifications")
            }
            IconButton(onClick = { /* TODO */ }) {
                Icon(Lucide.Search, "Search")
            }
        }
    )
}

Installation

Get access to the source code of all components with a single one-time payment.Buy license ->

Usage

import androidx.compose.runtime.Composable
import com.composables.uikit.components.Icon
import com.composables.icons.lucide.Bell
import com.composables.icons.lucide.Lucide
import com.composables.icons.lucide.Menu
import com.composables.icons.lucide.Search
import com.composables.uikit.components.IconButton
import com.composables.uikit.components.TopAppBar
import com.composables.uikit.components.Text

@Composable
fun TopAppBarExample() {
    TopAppBar(
        navigation = {
            IconButton(onClick = { /* TODO */ }) {
                Icon(Lucide.Menu, "Toggle Menu")
            }
        },
        title = {
            Text("News")
        },
        actions = {
            IconButton(onClick = { /* TODO */ }) {
                Icon(Lucide.Bell, "Notifications")
            }
            IconButton(onClick = { /* TODO */ }) {
                Icon(Lucide.Search, "Search")
            }
        }
    )
}