کشویی

با افزونه کشویی Bootstrap، همپوشانی های متنی را برای نمایش لیست پیوندها و موارد دیگر تغییر دهید.

در این صفحه

بررسی اجمالی

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

کرکره‌ها بر روی یک کتابخانه شخص ثالث به نام Popper ساخته شده‌اند که موقعیت‌یابی پویا و تشخیص پورت دید را ارائه می‌دهد. حتماً popper.min.js را قبل از جاوا اسکریپت بوت استرپ اضافه کنید یا از bootstrap.bundle.min.js/ bootstrap.bundle.jsکه حاوی Popper است استفاده کنید. پوپر برای قرار دادن کرکره‌ها در نوارهای ناوبری استفاده نمی‌شود، اگرچه موقعیت‌یابی پویا لازم نیست.

دسترسی

استاندارد WAI ARIA role="menu" یک ویجت واقعی را تعریف می کند ، اما این ویژه منوهای برنامه مانندی است که اقدامات یا عملکردها را راه اندازی می کنند. منوهای ARIA فقط می‌توانند شامل آیتم‌های منو، آیتم‌های منوی کادر انتخاب، آیتم‌های منوی دکمه‌های رادیویی، گروه‌های دکمه‌های رادیویی و منوهای فرعی باشند.

از سوی دیگر، فهرست‌های بازشوی Bootstrap به گونه‌ای طراحی شده‌اند که عمومی باشند و برای انواع موقعیت‌ها و ساختارهای نشانه‌گذاری قابل استفاده باشند. به عنوان مثال، امکان ایجاد کرکره‌هایی وجود دارد که حاوی ورودی‌های اضافی و کنترل‌های فرم، مانند فیلدهای جستجو یا فرم‌های ورود هستند. به همین دلیل، Bootstrap هیچ یک از ویژگی ها roleو aria-ویژگی های مورد نیاز برای منوهای ARIA واقعی را انتظار ندارد (و به طور خودکار اضافه نمی کند). نویسندگان باید خود این ویژگی‌های خاص‌تر را لحاظ کنند.

با این حال، Bootstrap پشتیبانی داخلی را برای اکثر تعاملات استاندارد منوی صفحه کلید، مانند توانایی حرکت در .dropdown-itemعناصر جداگانه با استفاده از کلیدهای مکان نما و بستن منو با ESCکلید، اضافه می کند.

مثال ها

کلید کشویی (دکمه یا پیوند خود) و منوی کشویی را در داخل .dropdownیا عنصر دیگری که اعلان می کند ، بپیچید position: relative;. کرکره ها را می توان از <a>یا <button>عناصری فعال کرد تا بهتر با نیازهای بالقوه شما مطابقت داشته باشد. نمونه‌هایی که در اینجا نشان داده شده‌اند در صورت لزوم از عناصر معنایی استفاده می‌کنند <ul>، اما نشانه‌گذاری سفارشی پشتیبانی می‌شود.

تک دکمه

هر تکی .btnرا می توان با برخی تغییرات نشانه گذاری به یک ضامن کشویی تبدیل کرد. در اینجا نحوه قرار دادن آنها با هر یک از <button>عناصر آمده است:

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

و با <a>عناصر:

html

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

بهترین بخش این است که می توانید این کار را با هر نوع دکمه ای نیز انجام دهید:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

دکمه تقسیم

به طور مشابه، کشویی دکمه های تقسیم را با نشانه گذاری تقریباً مشابه با منوهای کشویی تک دکمه ایجاد کنید، اما .dropdown-toggle-splitبرای ایجاد فاصله مناسب در اطراف کرکره کرکره ای به آن اضافه کنید.

ما از این کلاس اضافی برای کاهش padding25٪ افقی در دو طرف حفاظ استفاده می کنیم و آن را حذف می کنیم margin-leftکه برای کشویی دکمه های معمولی اضافه شده است. این تغییرات اضافی، حواشی را در مرکز دکمه تقسیم نگه می دارد و یک ناحیه ضربه با اندازه مناسب تری در کنار دکمه اصلی ایجاد می کند.

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

سایز بندی

کشویی دکمه‌ها با دکمه‌های همه اندازه‌ها، از جمله دکمه‌های کشویی پیش‌فرض و تقسیم‌بندی کار می‌کنند.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

کرکره های تاریک

برای مطابقت با نوار پیمایش تیره یا سبک سفارشی با افزودن .dropdown-menu-darkبه یک موجود، از منوهای کشویی تیره تر انتخاب .dropdown-menuکنید. هیچ تغییری در موارد کشویی لازم نیست.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

