کشویی
پایه کشویی

منوهای کشویی یک عنصر رابط کاربری اساسی هستند که به کاربران اجازه می‌دهند از یک لیست گزینه انتخاب کنند و گزینه‌ها را در یک فرمت جمع‌پذیر نمایش دهند. این بخش شامل موارد زیر می‌شود: - ایجاد و استفاده از منوهای پایه در برنامه‌های وب شما با استفاده از مؤلفه "منو". - نمونه‌هایی از برنامه‌هایی که از مؤلفه منو استفاده می‌کنند.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv
    data-tw-merge
    data-tw-placement="bottom-start"
    class="dropdown relative"
HTMLCloseTagHTMLOpenTagbutton
    data-tw-merge
    data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer cursor-pointer"
HTMLCloseTagنمایش منوی کشوییHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagdiv
        data-transition
        data-selector=".show"
        data-enter="transition-all ease-linear duration-150"
        data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
        data-enter-to="!mt-1 visible opacity-100 translate-y-0"
        data-leave="transition-all ease-linear duration-150"
        data-leave-from="!mt-1 visible opacity-100 translate-y-0"
        data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
        class="dropdown-menu absolute z-[9999] hidden"
    HTMLCloseTagHTMLOpenTagdiv
        data-tw-merge
        class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
    HTMLCloseTag
        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagمنوی کشویی جدیدHTMLOpenTag/aHTMLCloseTag
                                                        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagحذف کشوییHTMLOpenTag/aHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
            
        

با استفاده از کد ارائه شده، آزمایش کنید و آن را برای تطبیق با نیازهای خاص خود سفارشی کنید. با استفاده از کشویی‌ها، می‌توانید تجربه کاربری را با ساده‌تر کردن ناوبری و تعامل درون اپلیکیشن خود بهبود ببخشید.

سربرگ و پاورقی کشویی

منوهای کشویی اغلب نیازمند عناصر اضافی مانند سربرگ‌ها و پاورقی‌ها هستند تا زمینه یا اطلاعات اضافی را ارائه دهند. این بخش به ایجاد منوها به همراه سربرگ و پاورقی با استفاده از مؤلفه "منو" می‌پردازد. مؤلفه

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv
    data-tw-merge
    data-tw-placement="bottom-start"
    class="dropdown relative"
HTMLCloseTagHTMLOpenTagbutton
    data-tw-merge
    data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer cursor-pointer"
HTMLCloseTagنمایش منوی کشوییHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagdiv
        data-transition
        data-selector=".show"
        data-enter="transition-all ease-linear duration-150"
        data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
        data-enter-to="!mt-1 visible opacity-100 translate-y-0"
        data-leave="transition-all ease-linear duration-150"
        data-leave-from="!mt-1 visible opacity-100 translate-y-0"
        data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
        class="dropdown-menu absolute z-[9999] hidden"
    HTMLCloseTagHTMLOpenTagdiv
        data-tw-merge
        class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-56"
    HTMLCloseTag
        HTMLOpenTagdiv class="p-2 font-medium"HTMLCloseTag
    صادر کردن گزینه‌ها
HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    class="h-px my-2 -mx-2 bg-slate-200/60 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="activity"
    class="stroke-[1] w-5 h-5 w-4 h-4 rtl:ml-2 ltr:mr-2 w-4 h-4 rtl:ml-2 ltr:mr-2"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                            انگلیسیHTMLOpenTag/aHTMLCloseTag
                                                        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="box"
    class="stroke-[1] w-5 h-5 w-4 h-4 rtl:ml-2 ltr:mr-2 w-4 h-4 rtl:ml-2 ltr:mr-2"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                            اندونزی
                                                            HTMLOpenTagdiv
                                                                class="px-1 rtl:mr-auto ltr:ml-auto text-xs text-white rounded-full bg-danger"HTMLCloseTag
                                                                10
                                                            HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/aHTMLCloseTag
                                                        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="layout"
    class="stroke-[1] w-5 h-5 w-4 h-4 rtl:ml-2 ltr:mr-2 w-4 h-4 rtl:ml-2 ltr:mr-2"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                            انگلیسیHTMLOpenTag/aHTMLCloseTag
                                                        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="sidebar"
    class="stroke-[1] w-5 h-5 w-4 h-4 rtl:ml-2 ltr:mr-2 w-4 h-4 rtl:ml-2 ltr:mr-2"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                            اندونزیHTMLOpenTag/aHTMLCloseTag
                                                        HTMLOpenTagdiv
    class="h-px my-2 -mx-2 bg-slate-200/60 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="flex p-1"HTMLCloseTag
    HTMLOpenTagbutton
    data-tw-merge
    type="button" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary px-2 py-1 px-2 py-1"
HTMLCloseTagتنظیماتHTMLOpenTag/buttonHTMLCloseTag
                                                            HTMLOpenTagbutton
    data-tw-merge
    type="button" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 [&:hover:not(:disabled)]:bg-slate-100 [&:hover:not(:disabled)]:border-slate-100 [&:hover:not(:disabled)]:dark:border-darkmode-300/80 [&:hover:not(:disabled)]:dark:bg-darkmode-300/80 px-2 py-1 rtl:mr-auto ltr:ml-auto px-2 py-1 rtl:mr-auto ltr:ml-auto"
HTMLCloseTagمشاهده پروفایلHTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
            
        

کشویی‌ها با سربرگ‌ها و پاورقی‌ها یک ساختار سازمان‌یافته برای ارائه گزینه‌ها و اطلاعات به کاربران فراهم می‌کنند. آنها به طور خاص مفید هستند در مواقعی که نیاز دارید به گروه‌بندی موارد مرتبط یا ارائه زمینه‌ای اضافی.

آیکون کشویی

آیکون‌های کشویی می‌توانند نشانه‌های بصری اضافه کنند و تجربه کاربر را بهبود بخشند، به ویژه هنگام انتخاب گزینه‌ها. این بخش به ایجاد منوها با آیکون‌ها با استفاده از مؤلفه "منو" می‌پردازد.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv
    data-tw-merge
    data-tw-placement="bottom-start"
    class="dropdown relative"
HTMLCloseTagHTMLOpenTagbutton
    data-tw-merge
    data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer cursor-pointer"
HTMLCloseTagنمایش منوی کشوییHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagdiv
        data-transition
        data-selector=".show"
        data-enter="transition-all ease-linear duration-150"
        data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
        data-enter-to="!mt-1 visible opacity-100 translate-y-0"
        data-leave="transition-all ease-linear duration-150"
        data-leave-from="!mt-1 visible opacity-100 translate-y-0"
        data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
        class="dropdown-menu absolute z-[9999] hidden"
    HTMLCloseTagHTMLOpenTagdiv
        data-tw-merge
        class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-48"
    HTMLCloseTag
        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="edit2"
    class="stroke-[1] w-5 h-5 w-4 h-4 rtl:ml-2 ltr:mr-2 w-4 h-4 rtl:ml-2 ltr:mr-2"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
 New
                                                            کشوییHTMLOpenTag/aHTMLCloseTag
                                                        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="trash"
    class="stroke-[1] w-5 h-5 w-4 h-4 rtl:ml-2 ltr:mr-2 w-4 h-4 rtl:ml-2 ltr:mr-2"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                            حذف کشوییHTMLOpenTag/aHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
            
        

آیکون‌های کشویی به کاربران کمک بصری می‌کنند هنگامی که گزینه‌ها را انتخاب می‌کنند و رابط کاربری را بیشتر خرد می‌کنند و کاربرپسندتر می‌سازند. با آزمایش آیکون‌های مختلف و اعمال استایل‌های مختلف، منوهایی را طراحی کنید که بهترین مناسبی برای طراحی و نیازهای کاربر شما هستند.

