Menu

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

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

Platform API

Gunakan komponen DropdownMenu, DropdownMenuItem, dan IconButton untuk menerapkan menu drop-down 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 meliputi:

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

Parameter utama untuk DropdownMenuItem meliputi hal berikut:

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

Membuat menu drop-down 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

  • Mendefinisikan DropdownMenu dasar yang berisi dua item menu.
  • Parameter expanded mengontrol visibilitas menu sebagai diperluas atau diciutkan.
  • Parameter onDismissRequest menentukan callback yang dieksekusi saat pengguna menutup menu.
  • Composable DropdownMenuItem merepresentasikan item yang dapat dipilih di menu drop-down.
  • IconButton memicu perluasan dan penciutan 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 drop-down 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 drop-down 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 membuat composable DropdownMenuItem secara dinamis. Item tidak dibuat secara lambat, yang berarti semua 100 item drop-down dibuat dan ada dalam komposisi.
  • IconButton memicu peluasan dan penciutan 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 dropdown dengan banyak opsi, yang memerlukan pen-scroll-an untuk melihat semua item.
Gambar 3. Menu drop-down panjang yang dapat di-scroll.

Membuat menu drop-down yang lebih panjang dengan pemisah

Cuplikan berikut menunjukkan implementasi menu drop-down yang lebih canggih. Dalam cuplikan ini, ikon di 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 merepresentasikan tindakan yang dapat dipilih.
  • Composable HorizontalDivider menyisipkan garis horizontal untuk memisahkan grup item menu.

Hasil

Cuplikan sebelumnya menghasilkan menu drop-down dengan ikon dan pemisah:

Menu dropdown dengan bagian untuk Profil, Setelan, Kirim Masukan, Tentang, dan Bantuan. Setiap opsi memiliki ikon, seperti ikon orang untuk Profil.
Gambar 4. Menu drop-down yang dibagi menjadi beberapa bagian dengan ikon di awal dan akhir.

Referensi lainnya

  • Desain Material: Menu