KMenu - farimarwat/KrossUi GitHub Wiki

๐Ÿ“‹ KMenu Component Documentation

A multiplatform composable menu component for Kotlin apps, supporting Android and iOS platforms.

๐Ÿ”น Overview

Element Type Description
KMenu Composable Platform-adaptive dropdown menu.

๐Ÿงฉ KMenu

Definition:
A platform-aware menu UI component that displays a list of selectable items, with optional platform-specific icons and custom styling.

Parameters

Parameter Type Default Description
title String "Hello" Title of the menu button or menu section.
iOSIcon String? null SF Symbol icon name for iOS.
androidIcon DrawableResource? null Drawable resource for Android.
items List<KMenuItem> โ€“ List of items to be displayed in the menu.
onItemClick (KMenuItem) -> Unit โ€“ Callback when a menu item is selected.
modifier Modifier Modifier Modifier for styling or layout.
colors KMenuColors KMenuDefaults.colors() Colors for background, content, and disabled state.

๐Ÿงพ KMenuItem

Represents a single item in the menu.

Property Type Default Description
title String โ€“ Text shown for the menu item.
androidIcon DrawableResource? null Icon for Android (drawable resource).
iosIcon String? null Icon for iOS (SF Symbol name).
enabled Boolean true Whether the item is enabled and clickable.

๐ŸŽจ KMenuColors

Defines color configuration for the menu component.

Property Type Description
backgroundColor Color Background color of the menu container.
contentColor Color Color of active (enabled) text and icons.
disabledContentColor Color Color of disabled text and icons.

โš™๏ธ KMenuDefaults

Houses default color values for KMenu.

colors(...)

Parameter Type Default Value Description
backgroundColor Color PlatformColors.systemGray Background color of the menu.
contentColor Color PlatformColors.label Content (text/icon) color for enabled state.
disabledContentColor Color contentColor.copy(alpha=0.4f) Content color when disabled.

Returns a KMenuColors instance with the provided or default values.

โœ… Usage Example

val menuItems = listOf(
    KMenuItem(
        title = "Home sweet Home",
        androidIcon = Res.drawable.ic_home, // โœ… Use drawable for Android
        iosIcon = "house" // โœ… Use SF Symbol for iOS
    ),
    KMenuItem(
        title = "Favourite",
        androidIcon = Res.drawable.ic_star,
        iosIcon = "star.fill"
    ),
    KMenuItem(
        title = "Settings",
        androidIcon = Res.drawable.ic_settings,
        iosIcon = "gear"
    )
)

KMenu(
    title = "Menu",
    items = menuItems,
    androidIcon = Res.drawable.ic_settings, // โœ… Use Android drawable icon
    iOSIcon = "gear", // โœ… Use SF Symbol on iOS
    onItemClick = { selectedItem ->
        println("Clicked: ${selectedItem.title}")
    }
)

๐Ÿ”น Note:

  • On iOS, always use valid SF Symbols (e.g., "gear").
  • On Android, provide appropriate drawable resources (e.g., Res.drawable.ic_settings).
  • The title, iOSIcon, and androidIcon in KMenu(...) define the trigger button's appearance.
  • If you want the trigger to show only a text button, provide only the title.
  • If you want an icon-only button, provide both iosIcon and androidIcon.
  • You can also combine both icon and text โ€” after clicking, the dropdown menu will appear.
โš ๏ธ **GitHub.com Fallback** โš ๏ธ