منوی کشویی با دکمه بستن

کشویی‌هایی که دارای دکمه‌های بستن هستند، روشی کاربرپسند برای ارائه گزینه‌ها هستند، زیرا به کاربران اجازه می‌دهند تا در صورت لزوم منو را ببندند. این بخش به ایجاد منوها با دکمه بستن با استفاده از مؤلفه "منو" می‌پردازد.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    data-tw-placement="bottom-start"
    class="dropdown relative inline-block"
HTMLCloseTagHTMLOpenTagbutton
    data-tw-merge
    data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer cursor-pointer"
HTMLCloseTagفیلتر کشویی
                                                            HTMLOpenTagi
    data-tw-merge
    data-lucide="chevron-down"
    class="stroke-[1] w-5 h-5 w-4 h-4 rtl:mr-2 ltr:ml-2 w-4 h-4 rtl:mr-2 ltr:ml-2"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTag
                                                        HTMLOpenTagdiv
        data-transition
        data-selector=".show"
        data-enter="transition-all ease-linear duration-150"
        data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
        data-enter-to="!mt-1 visible opacity-100 translate-y-0"
        data-leave="transition-all ease-linear duration-150"
        data-leave-from="!mt-1 visible opacity-100 translate-y-0"
        data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
        class="dropdown-menu absolute z-[9999] hidden"
    HTMLCloseTagHTMLOpenTagdiv
        data-tw-merge
        class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600"
    HTMLCloseTag
        HTMLOpenTagdiv class="p-2"HTMLCloseTag
                                                                HTMLOpenTagdivHTMLCloseTag
                                                                    HTMLOpenTagdiv class="text-xs rtl:text-right ltr:text-left"HTMLCloseTagFromHTMLOpenTag/divHTMLCloseTag
                                                                    HTMLOpenTaginput
    data-tw-merge
    type="text" placeholder="example@gmail.com" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 flex-1 mt-2 flex-1 mt-2"
HTMLCloseTag
                                                                HTMLOpenTag/divHTMLCloseTag
                                                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                                    HTMLOpenTagdiv class="text-xs rtl:text-right ltr:text-left"HTMLCloseTagToHTMLOpenTag/divHTMLCloseTag
                                                                    HTMLOpenTaginput
    data-tw-merge
    type="text" placeholder="example@gmail.com" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 flex-1 mt-2 flex-1 mt-2"
HTMLCloseTag
                                                                HTMLOpenTag/divHTMLCloseTag
                                                                HTMLOpenTagdiv class="flex items-center mt-3"HTMLCloseTag
                                                                    HTMLOpenTagbutton
    data-tw-merge
    data-dismiss="dropdown" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 [&:hover:not(:disabled)]:bg-slate-100 [&:hover:not(:disabled)]:border-slate-100 [&:hover:not(:disabled)]:dark:border-darkmode-300/80 [&:hover:not(:disabled)]:dark:bg-darkmode-300/80 w-32 rtl:mr-auto ltr:ml-auto w-32 rtl:mr-auto ltr:ml-auto"
HTMLCloseTagCloseHTMLOpenTag/buttonHTMLCloseTag
                                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary w-32 rtl:mr-2 ltr:ml-2 w-32 rtl:mr-2 ltr:ml-2"
HTMLCloseTagSearchHTMLOpenTag/buttonHTMLCloseTag
                                                                HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

کشویی‌هایی که دارای دکمه‌های بستن هستند، تجربه کاربری بهتری ارائه می‌دهند، زیرا به کاربران امکان می‌دهند منو را به راحتی ببندند زمانی که دیگر نیازی به آن ندارند. شما می‌توانید ظاهر و رفتار دکمه بستن را بر اساس نیازهای خود سفارشی کنید تا بهترین تطابق را با ظاهر و عملکرد منو داشته باشد.

