مرکزی مواد پر جائیں۔ ڈاکس نیویگیشن پر جائیں۔
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>عناصر کے ساتھ کام کرنے کے لیے کیسے رکھ سکتے ہیں:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <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>عناصر کے ساتھ:

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

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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۔ ڈراپ ڈاؤن آئٹمز میں کسی تبدیلی کی ضرورت نہیں ہے۔

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <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>

اور اسے نوبار میں استعمال کرنے کے لیے ڈالنا:

<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="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <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دائیں جانب ظاہر ہوگا۔

ڈراپ اپ

.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>

ڈراپ رائٹ

.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">
    Dropright
  </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 Dropright</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">
  <div class="btn-group dropstart" role="group">
    <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>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

آپ ڈراپ ڈاؤن آئٹمز کے طور پر استعمال کر سکتے ہیں <a>یا عناصر۔<button>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <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 یا ٹیکسٹ یوٹیلیٹیز کے ساتھ مزید اسٹائل کرنے کے لیے آزاد محسوس کریں۔

<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سیٹ میں موجودہ آئٹم کے لیے۔

<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ڈراپ ڈاؤن میں آئٹمز کو غیر فعال کے طور پر اسٹائل کرنے کے لیے ان میں شامل کریں ۔

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">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بائیں جانب ظاہر ہوگا۔

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

<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۔

<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 میں استعمال نہیں ہوتا ہے۔

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

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

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>

ہیڈرز

کسی بھی ڈراپ ڈاؤن مینو میں کارروائیوں کے سیکشن کو لیبل کرنے کے لیے ایک ہیڈر شامل کریں۔

<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>

تقسیم کرنے والے

ڈیوائیڈر کے ساتھ متعلقہ مینو آئٹمز کے الگ گروپ۔

<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 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>

فارمز

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

<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>
<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>

استعمال کریں data-bs-offsetیا data-bs-referenceڈراپ ڈاؤن کا مقام تبدیل کریں۔

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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ڈراپ ڈاؤن کے اس رویے کو تبدیل کرنے کے لیے آپشن استعمال کر سکتے ہیں۔

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    <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" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    <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" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <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" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <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>

سس

متغیرات

تمام ڈراپ ڈاؤن کے متغیرات:

