مرکزی مواد پر جائیں۔ ڈاکس نیویگیشن پر جائیں۔
Check
in English

ڈراپ ڈاؤن

بوٹسٹریپ ڈراپ ڈاؤن پلگ ان کے ساتھ لنکس اور مزید کی فہرستیں دکھانے کے لیے سیاق و سباق کے اوورلیز کو ٹوگل کریں۔

اس صفحہ پر

جائزہ

ڈراپ ڈاؤنز ٹوگل کیے جا سکتے ہیں، لنکس کی فہرستیں اور مزید ڈسپلے کرنے کے لیے سیاق و سباق سے متعلق اوورلیز۔ وہ شامل بوٹسٹریپ ڈراپ ڈاؤن جاوا اسکرپٹ پلگ ان کے ساتھ انٹرایکٹو بنائے گئے ہیں۔ وہ کلک کرنے سے ٹوگل ہوتے ہیں، منڈلا کر نہیں۔ یہ ایک جان بوجھ کر ڈیزائن کا فیصلہ ہے۔

ڈراپ ڈاؤنز تیسری پارٹی کی لائبریری، Popper پر بنائے گئے ہیں ، جو متحرک پوزیشننگ اور ویو پورٹ کا پتہ لگاتی ہے۔ بوٹسٹریپ کے جاوا اسکرپٹ سے پہلے popper.min.js کو شامل کرنا یقینی بنائیں یا استعمال کریں bootstrap.bundle.min.js/ bootstrap.bundle.jsجس میں Popper شامل ہو۔ پوپر کا استعمال navbars میں ڈراپ ڈاؤن پوزیشن کے لیے نہیں کیا جاتا ہے حالانکہ متحرک پوزیشننگ کی ضرورت نہیں ہے۔

رسائی

WAI ARIA معیار ایک حقیقی role="menu"ویجیٹ کی وضاحت کرتا ہے ، لیکن یہ ایپلیکیشن جیسے مینوز کے لیے مخصوص ہے جو اعمال یا افعال کو متحرک کرتے ہیں۔ ARIA مینو میں صرف مینو آئٹمز، چیک باکس مینو آئٹمز، ریڈیو بٹن مینو آئٹمز، ریڈیو بٹن گروپس، اور سب مینیو شامل ہو سکتے ہیں۔

دوسری طرف بوٹسٹریپ کے ڈراپ ڈاؤن کو عام اور مختلف حالات اور مارک اپ ڈھانچے پر لاگو کرنے کے لیے ڈیزائن کیا گیا ہے۔ مثال کے طور پر، ڈراپ ڈاؤنز بنانا ممکن ہے جس میں اضافی ان پٹ اور فارم کنٹرولز ہوں، جیسے کہ سرچ فیلڈز یا لاگ ان فارم۔ اس وجہ سے، بوٹسٹریپ حقیقی ARIA مینوز کے لیے درکار کسی بھی خصوصیت کی توقع نہیں کرتا (اور نہ ہی خود بخود شامل) role۔ مصنفین کو یہ مزید مخصوص اوصاف خود شامل کرنا ہوں گے۔aria-

تاہم، بوٹسٹریپ زیادہ تر معیاری کی بورڈ مینو کے تعاملات کے لیے بلٹ ان سپورٹ شامل کرتا ہے، جیسے .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ڈراپ ڈاؤن کیریٹ کے ارد گرد مناسب جگہ کے اضافے کے ساتھ۔

ہم اس اضافی کلاس کا استعمال paddingکیریٹ کے دونوں طرف کے افقی کو 25% تک کم کرنے کے لیے کرتے ہیں اور اس کو ہٹاتے ہیں 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

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-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-menuRTL میں Bootstrap استعمال کرتے وقت سمتوں کی عکس بندی کی جاتی ہے، مطلب .dropdown-menu-endبائیں جانب ظاہر ہوگا۔

سنو! ڈراپ ڈاؤنز پوپر کی بدولت پوزیشن میں ہیں سوائے اس کے کہ جب وہ نیوبار میں موجود ہوں۔
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>

نوٹ کریں کہ آپ کو navbars میں ڈراپ ڈاؤن بٹنوں میں کوئی خاصیت شامل کرنے کی ضرورت نہیں ہے data-bs-display="static"، کیونکہ Popper navbars میں استعمال نہیں ہوتا ہے۔

صف بندی کے اختیارات

اوپر دکھائے گئے زیادہ تر اختیارات کو لے کر، یہاں ایک جگہ پر مختلف ڈراپ ڈاؤن الائنمنٹ آپشنز کا ایک چھوٹا کچن سنک ڈیمو ہے۔

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>

فارمز

ڈراپ ڈاؤن مینو کے اندر ایک فارم ڈالیں، یا اسے ڈراپ ڈاؤن مینو میں بنائیں، اور اسے اپنی مطلوبہ منفی جگہ دینے کے لیے مارجن یا پیڈنگ یوٹیلیٹیز استعمال کریں۔