منوی کشویی با اسکرول

منوهای مرتبط زمانی که لیست طولانی‌ای دارید، برای نمایش در یک منوی کشویی بسیار مفید هستند. با محدود کردن ارتفاع منو و فعال کردن اسکرول، می‌توانید یک رابط کاربری کمتر و کاربرپسندتر ارائه دهید. این بخش به ایجاد منوهای مرتبط با استفاده از مؤلفه "منو" می‌پردازد.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv
    data-tw-merge
    data-tw-placement="bottom-start"
    class="dropdown relative"
HTMLCloseTagHTMLOpenTagbutton
    data-tw-merge
    data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer cursor-pointer"
HTMLCloseTagنمایش منوی کشوییHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagdiv
        data-transition
        data-selector=".show"
        data-enter="transition-all ease-linear duration-150"
        data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
        data-enter-to="!mt-1 visible opacity-100 translate-y-0"
        data-leave="transition-all ease-linear duration-150"
        data-leave-from="!mt-1 visible opacity-100 translate-y-0"
        data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
        class="dropdown-menu absolute z-[9999] hidden"
    HTMLCloseTagHTMLOpenTagdiv
        data-tw-merge
        class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40 h-32 overflow-y-auto"
    HTMLCloseTag
        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagژانویهHTMLOpenTag/aHTMLCloseTag
                                                        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagفوریهHTMLOpenTag/aHTMLCloseTag
                                                        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagمارسHTMLOpenTag/aHTMLCloseTag
                                                        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagژوئنHTMLOpenTag/aHTMLCloseTag
                                                        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagجولایHTMLOpenTag/aHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
            
        

منوهای مرتبط یک راه حل عملی هستند زمانی که با لیست‌های طولانی از گزینه‌ها در یک فضای محدود روبرو می‌شوید. با فعال کردن اسکرول، می‌توانید منو را کم حجم و کاربرپسند نگه دارید. با سفارشی‌سازی ظاهر و عملکرد منو، آن را با سبک و نیازهای برنامه‌ی شما هماهنگ کنید.

سربرگ و آیکون کشویی

سربرگ‌ها و آیکون‌های کشویی یک راه عالی برای دسته‌بندی و بهبود بصری منوهای کشویی شما هستند. این بخش به ایجاد منوهای با سربرگ و آیکون با استفاده از مؤلفه "منو" می‌پردازد.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv
    data-tw-merge
    data-tw-placement="bottom-start"
    class="dropdown relative"
HTMLCloseTagHTMLOpenTagbutton
    data-tw-merge
    data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer cursor-pointer"
HTMLCloseTagنمایش منوی کشوییHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagdiv
        data-transition
        data-selector=".show"
        data-enter="transition-all ease-linear duration-150"
        data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
        data-enter-to="!mt-1 visible opacity-100 translate-y-0"
        data-leave="transition-all ease-linear duration-150"
        data-leave-from="!mt-1 visible opacity-100 translate-y-0"
        data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
        class="dropdown-menu absolute z-[9999] hidden"
    HTMLCloseTagHTMLOpenTagdiv
        data-tw-merge
        class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
    HTMLCloseTag
        HTMLOpenTagdiv class="p-2 font-medium"HTMLCloseTag
    ابزارهای خروجی گرفتن
HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    class="h-px my-2 -mx-2 bg-slate-200/60 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="printer"
    class="stroke-[1] w-5 h-5 w-4 h-4 rtl:ml-2 ltr:mr-2 w-4 h-4 rtl:ml-2 ltr:mr-2"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                            چاپHTMLOpenTag/aHTMLCloseTag
                                                        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="external-link"
    class="stroke-[1] w-5 h-5 w-4 h-4 rtl:ml-2 ltr:mr-2 w-4 h-4 rtl:ml-2 ltr:mr-2"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                            اکسلHTMLOpenTag/aHTMLCloseTag
                                                        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="file-text"
    class="stroke-[1] w-5 h-5 w-4 h-4 rtl:ml-2 ltr:mr-2 w-4 h-4 rtl:ml-2 ltr:mr-2"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                            سی‌اس‌ویHTMLOpenTag/aHTMLCloseTag
                                                        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="archive"
    class="stroke-[1] w-5 h-5 w-4 h-4 rtl:ml-2 ltr:mr-2 w-4 h-4 rtl:ml-2 ltr:mr-2"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                            پی‌دی‌افHTMLOpenTag/aHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
            
        