$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:             rgba($black, .15);
$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($gray-900, 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:           $dropdown-padding-y $dropdown-item-padding-x;

تاریک ڈراپ ڈاؤن کے لیے متغیرات :

$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 id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

جاوا اسکرپٹ کے ذریعے

جاوا اسکرپٹ کے ذریعے ڈراپ ڈاؤن کو کال کریں:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"اب بھی ضرورت ہے

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

اختیارات

اختیارات کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-bs-، جیسا کہ میں data-bs-offset=""۔ ڈیٹا انتساب کے ذریعے آپشنز کو پاس کرتے وقت آپشن کے کیس کی قسم کو CamelCase سے kebab-case میں تبدیل کرنا یقینی بنائیں۔ مثال کے طور پر، استعمال کرنے کے بجائے data-bs-autoClose="false"، استعمال کریں data-bs-auto-close="false"۔

نام قسم طے شدہ تفصیل
boundary تار | عنصر 'clippingParents' ڈراپ ڈاؤن مینو کی اوور فلو رکاوٹ کی حد (صرف پوپر کے روکنے والے اوور فلو موڈیفائر پر لاگو ہوتا ہے)۔ پہلے سے طے شدہ طور پر یہ 'clippingParents'ایک HTMLElement حوالہ (صرف JavaScript کے ذریعے) ہے اور قبول کر سکتا ہے۔ مزید معلومات کے لیے Popper's detectOverflow docs دیکھیں ۔
reference تار | عنصر | چیز 'toggle' ڈراپ ڈاؤن مینو کا حوالہ عنصر۔ 'toggle', 'parent', HTMLElement حوالہ یا فراہم کرنے والی کسی چیز کی اقدار کو قبول کرتا getBoundingClientRectہے۔ مزید معلومات کے لیے Popper's constructor docs اور ورچوئل ایلیمینٹ دستاویزات دیکھیں ۔
display تار 'dynamic' پہلے سے طے شدہ طور پر، ہم متحرک پوزیشننگ کے لیے Popper استعمال کرتے ہیں۔ کے ساتھ اسے غیر فعال کریں static۔
offset صف | تار | فنکشن [0, 2]

اس کے ہدف کے نسبت ڈراپ ڈاؤن کا آفسیٹ۔ آپ کوما سے الگ کردہ اقدار کے ساتھ ڈیٹا کی خصوصیات میں ایک سٹرنگ پاس کر سکتے ہیں جیسے:data-bs-offset="10,20"

جب کوئی فنکشن آفسیٹ کا تعین کرنے کے لیے استعمال کیا جاتا ہے، تو اسے ایک ایسی چیز کے ساتھ بلایا جاتا ہے جس میں پاپر پلیسمنٹ، حوالہ، اور پاپر اس کی پہلی دلیل کے طور پر رییکٹ کرتا ہے۔ محرک عنصر DOM نوڈ کو دوسری دلیل کے طور پر پاس کیا جاتا ہے۔ فنکشن کو دو نمبروں کے ساتھ ایک صف واپس کرنی چاہیے: ۔[skidding, distance]

مزید معلومات کے لیے Popper کی آفسیٹ دستاویزات دیکھیں ۔

autoClose بولین | تار true

ڈراپ ڈاؤن کے آٹو کلوز رویے کو ترتیب دیں:

  • true- ڈراپ ڈاؤن مینو کے باہر یا اندر کلک کرنے سے ڈراپ ڈاؤن بند ہو جائے گا۔
  • false- ڈراپ ڈاؤن ٹوگل بٹن پر کلک کرکے اور دستی طور پر کال کرنے hideیا toggleطریقہ سے بند کر دیا جائے گا۔ esc(بھی کلید دبانے سے بند نہیں کیا جائے گا )
  • 'inside'- ڈراپ ڈاؤن مینو کے اندر کلک کرنے سے ڈراپ ڈاؤن بند ہو جائے گا (صرف)۔
  • 'outside'- ڈراپ ڈاؤن مینو کے باہر کلک کرنے سے ڈراپ ڈاؤن بند ہو جائے گا (صرف)۔
popperConfig null | اعتراض | فنکشن null

Bootstrap کی ڈیفالٹ Popper config کو تبدیل کرنے کے لیے، Popper کی کنفیگریشن دیکھیں ۔

جب کسی فنکشن کو پاپر کنفیگریشن بنانے کے لیے استعمال کیا جاتا ہے، تو اسے کسی ایسی چیز کے ساتھ بلایا جاتا ہے جس میں بوٹسٹریپ کی ڈیفالٹ پاپر کنفیگریشن ہوتی ہے۔ یہ آپ کو اپنی ترتیب کے ساتھ پہلے سے طے شدہ کو استعمال کرنے اور ضم کرنے میں مدد کرتا ہے۔ فنکشن کو پوپر کے لیے کنفیگریشن آبجیکٹ واپس کرنا چاہیے۔

کے ساتھ فنکشن کا استعمالpopperConfig

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

طریقے

طریقہ تفصیل
toggle دیئے گئے نیوی بار یا ٹیب شدہ نیویگیشن کے ڈراپ ڈاؤن مینو کو ٹوگل کرتا ہے۔
show دیئے گئے نیوبار یا ٹیب شدہ نیویگیشن کا ڈراپ ڈاؤن مینو دکھاتا ہے۔
hide دیئے گئے نیوبار یا ٹیب شدہ نیویگیشن کے ڈراپ ڈاؤن مینو کو چھپاتا ہے۔
update کسی عنصر کے ڈراپ ڈاؤن کی پوزیشن کو اپ ڈیٹ کرتا ہے۔
dispose ایک عنصر کے ڈراپ ڈاؤن کو تباہ کرتا ہے۔ (DOM عنصر پر ذخیرہ شدہ ڈیٹا کو ہٹاتا ہے)
getInstance جامد طریقہ جو آپ کو DOM عنصر سے منسلک ڈراپ ڈاؤن مثال حاصل کرنے کی اجازت دیتا ہے، آپ اسے اس طرح استعمال کر سکتے ہیں:bootstrap.Dropdown.getInstance(element)
getOrCreateInstance جامد طریقہ جو DOM عنصر سے وابستہ ڈراپ ڈاؤن مثال کو لوٹاتا ہے یا اس کی ابتدا نہ ہونے کی صورت میں ایک نیا بناتا ہے۔ آپ اسے اس طرح استعمال کر سکتے ہیں:bootstrap.Dropdown.getOrCreateInstance(element)

تقریبات

تمام ڈراپ ڈاؤن ایونٹس ٹوگل کرنے والے عنصر پر فائر کیے جاتے ہیں اور پھر ببل اپ ہوتے ہیں۔ لہذا آپ ایونٹ کے سننے والوں کو .dropdown-menu'پیرنٹ عنصر پر بھی شامل کر سکتے ہیں۔ hide.bs.dropdownاور hidden.bs.dropdownواقعات کی ایک clickEventخاصیت ہوتی ہے (صرف اس صورت میں جب اصل واقعہ کی قسم click) جس میں کلک ایونٹ کے لیے ایک ایونٹ آبجیکٹ ہوتا ہے۔

طریقہ تفصیل
show.bs.dropdown شو مثال کے طریقہ کار کو کال کرنے پر فوری طور پر آگ لگ جاتی ہے۔
shown.bs.dropdown جب ڈراپ ڈاؤن صارف کے لیے مرئی ہو جائے اور CSS ٹرانزیشن مکمل ہو جائے تو فائر کیا گیا۔
hide.bs.dropdown فوری طور پر آگ لگ جاتی ہے جب چھپائیں مثال کے طریقے کو بلایا جاتا ہے۔
hidden.bs.dropdown جب ڈراپ ڈاؤن صارف سے پوشیدہ ہونا ختم ہو جائے اور CSS ٹرانزیشن مکمل ہو جائے تو فائر کیا گیا۔
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})