Navigation & Media

Bottom navigation, the floating action button, avatars, and an embedded web view.

---

KitBottomNavScaffold

A scaffold with a themed bottom navigation bar — pass your tabs, get a working multi-tab shell with per-tab badges.

val tabs = listOf(
    KitBottomNavItem(label = "Home", icon = KitTheme.icons.home),
    KitBottomNavItem(label = "Search", icon = KitTheme.icons.search),
    KitBottomNavItem(label = "Profile", icon = KitTheme.icons.person, badgeCount = 3),
)

KitBottomNavScaffold(
    items = tabs,
    selectedIndex = tab,
    onSelectedChange = { tab = it },
) { padding ->
    when (tab) {
        0 -> HomeContent(Modifier.padding(padding))
        1 -> SearchContent(Modifier.padding(padding))
        2 -> ProfileContent(Modifier.padding(padding))
    }
}

Features — themed selected/unselected states, optional badgeCount per item, content gets the inner padding. KitBottomNavBar is also exposed standalone if you manage your own scaffold.

---

KitFab

A floating action button — icon-only or extended with a label.

// Icon only
KitFab(onClick = ::addItem, icon = KitTheme.icons.add, contentDescription = "Add")

// Extended (icon + label)
KitFab(onClick = ::addItem, icon = KitTheme.icons.add, label = "New note")

---

KitAvatar

A circular avatar — loads a URL image, falls back to initials, then to a placeholder.

KitAvatar(
    imageUrl = user.photoUrl,   // null → initials
    initials = user.initials,   // null → placeholder icon
    size = 48.dp,
)

---

KitWebView

An embedded web view for rendering in-app web content. JavaScript is off by default — for opening external links, prefer Chrome Custom Tabs (CustomTabs, see Features).

KitWebView(url = "https://example.com/article")

⚠️ Only enable JavaScript for content you control. For arbitrary external links, Custom Tabs is safer and faster.

---

That's the component library. For full screens built from these pieces, see the Screens section.