سربرگ‌ها و آیکون‌های کشویی یک روش واضح و قابل مشاهده برای دسته‌بندی و ارائه موارد منو گروه‌بندی شده هستند. شما می‌توانید ظاهر و رفتار سربرگ‌ها، آیکون‌ها و موارد منو را با سبک برنامه‌ی خود هماهنگ کرده و به نیازهای خود پاسخ دهید.

مکان قرارگیری منوی کشویی

قرارگیری کشویی به شما اجازه می‌دهد تا کنترل کنید که منو کشویی نسبت به المان محرکی که آن را فعال می‌کند، کجا ظاهر شود. این بخش به نحوه تعیین مکان منو کشویی با استفاده از مؤلفه "منو" می‌پردازد.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    data-tw-placement="top-start"
    class="dropdown relative inline-block mb-2 rtl:ml-1 ltr:mr-1"
HTMLCloseTagHTMLOpenTagbutton
    data-tw-merge
    data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
HTMLCloseTagشروع بالاHTMLOpenTag/buttonHTMLCloseTag
                                                        HTMLOpenTagdiv
        data-transition
        data-selector=".show"
        data-enter="transition-all ease-linear duration-150"
        data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
        data-enter-to="!mt-1 visible opacity-100 translate-y-0"
        data-leave="transition-all ease-linear duration-150"
        data-leave-from="!mt-1 visible opacity-100 translate-y-0"
        data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
        class="dropdown-menu absolute z-[9999] hidden"
    HTMLCloseTagHTMLOpenTagdiv
        data-tw-merge
        class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
    HTMLCloseTag
        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagمنوی کشویی جدیدHTMLOpenTag/aHTMLCloseTag
                                                            HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagحذف کشوییHTMLOpenTag/aHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    data-tw-placement="top"
    class="dropdown relative inline-block mb-2 rtl:ml-1 ltr:mr-1"
HTMLCloseTagHTMLOpenTagbutton
    data-tw-merge
    data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
HTMLCloseTagبالاHTMLOpenTag/buttonHTMLCloseTag
                                                        HTMLOpenTagdiv
        data-transition
        data-selector=".show"
        data-enter="transition-all ease-linear duration-150"
        data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
        data-enter-to="!mt-1 visible opacity-100 translate-y-0"
        data-leave="transition-all ease-linear duration-150"
        data-leave-from="!mt-1 visible opacity-100 translate-y-0"
        data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
        class="dropdown-menu absolute z-[9999] hidden"
    HTMLCloseTagHTMLOpenTagdiv
        data-tw-merge
        class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
    HTMLCloseTag
        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagمنوی کشویی جدیدHTMLOpenTag/aHTMLCloseTag
                                                            HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagحذف کشوییHTMLOpenTag/aHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    data-tw-placement="top-end"
    class="dropdown relative inline-block mb-2 rtl:ml-1 ltr:mr-1"
HTMLCloseTagHTMLOpenTagbutton
    data-tw-merge
    data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