یہاں کے ارد گرد نئے؟ سائن اپ پاسورڈ بھول گے؟
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>

سی ایس ایس

متغیرات

v5.2.0 میں شامل کیا گیا۔

بوٹسٹریپ کے ابھرتے ہوئے CSS متغیر کے نقطہ نظر کے ایک حصے کے طور پر، ڈراپ ڈاؤن اب مقامی 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;

سی ایس ایس پر مبنی کیریٹس کے متغیرات جو ڈراپ ڈاؤن کی تعامل کی نشاندہی کرتے ہیں:

$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;
    }
  }
}

استعمال

ڈیٹا انتساب یا JavaScript کے ذریعے، ڈراپ ڈاؤن پلگ ان پوشیدہ مواد (ڈراپ ڈاؤن مینوز) .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"اب بھی ضرورت ہے

اس سے قطع نظر کہ آپ اپنے ڈراپ ڈاؤن کو JavaScript کے ذریعے کال کرتے ہیں یا اس کے بجائے ڈیٹا-api استعمال کرتے ہیں، data-bs-toggle="dropdown"ہمیشہ ڈراپ ڈاؤن کے محرک عنصر پر موجود ہونا ضروری ہے۔

اختیارات

چونکہ آپشنز کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے، آپ ایک آپشن کا نام شامل کر سکتے ہیں data-bs-، جیسا کہ میں data-bs-animation="{value}"۔ ڈیٹا انتساب کے ذریعے آپشنز کو پاس کرتے وقت آپشن کے نام کی کیس ٹائپ کو " کیمل کیس" سے " کباب کیس " میں تبدیل کرنا یقینی بنائیں۔ مثال کے طور پر، کے data-bs-custom-class="beautifier"بجائے استعمال کریں data-bs-customClass="beautifier"۔

بوٹسٹریپ 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' ڈراپ ڈاؤن مینو کی اوور فلو رکاوٹ کی حد (صرف پوپر کے روکنے والے اوور فلو موڈیفائر پر لاگو ہوتا ہے)۔ پہلے سے طے شدہ طور پر یہ clippingParentsایک HTMLElement حوالہ (صرف JavaScript کے ذریعے) ہے اور قبول کر سکتا ہے۔ مزید معلومات کے لیے Popper's detectOverflow docs دیکھیں ۔
display تار 'dynamic' پہلے سے طے شدہ طور پر، ہم متحرک پوزیشننگ کے لیے Popper استعمال کرتے ہیں۔ کے ساتھ اسے غیر فعال کریں static۔
offset صف، سٹرنگ، فنکشن [0, 2] اس کے ہدف کے نسبت ڈراپ ڈاؤن کا آفسیٹ۔ آپ کوما سے الگ کردہ اقدار کے ساتھ ڈیٹا کی خصوصیات میں ایک سٹرنگ پاس کر سکتے ہیں جیسے: data-bs-offset="10,20"۔ جب کوئی فنکشن آفسیٹ کا تعین کرنے کے لیے استعمال کیا جاتا ہے، تو اسے ایک ایسی چیز کے ساتھ بلایا جاتا ہے جس میں پاپر پلیسمنٹ، حوالہ، اور پاپر اس کی پہلی دلیل کے طور پر رییکٹ کرتا ہے۔ محرک عنصر DOM نوڈ کو دوسری دلیل کے طور پر پاس کیا جاتا ہے۔ فنکشن کو دو نمبروں کے ساتھ ایک صف واپس کرنی چاہیے: skidding , distance ۔ مزید معلومات کے لیے Popper کی آفسیٹ دستاویزات دیکھیں ۔
popperConfig null، اعتراض، فنکشن null Bootstrap کی ڈیفالٹ Popper config کو تبدیل کرنے کے لیے، Popper کی کنفیگریشن دیکھیں ۔ جب کسی فنکشن کو پاپر کنفیگریشن بنانے کے لیے استعمال کیا جاتا ہے، تو اسے کسی ایسی چیز کے ساتھ بلایا جاتا ہے جس میں بوٹسٹریپ کی ڈیفالٹ پاپر کنفیگریشن ہوتی ہے۔ یہ آپ کو اپنی ترتیب کے ساتھ پہلے سے طے شدہ کو استعمال کرنے اور ضم کرنے میں مدد کرتا ہے۔ فنکشن کو پوپر کے لیے کنفیگریشن آبجیکٹ واپس کرنا چاہیے۔
reference تار، عنصر، اعتراض 'toggle' ڈراپ ڈاؤن مینو کا حوالہ عنصر۔ 'toggle', 'parent', HTMLElement حوالہ یا فراہم کرنے والی کسی چیز کی اقدار کو قبول کرتا getBoundingClientRectہے۔ مزید معلومات کے لیے Popper's constructor docs اور ورچوئل ایلیمینٹ دستاویزات دیکھیں ۔

کے ساتھ فنکشن کا استعمال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...
})