و قرار دادن آن برای استفاده در نوار ناوبری:

html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

جهت ها

RTL

هنگام استفاده از Bootstrap در RTL، دستورالعمل ها منعکس می شوند، به این معنی .dropstartکه در سمت راست ظاهر می شوند.

متمرکز شده است

منوی کشویی را در مرکز زیر کلید ضامن با .dropdown-centerعنصر والد قرار دهید.

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

رها کردن

منوهای کشویی بالای عناصر را با افزودن .dropupبه عنصر والد فعال کنید.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropup محور

منوی کشویی را در مرکز بالای ضامن .dropup-centerروی عنصر والد قرار دهید.

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

رها کردن

.dropendبا افزودن به عنصر والد، منوهای کشویی را در سمت راست عناصر فعال کنید.

<!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

دراپ استارت

.dropstartبا افزودن به عنصر والد، منوهای کشویی را در سمت چپ عناصر فعال کنید.

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropstart</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

می توانید از عناصر <a>یا <button>عناصر به عنوان آیتم های کشویی استفاده کنید.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

همچنین می‌توانید آیتم‌های کشویی غیرتعاملی را با .dropdown-item-text. با استفاده از CSS سفارشی یا ابزارهای متنی، راحت تر استایل کنید.

html

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

فعال

.activeبه موارد در منوی کشویی اضافه کنید تا آنها را فعال کنید. برای انتقال وضعیت فعال به فناوری‌های کمکی، از aria-currentویژگی استفاده کنید - با استفاده از pageمقدار برای صفحه فعلی یا trueبرای آیتم فعلی در یک مجموعه.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

معلول

.disabledبه موارد در منوی کشویی اضافه کنید تا آنها را غیرفعال کنید.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

به طور پیش فرض، یک منوی کشویی به طور خودکار 100٪ از بالا و در امتداد سمت چپ والد خود قرار می گیرد. شما می توانید این را با .drop*کلاس های جهت تغییر دهید، اما می توانید آنها را با کلاس های اصلاح کننده اضافی نیز کنترل کنید.

.dropdown-menu-endبه a اضافه کنید .dropdown-menuتا منوی کشویی را تراز کنید. هنگام استفاده از Bootstrap در RTL، دستورالعمل ها منعکس می شوند، به این معنی .dropdown-menu-endکه در سمت چپ ظاهر می شوند.

سر بالا! کرکره ها به لطف Popper قرار می گیرند به جز زمانی که در نوار ناوبری قرار دارند.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

هم ترازی پاسخگو

اگر می‌خواهید از هم‌ترازی پاسخ‌گو استفاده کنید، با افزودن data-bs-display="static"ویژگی، موقعیت پویا را غیرفعال کنید و از کلاس‌های تنوع پاسخ‌گو استفاده کنید.

برای تراز کردن منوی کشویی به سمت راست با نقطه شکست داده شده یا بزرگتر، اضافه کنید .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

برای تراز کردن منوی کشویی سمت چپ با نقطه شکست داده شده یا بزرگتر، .dropdown-menu-endو اضافه کنید .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

توجه داشته باشید که نیازی به افزودن data-bs-display="static"ویژگی به دکمه‌های کشویی در نوارهای ناوبری ندارید، زیرا Popper در نوارهای ناوبری استفاده نمی‌شود.

گزینه های تراز

با در نظر گرفتن اکثر گزینه های نشان داده شده در بالا، در اینجا یک نسخه ی نمایشی سینک آشپزخانه کوچک از گزینه های مختلف تراز کشویی در یک مکان وجود دارد.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

سرصفحه ها

در هر منوی کشویی، یک سرصفحه برای برچسب زدن بخش‌های عملکردها اضافه کنید.

html

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

تقسیم کننده ها

گروه هایی از آیتم های منوی مرتبط را با یک تقسیم کننده جدا کنید.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

متن

هر متن آزاد را در یک منوی کشویی با متن قرار دهید و از ابزارهای فاصله استفاده کنید . توجه داشته باشید که احتمالاً برای محدود کردن عرض منو به سبک های اندازه اضافی نیاز دارید.

html

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

تشکیل می دهد

یک فرم را در یک منوی کشویی قرار دهید، یا آن را در یک منوی کشویی قرار دهید، و از ابزارهای حاشیه یا padding استفاده کنید تا فضای منفی مورد نیاز خود را به آن بدهید.