HTMLCloseTagبالا انتهاHTMLOpenTag/buttonHTMLCloseTag
                                                        HTMLOpenTagdiv
        data-transition
        data-selector=".show"
        data-enter="transition-all ease-linear duration-150"
        data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
        data-enter-to="!mt-1 visible opacity-100 translate-y-0"
        data-leave="transition-all ease-linear duration-150"
        data-leave-from="!mt-1 visible opacity-100 translate-y-0"
        data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
        class="dropdown-menu absolute z-[9999] hidden"
    HTMLCloseTagHTMLOpenTagdiv
        data-tw-merge
        class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
    HTMLCloseTag
        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagمنوی کشویی جدیدHTMLOpenTag/aHTMLCloseTag
                                                            HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagحذف کشوییHTMLOpenTag/aHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    data-tw-placement="right-start"
    class="dropdown relative inline-block mb-2 rtl:ml-1 ltr:mr-1"
HTMLCloseTagHTMLOpenTagbutton
    data-tw-merge
    data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
HTMLCloseTagشروع راستHTMLOpenTag/buttonHTMLCloseTag
                                                        HTMLOpenTagdiv
        data-transition
        data-selector=".show"
        data-enter="transition-all ease-linear duration-150"
        data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
        data-enter-to="!mt-1 visible opacity-100 translate-y-0"
        data-leave="transition-all ease-linear duration-150"
        data-leave-from="!mt-1 visible opacity-100 translate-y-0"
        data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
        class="dropdown-menu absolute z-[9999] hidden"
    HTMLCloseTagHTMLOpenTagdiv
        data-tw-merge
        class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
    HTMLCloseTag
        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagمنوی کشویی جدیدHTMLOpenTag/aHTMLCloseTag
                                                            HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagحذف کشوییHTMLOpenTag/aHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    data-tw-placement="right"
    class="dropdown relative inline-block mb-2 rtl:ml-1 ltr:mr-1"
HTMLCloseTagHTMLOpenTagbutton
    data-tw-merge
    data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
HTMLCloseTagراستHTMLOpenTag/buttonHTMLCloseTag
                                                        HTMLOpenTagdiv
        data-transition
        data-selector=".show"
        data-enter="transition-all ease-linear duration-150"
        data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
        data-enter-to="!mt-1 visible opacity-100 translate-y-0"
        data-leave="transition-all ease-linear duration-150"
        data-leave-from="!mt-1 visible opacity-100 translate-y-0"
        data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
        class="dropdown-menu absolute z-[9999] hidden"
    HTMLCloseTagHTMLOpenTagdiv
        data-tw-merge
        class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
    HTMLCloseTag
        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagمنوی کشویی جدیدHTMLOpenTag/aHTMLCloseTag
                                                            HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagحذف کشوییHTMLOpenTag/aHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    data-tw-placement="right-end"
    class="dropdown relative inline-block mb-2 rtl:ml-1 ltr:mr-1"
HTMLCloseTagHTMLOpenTagbutton
    data-tw-merge
    data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
HTMLCloseTagراست انتهاHTMLOpenTag/buttonHTMLCloseTag
                                                        HTMLOpenTagdiv
        data-transition
        data-selector=".show"
        data-enter="transition-all ease-linear duration-150"
        data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
        data-enter-to="!mt-1 visible opacity-100 translate-y-0"
        data-leave="transition-all ease-linear duration-150"
        data-leave-from="!mt-1 visible opacity-100 translate-y-0"
        data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
        class="dropdown-menu absolute z-[9999] hidden"
    HTMLCloseTagHTMLOpenTagdiv
        data-tw-merge
        class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
    HTMLCloseTag
        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagمنوی کشویی جدیدHTMLOpenTag/aHTMLCloseTag
                                                            HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagحذف کشوییHTMLOpenTag/aHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    data-tw-placement="bottom-start"
    class="dropdown relative inline-block mb-2 rtl:ml-1 ltr:mr-1"
HTMLCloseTagHTMLOpenTagbutton
    data-tw-merge
    data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
