Menu

Menu drop-down memungkinkan pengguna mengklik ikon, kolom teks, atau komponen lainnya, lalu memilih dari daftar opsi di platform sementara. Panduan ini menjelaskan cara membuat menu dasar dan menu yang lebih kompleks dengan pemisah dan ikon.

Menu drop-down dengan dua opsi yang ditampilkan. Ikon dengan tiga titik vertikal menunjukkan bahwa mengkliknya akan membuka menu.
Gambar 1. Menu dropdown dasar dengan dua item yang tercantum.

Platform API

Gunakan komponen DropdownMenu, DropdownMenuItem, dan IconButton untuk menerapkan menu dropdown kustom. Komponen DropdownMenu dan DropdownMenuItem digunakan untuk menampilkan item menu, sedangkan IconButton adalah pemicu untuk menampilkan atau menyembunyikan menu drop-down.

Parameter utama untuk komponen DropdownMenu mencakup hal berikut:

  • expanded: Menunjukkan apakah menu terlihat.
  • onDismissRequest: Digunakan untuk menangani penutupan menu.
  • content: Konten composable menu, biasanya berisi composable DropdownMenuItem.

Parameter utama untuk DropdownMenuItem mencakup hal berikut:

  • text: Menentukan konten yang ditampilkan di item menu.
  • onClick: Callback untuk menangani interaksi dengan item di menu.

Membuat menu dropdown dasar

Cuplikan berikut menunjukkan implementasi DropdownMenu minimal:

@Composable
fun MinimalDropdownMenu() {
    var expanded by remember { mutableStateOf(false) }
    Box(
        modifier = Modifier
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            DropdownMenuItem(
                text = { Text("Option 1") },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Option 2") },
                onClick = { /* Do something... */ }
            )
        }
    }
}
Menus.kt

Poin penting tentang kode

  • Menentukan DropdownMenu dasar yang berisi dua item menu.
  • Parameter expanded mengontrol visibilitas menu saat diperluas atau ditutup.
  • Parameter onDismissRequest menentukan callback yang dieksekusi saat pengguna menutup menu.
  • Composable DropdownMenuItem mewakili item yang dapat dipilih di menu dropdown.
  • IconButton memicu perluasan dan penyingkatan menu.

Hasil

Menu dropdown yang dipicu oleh ikon dengan tiga titik vertikal. Menu menampilkan dua opsi yang dapat dipilih, Opsi 1 dan Opsi 2.
Gambar 2. Menu dropdown minimal dengan hanya dua opsi.

Membuat menu dropdown yang lebih panjang

DropdownMenu dapat di-scroll secara default jika semua item menu tidak dapat ditampilkan sekaligus. Cuplikan berikut membuat menu dropdown yang lebih panjang dan dapat di-scroll:

@Composable
fun LongBasicDropdownMenu() {
    var expanded by remember { mutableStateOf(false) }
    // Placeholder list of 100 strings for demonstration
    val menuItemData = List(100) { "Option ${it + 1}" }

    Box(
        modifier = Modifier
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            menuItemData.forEach { option ->
                DropdownMenuItem(
                    text = { Text(option) },
                    onClick = { /* Do something... */ }
                )
            }
        }
    }
}
Menus.kt

Poin penting tentang kode

  • DropdownMenu dapat di-scroll jika total tinggi kontennya melebihi ruang yang tersedia. Kode ini membuat DropdownMenu yang dapat di-scroll yang menampilkan 100 item placeholder.
  • Loop forEach secara dinamis menghasilkan composable DropdownMenuItem. Item tidak dibuat secara lambat, yang berarti bahwa semua 100 item dropdown dibuat dan ada dalam komposisi.
  • IconButton memicu perluasan dan penyingkatan DropdownMenu saat diklik.
  • Lambda onClick dalam setiap DropdownMenuItem memungkinkan Anda menentukan tindakan yang dilakukan saat pengguna memilih item menu.

Hasil

Cuplikan kode sebelumnya menghasilkan menu yang dapat di-scroll berikut:

Menu drop-down dengan banyak opsi, yang memerlukan scroll untuk melihat semua item.
Gambar 3. Menu dropdown panjang yang dapat di-scroll.

Membuat menu dropdown yang lebih panjang dengan pemisah

Cuplikan berikut menunjukkan implementasi menu dropdown yang lebih canggih. Dalam cuplikan ini, ikon awal dan akhir ditambahkan ke item menu, dan pemisah memisahkan grup item menu.

@Composable
fun DropdownMenuWithDetails() {
    var expanded by remember { mutableStateOf(false) }

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            // First section
            DropdownMenuItem(
                text = { Text("Profile") },
                leadingIcon = { Icon(Icons.Outlined.Person, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Settings") },
                leadingIcon = { Icon(Icons.Outlined.Settings, contentDescription = null) },
                onClick = { /* Do something... */ }
            )

            HorizontalDivider()

            // Second section
            DropdownMenuItem(
                text = { Text("Send Feedback") },
                leadingIcon = { Icon(Icons.Outlined.Feedback, contentDescription = null) },
                trailingIcon = { Icon(Icons.AutoMirrored.Outlined.Send, contentDescription = null) },
                onClick = { /* Do something... */ }
            )

            HorizontalDivider()

            // Third section
            DropdownMenuItem(
                text = { Text("About") },
                leadingIcon = { Icon(Icons.Outlined.Info, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Help") },
                leadingIcon = { Icon(Icons.AutoMirrored.Outlined.Help, contentDescription = null) },
                trailingIcon = { Icon(Icons.AutoMirrored.Outlined.OpenInNew, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
        }
    }
}
Menus.kt

Kode ini menentukan DropdownMenu dalam Box.

Poin penting tentang kode

  • Parameter leadingIcon dan trailingIcon menambahkan ikon ke awal dan akhir DropdownMenuItem.
  • IconButton memicu perluasan menu.
  • DropdownMenu berisi beberapa composable DropdownMenuItem, yang masing-masing mewakili tindakan yang dapat dipilih.
  • Composable HorizontalDivider menyisipkan garis horizontal untuk memisahkan grup item menu.

Hasil

Cuplikan sebelumnya menghasilkan menu dropdown dengan ikon dan pemisah:

Menu dropdown dengan bagian untuk Profil, Setelan, Kirim Masukan, Tentang, dan
Gambar 4. Menu dropdown yang dibagi menjadi beberapa bagian dengan ikon di awal dan di akhir.

Referensi lainnya

  • Desain Material: Menu