ड्रॉप-डाउन मेन्यू की मदद से, उपयोगकर्ता किसी आइकॉन, टेक्स्ट फ़ील्ड या अन्य कॉम्पोनेंट पर क्लिक कर सकते हैं. इसके बाद, वे अस्थायी तौर पर दिखने वाली स्क्रीन पर विकल्पों की सूची में से कोई विकल्प चुन सकते हैं. इस गाइड में, बुनियादी मेन्यू और डिवाइडर और आइकॉन वाले ज़्यादा जटिल मेन्यू, दोनों बनाने का तरीका बताया गया है.

एपीआई सरफेस
पसंद के मुताबिक ड्रॉप-डाउन मेन्यू लागू करने के लिए, DropdownMenu
, DropdownMenuItem
, और IconButton
कॉम्पोनेंट का इस्तेमाल करें. DropdownMenu
और DropdownMenuItem
कॉम्पोनेंट का इस्तेमाल, मेन्यू आइटम दिखाने के लिए किया जाता है. वहीं, IconButton
का इस्तेमाल, ड्रॉप-डाउन मेन्यू को दिखाने या छिपाने के लिए किया जाता है.
DropdownMenu
कॉम्पोनेंट के मुख्य पैरामीटर में ये शामिल हैं:
expanded
: इससे पता चलता है कि मेन्यू दिख रहा है या नहीं.onDismissRequest
: इस कुकी का इस्तेमाल, मेन्यू को बंद करने के लिए किया जाता है.content
: मेन्यू का कंपोज़ेबल कॉन्टेंट. इसमें आम तौर परDropdownMenuItem
कंपोज़ेबल शामिल होते हैं.
DropdownMenuItem
के मुख्य पैरामीटर में ये शामिल हैं:
text
: इससे मेन्यू आइटम में दिखने वाले कॉन्टेंट के बारे में पता चलता है.onClick
: मेन्यू में मौजूद आइटम के साथ इंटरैक्शन को मैनेज करने के लिए कॉलबैक.
बुनियादी ड्रॉप-डाउन मेन्यू बनाना
यहां दिए गए स्निपेट में, DropdownMenu
को लागू करने का एक सामान्य उदाहरण दिखाया गया है:
@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... */ } ) } } }
कोड के बारे में अहम जानकारी
- इसमें दो मेन्यू आइटम वाला एक सामान्य
DropdownMenu
तय किया गया है. expanded
पैरामीटर से यह कंट्रोल किया जाता है कि मेन्यू को बड़ा करके दिखाया जाए या छोटा करके.onDismissRequest
पैरामीटर, एक कॉलबैक तय करता है. यह कॉलबैक तब काम करता है, जब उपयोगकर्ता मेन्यू बंद करता है.DropdownMenuItem
कंपोज़ेबल, ड्रॉप-डाउन मेन्यू में चुने जा सकने वाले आइटम दिखाता है.IconButton
से मेन्यू को बड़ा और छोटा किया जा सकता है.
नतीजा

लंबा ड्रॉप-डाउन मेन्यू बनाना
अगर सभी मेन्यू आइटम एक साथ नहीं दिखाए जा सकते, तो DropdownMenu
डिफ़ॉल्ट रूप से स्क्रोल किया जा सकता है. यहां दिया गया स्निपेट, स्क्रोल किए जा सकने वाला लंबा ड्रॉप-डाउन मेन्यू बनाता है:
@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... */ } ) } } } }
कोड के बारे में अहम जानकारी
DropdownMenu
को तब स्क्रोल किया जा सकता है, जब उसके कॉन्टेंट की कुल ऊंचाई, उपलब्ध जगह से ज़्यादा हो. इस कोड से स्क्रोल किया जा सकने वालाDropdownMenu
बनाया जाता है. इसमें 100 प्लेसहोल्डर आइटम दिखते हैं.forEach
लूप,DropdownMenuItem
कंपोज़ेबल को डाइनैमिक रूप से जनरेट करता है. आइटम तुरंत नहीं बनाए जाते. इसका मतलब है कि ड्रॉप-डाउन के सभी 100 आइटम बनाए जाते हैं और कंपोज़िशन में मौजूद होते हैं.IconButton
पर क्लिक करने से,DropdownMenu
बड़ा और छोटा होता है.- हर
DropdownMenuItem
में मौजूदonClick
लैम्डा की मदद से, यह तय किया जा सकता है कि जब उपयोगकर्ता कोई मेन्यू आइटम चुने, तो कौनसा ऐक्शन किया जाए.
नतीजा
ऊपर दिया गया कोड स्निपेट, स्क्रोल किए जा सकने वाले इस मेन्यू को जनरेट करता है:

डिवाइडर के साथ लंबा ड्रॉप-डाउन मेन्यू बनाना
नीचे दिए गए स्निपेट में, ड्रॉप-डाउन मेन्यू को लागू करने का ज़्यादा बेहतर तरीका दिखाया गया है. इस स्निपेट में, मेन्यू आइटम में लीडिंग और ट्रेलिंग आइकॉन जोड़े गए हैं. साथ ही, डिवाइडर मेन्यू आइटम के ग्रुप को अलग करते हैं.
@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... */ } ) } } }
इस कोड से, Box
में मौजूद DropdownMenu
के बारे में पता चलता है.
कोड के बारे में अहम जानकारी
leadingIcon
औरtrailingIcon
पैरामीटर,DropdownMenuItem
की शुरुआत और आखिर में आइकॉन जोड़ते हैं.IconButton
से मेन्यू बड़ा हो जाता है.DropdownMenu
में कईDropdownMenuItem
कंपोज़ेबल होते हैं. इनमें से हर एक, चुनी जा सकने वाली कार्रवाई को दिखाता है.HorizontalDivider
कंपोज़ेबल, मेन्यू आइटम के ग्रुप को अलग करने के लिए हॉरिज़ॉन्टल लाइन डालते हैं.
नतीजा
ऊपर दिया गया स्निपेट, आइकॉन और डिवाइडर वाला ड्रॉप-डाउन मेन्यू बनाता है:

अन्य संसाधन
- मटीरियल डिज़ाइन: मेन्यू