HTMLCloseTagپایان پایینHTMLOpenTag/buttonHTMLCloseTag
                                                        HTMLOpenTagdiv
        data-transition
        data-selector=".show"
        data-enter="transition-all ease-linear duration-150"
        data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
        data-enter-to="!mt-1 visible opacity-100 translate-y-0"
        data-leave="transition-all ease-linear duration-150"
        data-leave-from="!mt-1 visible opacity-100 translate-y-0"
        data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
        class="dropdown-menu absolute z-[9999] hidden"
    HTMLCloseTagHTMLOpenTagdiv
        data-tw-merge
        class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
    HTMLCloseTag
        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagمنوی کشویی جدیدHTMLOpenTag/aHTMLCloseTag
                                                            HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagحذف کشوییHTMLOpenTag/aHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    data-tw-placement="bottom"
    class="dropdown relative inline-block mb-2 rtl:ml-1 ltr:mr-1"
HTMLCloseTagHTMLOpenTagbutton
    data-tw-merge
    data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
HTMLCloseTagپایینHTMLOpenTag/buttonHTMLCloseTag
                                                        HTMLOpenTagdiv
        data-transition
        data-selector=".show"
        data-enter="transition-all ease-linear duration-150"
        data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
        data-enter-to="!mt-1 visible opacity-100 translate-y-0"
        data-leave="transition-all ease-linear duration-150"
        data-leave-from="!mt-1 visible opacity-100 translate-y-0"
        data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
        class="dropdown-menu absolute z-[9999] hidden"
    HTMLCloseTagHTMLOpenTagdiv
        data-tw-merge
        class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
    HTMLCloseTag
        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagمنوی کشویی جدیدHTMLOpenTag/aHTMLCloseTag
                                                            HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagحذف کشوییHTMLOpenTag/aHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    data-tw-placement="bottom-start"
    class="dropdown relative inline-block mb-2 rtl:ml-1 ltr:mr-1"
HTMLCloseTagHTMLOpenTagbutton
    data-tw-merge
    data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
HTMLCloseTagپایین ابتداHTMLOpenTag/buttonHTMLCloseTag
                                                        HTMLOpenTagdiv
        data-transition
        data-selector=".show"
        data-enter="transition-all ease-linear duration-150"
        data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
        data-enter-to="!mt-1 visible opacity-100 translate-y-0"
        data-leave="transition-all ease-linear duration-150"
        data-leave-from="!mt-1 visible opacity-100 translate-y-0"
        data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
        class="dropdown-menu absolute z-[9999] hidden"
    HTMLCloseTagHTMLOpenTagdiv
        data-tw-merge
        class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
    HTMLCloseTag
        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagمنوی کشویی جدیدHTMLOpenTag/aHTMLCloseTag
                                                            HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagحذف کشوییHTMLOpenTag/aHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    data-tw-placement="left-start"
    class="dropdown relative inline-block mb-2 rtl:ml-1 ltr:mr-1"
HTMLCloseTagHTMLOpenTagbutton
    data-tw-merge
    data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
HTMLCloseTagشروع چپHTMLOpenTag/buttonHTMLCloseTag
                                                        HTMLOpenTagdiv
        data-transition
        data-selector=".show"
        data-enter="transition-all ease-linear duration-150"
        data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
        data-enter-to="!mt-1 visible opacity-100 translate-y-0"
        data-leave="transition-all ease-linear duration-150"
        data-leave-from="!mt-1 visible opacity-100 translate-y-0"
        data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
        class="dropdown-menu absolute z-[9999] hidden"
    HTMLCloseTagHTMLOpenTagdiv
        data-tw-merge
        class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
    HTMLCloseTag
        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagمنوی کشویی جدیدHTMLOpenTag/aHTMLCloseTag
                                                            HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagحذف کشوییHTMLOpenTag/aHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    data-tw-placement="left"
    class="dropdown relative inline-block mb-2 rtl:ml-1 ltr:mr-1"
HTMLCloseTagHTMLOpenTagbutton
    data-tw-merge
    data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
