منوی کشویی با دکمه واحد#
هر دکمه .btn میتواند با تغییرات جزئی در نشانهگذاری به یک دکمه کشویی تبدیل شود.
در اینجا نحوه استفاده از آنها با عناصر <button> آورده شده است.
<!-- دکمه کشویی -->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
دکمه کشویی
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<a class="dropdown-item" href="#">عمل</a>
<a class="dropdown-item" href="#">عمل دیگر</a>
<a class="dropdown-item" href="#">چیز دیگری اینجا</a>
</div>
</div>
<!-- لینک کشویی -->
<div class="dropdown">
<a href="#" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
لینک کشویی
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">عمل</a>
<a class="dropdown-item" href="#">عمل دیگر</a>
<a class="dropdown-item" href="#">چیز دیگری اینجا</a>
</div>
</div>
دکمههای کشویی متنوع#
هر دکمه .btn میتواند با تغییرات جزئی در نشانهگذاری به یک دکمه کشویی تبدیل شود.
در اینجا نحوه استفاده از آنها با عناصر <button> آورده شده است.
<!-- دکمههای کشویی واحد -->
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
اولیه
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">عمل</a></li>
<li><a class="dropdown-item" href="#">عمل دیگر</a></li>
<li><a class="dropdown-item" href="#">چیز دیگری اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">لینک جداشده</a></li>
</ul>
</div>
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ثانویه
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">عمل</a></li>
<li><a class="dropdown-item" href="#">عمل دیگر</a></li>
<li><a class="dropdown-item" href="#">چیز دیگری اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">لینک جداشده</a></li>
</ul>
</div>
<div class="dropdown">
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
موفقیت
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">عمل</a></li>
<li><a class="dropdown-item" href="#">عمل دیگر</a></li>
<li><a class="dropdown-item" href="#">چیز دیگری اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">لینک جداشده</a></li>
</ul>
</div>
<div class="dropdown">
<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
اطلاعات
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">عمل</a></li>
<li><a class="dropdown-item" href="#">عمل دیگر</a></li>
<li><a class="dropdown-item" href="#">چیز دیگری اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">لینک جداشده</a></li>
</ul>
</div>
دکمههای کشویی تقسیم شده#
به همین ترتیب، دکمههای کشویی تقسیم شده را با تقریباً همان نشانهگذاری مانند دکمههای کشویی واحد ایجاد کنید،
اما با اضافه کردن .dropdown-toggle-split برای فاصله مناسب در اطراف نماد کشویی.
<div class="btn-group">
<button type="button" class="btn btn-primary">اولیه</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">عمل</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">عمل دیگر</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">چیز دیگری اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="javascript:void(0);">لینک جداشده</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">ثانویه</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">عمل</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">عمل دیگر</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">چیز دیگری اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="javascript:void(0);">لینک جداشده</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success">موفقیت</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">عمل</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">عمل دیگر</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">چیز دیگری اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="javascript:void(0);">لینک جداشده</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info">اطلاعات</button>
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">عمل</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">عمل دیگر</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">چیز دیگری اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="javascript:void(0);">لینک جداشده</a></li>
</ul>
</div>
منوهای کشویی تیره#
برای هماهنگی با نوار ناوبری تیره یا استایل سفارشی از .dropdown-menu-dark به منو کشویی موجود اضافه کنید. هیچ تغییری در موارد منو کشویی لازم نیست.
<!-- منوی کشویی تیره -->
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">منوی کشویی تیره</button>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" href="javascript:void(0);">عمل</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">عمل دیگر</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">چیز دیگری اینجا</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="javascript:void(0);">لینک جداشده</a></li>
</ul>
</div>
جهت منو#
منوهای کشویی را با افزودن .dropup بالای عناصر، منوهای کشویی در سمت چپ عناصر با افزودن
.dropstart یا منوهای کشویی در سمت راست عناصر با افزودن
.dropend فعال کنید.
<!-- جهت منو -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
منوی کشویی
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">عمل</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">عمل دیگر</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">چیز دیگری اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="javascript:void(0);">لینک جداشده</a></li>
</ul>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
منوی بالا
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">عمل</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">عمل دیگر</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">چیز دیگری اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="javascript:void(0);">لینک جداشده</a></li>
</ul>
</div>
<div class="btn-group dropend">
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
منوی راست
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">عمل</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">عمل دیگر</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">چیز دیگری اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="javascript:void(0);">لینک جداشده</a></li>
</ul>
</div>
<div class="btn-group dropstart">
<button type="button" class="btn btn-info dropdown-toggle">
منوی چپ
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">عمل</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">عمل دیگر</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">چیز دیگری اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="javascript:void(0);">لینک جداشده</a></li>
</ul>
</div>
موارد منوی کشویی#
به موارد موجود در منوی کشویی .active اضافه کنید تا آنها را به عنوان فعال استایل دهید. برای نشان دادن وضعیت فعال به فناوریهای کمکی، از ویژگی aria-current استفاده کنید — با استفاده از مقدار page برای صفحه فعلی، یا true برای مورد فعلی در یک مجموعه.
به موارد موجود در منوی کشویی .disabled اضافه کنید تا آنها را به عنوان غیرفعال استایل دهید.
<ul class="dropdown-menu show block position-static">
<li><a class="dropdown-item" href="#">لینک معمولی</a></li>
<li><a class="dropdown-item active" href="#" aria-current="true">لینک فعال</a></li>
<li><a class="dropdown-item" href="#">لینک دیگر</a></li>
</ul>
<ul class="dropdown-menu show block position-static">
<li><a class="dropdown-item" href="#">لینک معمولی</a></li>
<li><a class="dropdown-item disabled" href="#" aria-current="true">لینک فعال</a></li>
<li><a class="dropdown-item" href="#">لینک دیگر</a></li>
</ul>
گزینههای منوی کشویی#
از data-bs-offset یا data-bs-reference برای تغییر موقعیت منوی کشویی استفاده کنید.
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
انحراف
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">عمل</a></li>
<li><a class="dropdown-item" href="#">عمل دیگر</a></li>
<li><a class="dropdown-item" href="#">چیز دیگری اینجا</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">مرجع</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">تغییر منوی کشویی</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">عمل</a></li>
<li><a class="dropdown-item" href="#">عمل دیگر</a></li>
<li><a class="dropdown-item" href="#">چیز دیگری اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">لینک جداشده</a></li>
</ul>
</div>
رفتار بستن خودکار#
به طور پیشفرض، منوی کشویی هنگام کلیک کردن داخل یا خارج از منوی کشویی بسته میشود. شما میتوانید از گزینه autoClose برای تغییر این رفتار منوی کشویی استفاده کنید.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
منوی کشویی پیشفرض
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
قابل کلیک در بیرون
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
قابل کلیک در داخل
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
بستن دستی
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
</ul>
</div>
محتوای منو#
به منوهای کشویی برچسبهایی برای بخشهای اقدام اضافه کنید.
گروههای مرتبط از موارد منو را با یک تقسیمکننده جدا کنید.
هر متن دلخواهی را درون یک منوی کشویی با متن قرار دهید و از ابزارهای فاصلهگذاری استفاده کنید. توجه داشته باشید که احتمالاً به سبکهای اضافه برای محدود کردن عرض منو نیاز خواهید داشت.
یک فرم را درون یک منوی کشویی قرار دهید، یا آن را به یک منوی کشویی تبدیل کنید، و از ابزارهای حاشیه یا پرکننده برای ایجاد فضای منفی مورد نیاز خود استفاده کنید.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
هدر منوی کشویی
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-header">هدر منوی کشویی</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">عمل</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">عمل دیگر</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
تقسیمکننده منوی کشویی
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">عمل</a></li>
<li><a class="dropdown-item" href="#">عمل دیگر</a></li>
<li><a class="dropdown-item" href="#">چیز دیگری اینجا</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">لینک جداشده</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
متن منوی کشویی
</button>
<div class="dropdown-menu dropdown-lg p-3">
<p>چند متن نمونه که درون منوی کشویی آزادانه جاری است.</p>
<p class="mb-0">و این هم متن نمونه بیشتری است.</p>
</div>
</div>
<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
فرمهای منوی کشویی
</button>
<form class="dropdown-menu dropdown-lg p-3">
<div class="mb-3">
<label class="form-label" for="exampleDropdownFormEmail">آدرس ایمیل</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail" placeholder="email@example.com">
</div>
<div class="mb-3">
<label class="form-label" for="exampleDropdownFormPassword">رمز عبور</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword" placeholder="رمز عبور">
</div>
<div class="mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">مرا به یاد داشته باش</label>
</div>
</div>
<button type="submit" class="btn btn-primary">ورود</button>
</form>
</div>