html

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </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">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

html

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <form class="dropdown-menu p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck2">
        <label class="form-check-label" for="dropdownCheck2">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
</div>

از data-bs-offsetیا data-bs-referenceبرای تغییر مکان کشویی استفاده کنید.

html

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</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">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

رفتار بسته شدن خودکار

به طور پیش فرض، هنگام کلیک کردن در داخل یا خارج از منوی کشویی، منوی کشویی بسته می شود. می‌توانید از autoCloseگزینه تغییر این رفتار فهرست کشویی استفاده کنید.

html

<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">
    Default dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</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">
    Clickable outside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</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">
    Clickable inside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</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">
    Manual close
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

CSS

متغیرها

اضافه شده در نسخه 5.2.0

به‌عنوان بخشی از رویکرد متغیرهای CSS در حال تکامل Bootstrap، فهرست‌های کشویی اکنون از متغیرهای CSS محلی .dropdown-menuبرای سفارشی‌سازی در زمان واقعی استفاده می‌کنند. مقادیر برای متغیرهای CSS از طریق Sass تنظیم می‌شوند، بنابراین سفارشی‌سازی Sass نیز همچنان پشتیبانی می‌شود.

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

سفارشی سازی از طریق متغیرهای CSS را می توان در .dropdown-menu-darkکلاسی مشاهده کرد که در آن مقادیر خاصی را بدون افزودن انتخابگرهای تکراری CSS لغو می کنیم.

  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

متغیرهای Sass