HTMLCloseTagچپHTMLOpenTag/buttonHTMLCloseTag
                                                        HTMLOpenTagdiv
        data-transition
        data-selector=".show"
        data-enter="transition-all ease-linear duration-150"
        data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
        data-enter-to="!mt-1 visible opacity-100 translate-y-0"
        data-leave="transition-all ease-linear duration-150"
        data-leave-from="!mt-1 visible opacity-100 translate-y-0"
        data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
        class="dropdown-menu absolute z-[9999] hidden"
    HTMLCloseTagHTMLOpenTagdiv
        data-tw-merge
        class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
    HTMLCloseTag
        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagمنوی کشویی جدیدHTMLOpenTag/aHTMLCloseTag
                                                            HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagحذف کشوییHTMLOpenTag/aHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    data-tw-placement="left-end"
    class="dropdown relative inline-block mb-2 rtl:ml-1 ltr:mr-1"
HTMLCloseTagHTMLOpenTagbutton
    data-tw-merge
    data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
HTMLCloseTagچپ انتهاHTMLOpenTag/buttonHTMLCloseTag
                                                        HTMLOpenTagdiv
        data-transition
        data-selector=".show"
        data-enter="transition-all ease-linear duration-150"
        data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
        data-enter-to="!mt-1 visible opacity-100 translate-y-0"
        data-leave="transition-all ease-linear duration-150"
        data-leave-from="!mt-1 visible opacity-100 translate-y-0"
        data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
        class="dropdown-menu absolute z-[9999] hidden"
    HTMLCloseTagHTMLOpenTagdiv
        data-tw-merge
        class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
    HTMLCloseTag
        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagمنوی کشویی جدیدHTMLOpenTag/aHTMLCloseTag
                                                            HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagحذف کشوییHTMLOpenTag/aHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

قرارگیری کشویی یک جنبه حیاتی از منوی کشویی است. با کنترل مکانی که منو کشویی ظاهر می‌شود، می‌توانید تضمین کنید که در چیدمان برنامه‌ی شما محل مناسبی داشته باشد و تجربه کاربری بدون انقطا را ارائه دهد. با امتحان اندازه‌های مختلف، می‌توانید اندازه‌ای را پیدا کنید که بهترین تطابق با اهداف طراحی شما را داشته باشد و تجربه کاربری بهینه را ارائه دهید.

رابط اجزاء

در این بخش، اطلاعات جزئی در مورد ویژگی‌ها، کلاس‌ها و گزینه‌های موجود که می‌توانید با اجزاء است. درک این خصوصیات برای سفارشی کردن و پیکربندی اجزاء برای مطابقت با نیازهای خاص شما ضروری است.

در زیر لیستی از ویژگی‌هایی که می‌توان به اجزاء منتقل کرد، آمده است:

Menu
پراپ (Prop) نوع (Type) شرح
بدون پراپ
Menu.Button
پراپ (Prop) نوع (Type) شرح
`as` `string` عنصر HTML یا نوع مؤلفه React برای رندر کردن به عنوان دکمه
Menu.Item
پراپ (Prop) نوع (Type) شرح
`placement` `top-start`, `top`, `top-end`, `right-start`, `right`, `right-end`, `bottom-end`, `bottom`, `bottom-start`, `left-start`, `left`, `left-end` موقعیت منو کشویی نسبت به عنصر محرک خود را تعیین می‌کند. شما می‌توانید از گزینه‌هایی مانند 'top'، 'bottom'، 'left' یا 'right' را انتخاب کنید تا جهت گسترش منو را کنترل کنید.
Menu.Item
پراپ (Prop) نوع (Type) شرح
بدون پراپ
Menu.Divider
پراپ (Prop) نوع (Type) شرح
بدون پراپ
Menu.Header
پراپ (Prop) نوع (Type) شرح
بدون پراپ
Menu.Footer
پراپ (Prop) نوع (Type) شرح
بدون پراپ