সেভ করা পৃষ্ঠা গুছিয়ে রাখতে 'সংগ্রহ' ব্যবহার করুন
আপনার পছন্দ অনুযায়ী কন্টেন্ট সেভ করুন ও সঠিক বিভাগে রাখুন।
ড্রপ-ডাউন মেনু ব্যবহারকারীদের একটি আইকন, টেক্সট ক্ষেত্র বা অন্যান্য উপাদানে ক্লিক করতে দেয় এবং তারপর একটি অস্থায়ী পৃষ্ঠের বিকল্পগুলির একটি তালিকা থেকে নির্বাচন করে৷ এই নির্দেশিকাটি বর্ণনা করে কিভাবে বিভাজক এবং আইকন সহ মৌলিক মেনু এবং আরও জটিল মেনু উভয়ই তৈরি করা যায়।
চিত্র 1. তালিকাভুক্ত দুটি আইটেম সহ একটি মৌলিক ড্রপ-ডাউন মেনু।
API পৃষ্ঠ
একটি কাস্টম ড্রপ-ডাউন মেনু বাস্তবায়ন করতে DropdownMenu , DropdownMenuItem , এবং IconButton উপাদানগুলি ব্যবহার করুন৷ DropdownMenu এবং DropdownMenuItem উপাদানগুলি মেনু আইটেমগুলি প্রদর্শন করতে ব্যবহৃত হয়, যখন IconButton হল ড্রপ-ডাউন মেনু প্রদর্শন বা লুকানোর ট্রিগার।
DropdownMenu উপাদানের মূল পরামিতিগুলির মধ্যে নিম্নলিখিতগুলি অন্তর্ভুক্ত রয়েছে:
expanded : মেনুটি দৃশ্যমান কিনা তা নির্দেশ করে।
onDismissRequest : মেনু বরখাস্ত পরিচালনা করতে ব্যবহৃত হয়।
content : মেনুর কম্পোজযোগ্য বিষয়বস্তু, সাধারণত DropdownMenuItem আইটেম কম্পোজেবল থাকে।
DropdownMenuItem আইটেমের মূল পরামিতিগুলির মধ্যে নিম্নলিখিতগুলি অন্তর্ভুক্ত রয়েছে:
text : মেনু আইটেমে প্রদর্শিত বিষয়বস্তু সংজ্ঞায়িত করে।
onClick : মেনুতে থাকা আইটেমের সাথে মিথস্ক্রিয়া পরিচালনা করতে কলব্যাক করুন।
একটি মৌলিক ড্রপ-ডাউন মেনু তৈরি করুন
নিম্নলিখিত স্নিপেট একটি ন্যূনতম DropdownMenu বাস্তবায়ন প্রদর্শন করে:
@ComposablefunMinimalDropdownMenu(){varexpandedbyremember{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 মেনুটির সম্প্রসারণ এবং পতনকে ট্রিগার করে।
ফলাফল
চিত্র 2. মাত্র দুটি বিকল্প সহ একটি ন্যূনতম ড্রপ-ডাউন মেনু।
একটি দীর্ঘ ড্রপ-ডাউন মেনু তৈরি করুন
DropdownMenu ডিফল্টরূপে স্ক্রোলযোগ্য যদি সমস্ত মেনু আইটেম একবারে প্রদর্শিত না হয়। নিম্নলিখিত স্নিপেটটি একটি দীর্ঘ, স্ক্রোলযোগ্য ড্রপ-ডাউন মেনু তৈরি করে:
@ComposablefunLongBasicDropdownMenu(){varexpandedbyremember{mutableStateOf(false)}// Placeholder list of 100 strings for demonstrationvalmenuItemData=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টি ড্রপ-ডাউন আইটেম তৈরি করা হয়েছে এবং কম্পোজিশনে বিদ্যমান।
ক্লিক করা হলে IconButtonDropdownMenu সম্প্রসারণ এবং পতনকে ট্রিগার করে।
প্রতিটি DropdownMenuItem মধ্যে onClick ল্যাম্বডা আপনাকে ব্যবহারকারীর একটি মেনু আইটেম নির্বাচন করার সময় সম্পাদিত ক্রিয়াটি সংজ্ঞায়িত করতে দেয়।
ফলাফল
পূর্ববর্তী কোড স্নিপেট নিম্নলিখিত স্ক্রোলযোগ্য মেনু তৈরি করে:
চিত্র 3. একটি দীর্ঘ, স্ক্রোলযোগ্য ড্রপ-ডাউন মেনু।
ডিভাইডার সহ একটি দীর্ঘ ড্রপ-ডাউন মেনু তৈরি করুন
নিম্নলিখিত স্নিপেটটি একটি ড্রপ-ডাউন মেনুর আরও উন্নত বাস্তবায়ন দেখায়। এই স্নিপেটে, লিডিং এবং ট্রেইলিং আইকনগুলি মেনু আইটেমগুলিতে যোগ করা হয় এবং মেনু আইটেমগুলির পৃথক গোষ্ঠীগুলিকে ভাগ করে৷
@ComposablefunDropdownMenuWithDetails(){varexpandedbyremember{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 sectionDropdownMenuItem(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 sectionDropdownMenuItem(text={Text("Send Feedback")},leadingIcon={Icon(Icons.Outlined.Feedback,contentDescription=null)},trailingIcon={Icon(Icons.AutoMirrored.Outlined.Send,contentDescription=null)},onClick={/* Do something... */})HorizontalDivider()// Third sectionDropdownMenuItem(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... */})}}}
এই পৃষ্ঠার কন্টেন্ট ও কোডের নমুনাগুলি Content License-এ বর্ণিত লাইসেন্সের অধীনস্থ। Java এবং OpenJDK হল Oracle এবং/অথবা তার অ্যাফিলিয়েট সংস্থার রেজিস্টার্ড ট্রেডমার্ক।
2025-08-28 UTC-তে শেষবার আপডেট করা হয়েছে।
[[["সহজে বোঝা যায়","easyToUnderstand","thumb-up"],["আমার সমস্যার সমাধান হয়েছে","solvedMyProblem","thumb-up"],["অন্যান্য","otherUp","thumb-up"]],[["এতে আমার প্রয়োজনীয় তথ্য নেই","missingTheInformationINeed","thumb-down"],["খুব জটিল / অনেক ধাপ","tooComplicatedTooManySteps","thumb-down"],["পুরনো","outOfDate","thumb-down"],["অনুবাদ সংক্রান্ত সমস্যা","translationIssue","thumb-down"],["নমুনা / কোড সংক্রান্ত সমস্যা","samplesCodeIssue","thumb-down"],["অন্যান্য","otherDown","thumb-down"]],["2025-08-28 UTC-তে শেষবার আপডেট করা হয়েছে।"],[],[],null,["Drop-down menus let users click an icon, text field, or other component, and\nthen select from a list of options on a temporary surface. This guide describes\nhow to create both basic menus and more complex menus with dividers and icons.\n**Figure 1.** A basic drop-down menu with two items listed.\n\nAPI surface\n\nUse [`DropdownMenu`](/reference/kotlin/androidx/compose/material3/package-summary#DropdownMenu(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.unit.DpOffset,androidx.compose.foundation.ScrollState,androidx.compose.ui.window.PopupProperties,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.BorderStroke,kotlin.Function1)), [`DropdownMenuItem`](/reference/kotlin/androidx/compose/material3/package-summary#DropdownMenuItem(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.material3.MenuItemColors,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource)), and the [`IconButton`](/reference/kotlin/androidx/compose/material3/package-summary#IconButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.IconButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,kotlin.Function0))\ncomponents to implement a custom drop-down menu. The `DropdownMenu` and\n`DropdownMenuItem` components are used to display the menu items, while the\n`IconButton` is the trigger to display or hide the drop-down menu.\n\nThe key parameters for the `DropdownMenu` component include the following:\n\n- `expanded`: Indicates whether the menu is visible.\n- `onDismissRequest`: Used to handle menu dismissal.\n- `content`: The composable content of the menu, typically containing `DropdownMenuItem` composables.\n\nThe key parameters for `DropdownMenuItem` include the following:\n\n- `text`: Defines the content displayed in the menu item.\n- `onClick`: Callback to handle interaction with the item in the menu.\n\nCreate a basic drop-down menu\n\nThe following snippet demonstrates a minimal `DropdownMenu` implementation:\n\n\n```kotlin\n@Composable\nfun MinimalDropdownMenu() {\n var expanded by remember { mutableStateOf(false) }\n Box(\n modifier = Modifier\n .padding(16.dp)\n ) {\n IconButton(onClick = { expanded = !expanded }) {\n Icon(Icons.Default.MoreVert, contentDescription = \"More options\")\n }\n DropdownMenu(\n expanded = expanded,\n onDismissRequest = { expanded = false }\n ) {\n DropdownMenuItem(\n text = { Text(\"Option 1\") },\n onClick = { /* Do something... */ }\n )\n DropdownMenuItem(\n text = { Text(\"Option 2\") },\n onClick = { /* Do something... */ }\n )\n }\n }\n}https://github.com/android/snippets/blob/7a0ebbee11495f628cf9d574f6b6069c2867232a/compose/snippets/src/main/java/com/example/compose/snippets/components/Menus.kt#L98-L122\n```\n\n\u003cbr /\u003e\n\nKey points about the code\n\n- Defines a basic `DropdownMenu` containing two menu items.\n- The `expanded` parameter controls the menu's visibility as expanded or collapsed.\n- The `onDismissRequest` parameter defines a callback that executes when the user closes the menu.\n- The `DropdownMenuItem` composable represents selectable items in the drop-down menu.\n- An `IconButton` triggers the expansion and collapse of the menu.\n\nResult **Figure 2.** A minimal drop-down menu with only two options.\n\nCreate a longer drop-down menu\n\n`DropdownMenu` is scrollable by default if all the menu items can't be displayed\nat once. The following snippet creates a longer, scrollable drop-down menu:\n\n\n```kotlin\n@Composable\nfun LongBasicDropdownMenu() {\n var expanded by remember { mutableStateOf(false) }\n // Placeholder list of 100 strings for demonstration\n val menuItemData = List(100) { \"Option ${it + 1}\" }\n\n Box(\n modifier = Modifier\n .padding(16.dp)\n ) {\n IconButton(onClick = { expanded = !expanded }) {\n Icon(Icons.Default.MoreVert, contentDescription = \"More options\")\n }\n DropdownMenu(\n expanded = expanded,\n onDismissRequest = { expanded = false }\n ) {\n menuItemData.forEach { option -\u003e\n DropdownMenuItem(\n text = { Text(option) },\n onClick = { /* Do something... */ }\n )\n }\n }\n }\n}https://github.com/android/snippets/blob/7a0ebbee11495f628cf9d574f6b6069c2867232a/compose/snippets/src/main/java/com/example/compose/snippets/components/Menus.kt#L132-L157\n```\n\n\u003cbr /\u003e\n\nKey points about the code\n\n- The `DropdownMenu` is scrollable when the total height of its content exceeds the available space. This code creates a scrollable `DropdownMenu` that displays 100 placeholder items.\n- The `forEach` loop dynamically generates `DropdownMenuItem` composables. The items are not lazily created, which means that all 100 drop-down items are created and exist in the composition.\n- The `IconButton` triggers the expansion and collapse of the `DropdownMenu` when clicked.\n- The `onClick` lambda within each `DropdownMenuItem` lets you define the action performed when the user selects a menu item.\n\nResult\n\nThe preceding code snippet produces the following scrollable menu:\n**Figure 3.** A long, scrollable drop-down menu.\n\nCreate a longer drop-down menu with dividers\n\nThe following snippet shows a more advanced implementation of a drop-down menu.\nIn this snippet, leading and trailing icons are added to menu items, and\ndividers separate groups of menu items.\n\n\n```kotlin\n@Composable\nfun DropdownMenuWithDetails() {\n var expanded by remember { mutableStateOf(false) }\n\n Box(\n modifier = Modifier\n .fillMaxWidth()\n .padding(16.dp)\n ) {\n IconButton(onClick = { expanded = !expanded }) {\n Icon(Icons.Default.MoreVert, contentDescription = \"More options\")\n }\n DropdownMenu(\n expanded = expanded,\n onDismissRequest = { expanded = false }\n ) {\n // First section\n DropdownMenuItem(\n text = { Text(\"Profile\") },\n leadingIcon = { Icon(Icons.Outlined.Person, contentDescription = null) },\n onClick = { /* Do something... */ }\n )\n DropdownMenuItem(\n text = { Text(\"Settings\") },\n leadingIcon = { Icon(Icons.Outlined.Settings, contentDescription = null) },\n onClick = { /* Do something... */ }\n )\n\n HorizontalDivider()\n\n // Second section\n DropdownMenuItem(\n text = { Text(\"Send Feedback\") },\n leadingIcon = { Icon(Icons.Outlined.Feedback, contentDescription = null) },\n trailingIcon = { Icon(Icons.AutoMirrored.Outlined.Send, contentDescription = null) },\n onClick = { /* Do something... */ }\n )\n\n HorizontalDivider()\n\n // Third section\n DropdownMenuItem(\n text = { Text(\"About\") },\n leadingIcon = { Icon(Icons.Outlined.Info, contentDescription = null) },\n onClick = { /* Do something... */ }\n )\n DropdownMenuItem(\n text = { Text(\"Help\") },\n leadingIcon = { Icon(Icons.AutoMirrored.Outlined.Help, contentDescription = null) },\n trailingIcon = { Icon(Icons.AutoMirrored.Outlined.OpenInNew, contentDescription = null) },\n onClick = { /* Do something... */ }\n )\n }\n }\n}https://github.com/android/snippets/blob/7a0ebbee11495f628cf9d574f6b6069c2867232a/compose/snippets/src/main/java/com/example/compose/snippets/components/Menus.kt#L167-L221\n```\n\n\u003cbr /\u003e\n\nThis code defines a `DropdownMenu` within a `Box`.\n\nKey points about the code\n\n- The `leadingIcon` and `trailingIcon` parameters add icons to the start and end of a `DropdownMenuItem`.\n- An `IconButton` triggers the menu's expansion.\n- The `DropdownMenu` contains several `DropdownMenuItem` composables, each representing a selectable action.\n- [`HorizontalDivider`](/reference/kotlin/androidx/compose/material3/package-summary#HorizontalDivider(androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color)) composables insert a horizontal line to separate groups of menu items.\n\nResult\n\nThe preceding snippet produces a drop-down menu with icons and dividers:\n**Figure 4.** A drop-down menu divided into sections with leading and trailing icons.\n\nAdditional resources\n\n- Material Design: [Menus](https://m3.material.io/components/menus)"]]