متغیرها برای همه کشویی ها:

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             var(--#{$prefix}border-color-translucent);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg:            $gray-200;

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      $gray-500;

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

متغیرهای کشویی تاریک :

$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-border-color:        $dropdown-border-color;
$dropdown-dark-divider-bg:          $dropdown-divider-bg;
$dropdown-dark-box-shadow:          null;
$dropdown-dark-link-color:          $dropdown-dark-color;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

متغیرهایی برای کارت های مبتنی بر CSS که تعاملی بودن یک کشویی را نشان می دهد:

$caret-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

مخلوط ها

مخلوط‌ها برای تولید کرت‌های مبتنی بر CSS استفاده می‌شوند و می‌توانند در scss/mixins/_caret.scss.

@mixin caret-down {
  border-top: $caret-width solid;
  border-right: $caret-width solid transparent;
  border-bottom: 0;
  border-left: $caret-width solid transparent;
}

@mixin caret-up {
  border-top: 0;
  border-right: $caret-width solid transparent;
  border-bottom: $caret-width solid;
  border-left: $caret-width solid transparent;
}

@mixin caret-end {
  border-top: $caret-width solid transparent;
  border-right: 0;
  border-bottom: $caret-width solid transparent;
  border-left: $caret-width solid;
}

@mixin caret-start {
  border-top: $caret-width solid transparent;
  border-right: $caret-width solid;
  border-bottom: $caret-width solid transparent;
}

@mixin caret($direction: down) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $caret-spacing;
      vertical-align: $caret-vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down();
      } @else if $direction == up {
        @include caret-up();
      } @else if $direction == end {
        @include caret-end();
      }
    }

    @if $direction == start {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $caret-spacing;
        vertical-align: $caret-vertical-align;
        content: "";
        @include caret-start();
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

استفاده

از طریق ویژگی های داده یا جاوا اسکریپت، افزونه کشویی محتوای پنهان (منوهای کشویی) را با تغییر دادن .showکلاس در والد .dropdown-menuتغییر می دهد. این data-bs-toggle="dropdown"ویژگی برای بستن منوهای کشویی در سطح برنامه مورد استفاده قرار می گیرد، بنابراین ایده خوبی است که همیشه از آن استفاده کنید.

در دستگاه‌های دارای قابلیت لمس، باز کردن یک منوی کشویی، mouseoverکنترل‌کننده‌های خالی را به فرزندان اصلی <body>عنصر اضافه می‌کند. مسلماً این هک زشت برای حل یک اشتباه در نمایندگی رویداد iOS ضروری است ، که در غیر این صورت از ضربه زدن به هر جایی خارج از کرکره از راه‌اندازی کدی که فهرست کشویی را می‌بندد، جلوگیری می‌کند. پس از بسته شدن منوی بازشو، این کنترل کننده های خالی اضافی mouseoverحذف می شوند.

از طریق ویژگی های داده

data-bs-toggle="dropdown"برای تغییر حالت کشویی به پیوند یا دکمه اضافه کنید.

<div class="dropdown">
  <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

از طریق جاوا اسکریپت

کشویی ها را از طریق جاوا اسکریپت فراخوانی کنید:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

`data-bs-toggle="dropdown"`هنوز مورد نیاز است

صرف نظر از اینکه از طریق جاوا اسکریپت کشویی خود را فراخوانی می‌کنید یا در عوض از data-api استفاده می‌کنید، data-bs-toggle="dropdown"همیشه لازم است در عنصر ماشه کشویی وجود داشته باشد.

گزینه ها

از آنجایی که گزینه‌ها می‌توانند از طریق ویژگی‌های داده یا جاوا اسکریپت ارسال شوند، می‌توانید یک نام گزینه را data-bs-مانند در ضمیمه کنید data-bs-animation="{value}". هنگام عبور گزینه ها از طریق ویژگی های داده، حتماً نوع حروف نام گزینه را از “ camelCase ” به “ kebab-case ” تغییر دهید. به عنوان مثال، data-bs-custom-class="beautifier"به جای استفاده از data-bs-customClass="beautifier".

از Bootstrap 5.2.0، همه مؤلفه‌ها از یک ویژگی داده رزرو شده تجربیdata-bs-config پشتیبانی می‌کنند که می‌تواند پیکربندی مؤلفه ساده را به عنوان یک رشته JSON در خود جای دهد. هنگامی که یک عنصر دارای data-bs-config='{"delay":0, "title":123}'و data-bs-title="456"ویژگی باشد، مقدار نهایی titleخواهد بود 456و ویژگی های داده جداگانه مقادیر داده شده در را لغو می کنند data-bs-config. علاوه بر این، ویژگی های داده موجود می توانند مقادیر JSON مانند data-bs-delay='{"show":0,"hide":150}'.

نام	تایپ کنید	پیش فرض	شرح
`autoClose`	بولی، رشته	`true`	رفتار بسته شدن خودکار منوی کشویی را پیکربندی کنید: `true`- منوی کشویی با کلیک کردن در خارج یا داخل منوی کشویی بسته می شود. `false`- با کلیک کردن روی دکمه جابجایی و فراخوانی دستی `hide`یا `toggle`متد، فهرست بازشو بسته می‌شود. (همچنین با فشار دادن `esc`کلید بسته نمی شود) `'inside'`- منوی کشویی (فقط) با کلیک کردن در داخل منوی کشویی بسته می شود. `'outside'`- منوی کشویی (فقط) با کلیک کردن در خارج از منوی کشویی بسته می شود. توجه: بازشو همیشه می تواند با `ESC`کلید بسته شود.
`boundary`	رشته، عنصر	`'clippingParents'`	مرز محدودیت سرریز از منوی کشویی (فقط برای اصلاح کننده Popper's preventOverflow اعمال می شود). به طور پیش‌فرض `clippingParents`می‌تواند یک مرجع HTMLElement را بپذیرد (فقط از طریق جاوا اسکریپت). برای اطلاعات بیشتر به Popper's detectOverflow docs مراجعه کنید.
`display`	رشته	`'dynamic'`	به طور پیش فرض، ما از Popper برای موقعیت یابی پویا استفاده می کنیم. این را با غیر فعال کنید `static`.
`offset`	آرایه، رشته، تابع	`[0, 2]`	افست کشویی نسبت به هدفش. شما می توانید یک رشته را در ویژگی های داده با مقادیر جدا شده با کاما مانند: ارسال `data-bs-offset="10,20"`کنید. هنگامی که یک تابع برای تعیین offset استفاده می شود، با یک شی حاوی popper placement، مرجع، و popper rects به عنوان اولین آرگومان فراخوانی می شود. گره DOM عنصر محرک به عنوان آرگومان دوم ارسال می شود. تابع باید یک آرایه با دو عدد برگرداند: لغزش ، فاصله . برای اطلاعات بیشتر به اسناد افست پوپر مراجعه کنید .
`popperConfig`	تهی، شیء، تابع	`null`	برای تغییر تنظیمات Popper پیش‌فرض Bootstrap، به پیکربندی Popper مراجعه کنید . هنگامی که یک تابع برای ایجاد پیکربندی Popper استفاده می شود، با یک شی که حاوی تنظیمات پیش فرض Popper Bootstrap است فراخوانی می شود. این به شما کمک می کند تا از تنظیمات پیش فرض استفاده کرده و با پیکربندی خود ادغام کنید. تابع باید یک شی پیکربندی برای Popper برگرداند.
`reference`	رشته، عنصر، شی	`'toggle'`	عنصر مرجع منوی کشویی. مقادیر `'toggle'`،، `'parent'`یک مرجع HTMLElement یا یک شی ارائه دهنده را می پذیرد `getBoundingClientRect`. برای اطلاعات بیشتر به اسناد سازنده Popper و اسناد عناصر مجازی مراجعه کنید.

استفاده از تابع با`popperConfig`

const dropdown = new bootstrap.Dropdown(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

مواد و روش ها

روش	شرح
`dispose`	فهرست بازشوی یک عنصر را از بین می برد. (داده های ذخیره شده در عنصر DOM را حذف می کند)
`getInstance`	روش ایستا که به شما امکان می دهد نمونه کشویی مرتبط با یک عنصر DOM را دریافت کنید، می توانید از آن به صورت زیر استفاده کنید: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	روش ایستا که یک نمونه کشویی مرتبط با یک عنصر DOM را برمی گرداند یا در صورتی که اولیه نشده بود یک نمونه جدید ایجاد می کند. می توانید از آن به این صورت استفاده کنید: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	منوی کشویی یک نوار ناوبری داده شده یا پیمایش تب شده را پنهان می کند.
`show`	منوی کشویی یک نوار ناوبری مشخص یا پیمایش تب شده را نشان می دهد.
`toggle`	منوی کشویی یک نوار ناوبری مشخص یا پیمایش تب شده را تغییر می دهد.
`update`	موقعیت منوی کشویی یک عنصر را به روز می کند.

مناسبت ها

همه رویدادهای کرکره‌ای در عنصر تغییردهنده شلیک می‌شوند و سپس حباب می‌شوند. بنابراین می‌توانید شنونده‌های رویداد را در .dropdown-menuعنصر والد اضافه کنید. hide.bs.dropdownو hidden.bs.dropdownرویدادها دارای یک clickEventویژگی هستند (فقط زمانی که نوع اصلی رویداد باشد click) که حاوی یک شی رویداد برای رویداد کلیک است.

نوع رویداد	شرح
`hide.bs.dropdown`	`hide`هنگامی که متد نمونه فراخوانی شد، بلافاصله آتش می گیرد.
`hidden.bs.dropdown`	پس از مخفی شدن فهرست کشویی از کاربر و تکمیل انتقال CSS، فعال می شود.
`show.bs.dropdown`	`show`هنگامی که متد نمونه فراخوانی می شود بلافاصله آتش می گیرد.
`shown.bs.dropdown`	زمانی فعال می شود که کشویی برای کاربر قابل مشاهده باشد و انتقال CSS تکمیل شود.

const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})

کشویی

بررسی اجمالی

دسترسی

مثال ها

تک دکمه

دکمه تقسیم

سایز بندی

کرکره های تاریک

جهت ها

RTL

متمرکز شده است

رها کردن

Dropup محور

رها کردن

دراپ استارت

آیتم های منو

فعال

معلول

تراز منو

هم ترازی پاسخگو

گزینه های تراز

محتوای منو

سرصفحه ها

تقسیم کننده ها

متن

تشکیل می دهد

رفتار بسته شدن خودکار

CSS

متغیرها

متغیرهای Sass

مخلوط ها

استفاده

از طریق ویژگی های داده

از طریق جاوا اسکریپت

`data-bs-toggle="dropdown"`هنوز مورد نیاز است

گزینه ها

استفاده از تابع با`popperConfig`

مواد و روش ها

مناسبت ها

کشویی

بررسی اجمالی

دسترسی

مثال ها

تک دکمه

دکمه تقسیم

سایز بندی

کرکره های تاریک

جهت ها

RTL

متمرکز شده است

رها کردن

Dropup محور

رها کردن

دراپ استارت

آیتم های منو

فعال

معلول

تراز منو

هم ترازی پاسخگو

گزینه های تراز

محتوای منو

سرصفحه ها

هدر کشویی

تقسیم کننده ها

متن

تشکیل می دهد

گزینه های کشویی

رفتار بسته شدن خودکار

CSS

متغیرها

متغیرهای Sass

مخلوط ها

استفاده

از طریق ویژگی های داده

از طریق جاوا اسکریپت

data-bs-toggle="dropdown"هنوز مورد نیاز است

گزینه ها

استفاده از تابع باpopperConfig

مواد و روش ها

مناسبت ها

`data-bs-toggle="dropdown"`هنوز مورد نیاز است

استفاده از تابع با`popperConfig`