ड्रॉपडाउन

बूटस्ट्रैप ड्रॉपडाउन प्लगइन कें साथ लिंक आ बेसि कें सूची प्रदर्शित करय कें लेल संदर्भ ओवरले कें टॉगल करूं.

इस पेज पर

अवलोकन

ड्रॉपडाउन टॉगल करय योग्य छै, लिंक कें सूची प्रदर्शित करय कें लेल संदर्भ ओवरले आओर बहुत किछ. इ शामिल बूटस्ट्रैप ड्रॉपडाउन जावास्क्रिप्ट प्लगइन कें साथ इंटरैक्टिव बनाल गेल छै. ई सब क्लिक क' टॉगल भ' जाइत अछि, होवरिंग सं नहिं; ई एकटा इरादापूर्वक डिजाइन निर्णय अछि .

ड्रॉपडाउन एकटा थर्ड पार्टी लाइब्रेरी, पॉपर पर निर्मित छै , जे डायनामिक पोजीशनिंग आ व्यूपोर्ट डिटेक्शन प्रदान करयत छै. बूटस्ट्रैप क' जावास्क्रिप्ट सँ पहिने popper.min.js केँ अवश्य शामिल करू अथवा bootstrap.bundle.min.js/ केर प्रयोग करू bootstrap.bundle.jsजाहि मे Popper अछि. पॉपर के उपयोग नवबार म॑ ड्रॉपडाउन क॑ पोजीशन दै लेली नै करलऽ जाय छै हालांकि कैन्हेंकि डायनामिक पोजीशनिंग के जरूरत नै छै ।

सुलभता

WAI ARIA मानक एकटा वास्तविक विजेट कें परिभाषित करयत छै , मुदा इ अनुप्रयोग जैना मेनू कें लेल विशिष्ट छै जे क्रियाक या कार्यक कें ट्रिगर करयत छै. एरिया मेनू मे केवल मेनू आइटम, चेकबॉक्स मेनू आइटम, रेडियो बटन मेनू आइटम, रेडियो बटन समूह, आ उप-मेनू शामिल भ सकय छै.role="menu"

दोसरऽ तरफ बूटस्ट्रैप केरऽ ड्रॉपडाउन क॑ जेनेरिक आरू विभिन्न परिस्थिति आरू मार्कअप संरचना प॑ लागू होय के रूप म॑ डिजाइन करलऽ गेलऽ छै । उदाहरण कें लेल, ड्रॉपडाउन बनानाय संभव छै जइ मे अतिरिक्त इनपुट आ फॉर्म नियंत्रण होयत छै, जेना खोज क्षेत्र या लॉगिन फॉर्म. अइ कारण सं, बूटस्ट्रैप सही एरिया मेनू कें लेल आवश्यक 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" 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>तत्वक संग : १.

एचटीएमएल

<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. ड्रॉपडाउन आइटम मे कोनो बदलाव करबाक आवश्यकता नहि अछि.

एचटीएमएल

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

आ एकरा नवबार मे उपयोग मे राखब:

एचटीएमएल

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

दिशा निर्देश

आर टी एल

आरटीएल मे बूटस्ट्रैप क उपयोग करबा काल निर्देश मिरर भ जाइत अछि, मतलब .dropstartदाहिना कात देखाएत ।

केन्द्रित

.dropdown-centerपैरेंट तत्व पर के साथ टॉगल के नीचे केंद्रित ड्रॉपडाउन मेनू बनाएँ |

एचटीएमएल

<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पैरेंट तत्व पर के साथ टॉगल के ऊपर केंद्रित ड्रॉपअप मेनू बनाएँ |

एचटीएमएल

<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>तत्वक कें उपयोग कयर सकय छी .

एचटीएमएल

<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. कस्टम सीएसएस या पाठ उपयोगिता के साथ आगू स्टाइल करय लेल बेझिझक महसूस करू.

एचटीएमएल

<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">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

डिफ़ॉल्ट रूप सं, एकटा ड्रॉपडाउन मेनू स्वचालित रूप सं ऊपर सं आ ओकर मूल कें बायां तरफ 100% स्थिति मे राखल जायत छै. अहां एकरा दिशात्मक वर्गक कें साथ बदल सकय छी .drop*, मुदा अहां ओकरा अतिरिक्त संशोधक वर्गक कें साथ सेहो नियंत्रित कयर सकय छी.

.dropdown-menu-endएकटा मे जोड़ू .dropdown-menuड्रॉपडाउन मेनू केँ दाहिना संरेखित करू. आरटीएल मे बूटस्ट्रैप क उपयोग करबा काल निर्देश मिरर भ जाइत अछि, मतलब .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>

ध्यान रहे कि नवबार म॑ ड्रॉपडाउन बटन म॑ कोनो विशेषता जोड़ै के जरूरत नै छै data-bs-display="static", कैन्हेंकि नवबार म॑ पॉपर के प्रयोग नै करलऽ जाय छै ।

संरेखण विकल्प

ऊपर देखाओल गेल अधिकांश विकल्प के ल क, एतय एक ठाम विभिन्न ड्रॉपडाउन संरेखण विकल्प के एकटा छोट किचन सिंक डेमो देल गेल अछि.

एचटीएमएल

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

हेडर

कोनों ड्रॉपडाउन मेनू मे क्रियाक कें खंडक कें लेबल करय कें लेल एकटा हेडर जोड़ूं.

एचटीएमएल

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

एचटीएमएल

<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

एचटीएमएल

<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अहां ड्रॉपडाउन कें इ व्यवहार बदलय कें लेल विकल्प कें उपयोग कयर सकय छी .

एचटीएमएल

<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 चर दृष्टिकोण कें हिस्सा कें रूप मे, ड्रॉपडाउन आब .dropdown-menuबढ़ल वास्तविक समय अनुकूलन कें लेल स्थानीय CSS चर पर उपयोग करय छै. 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};

सीएसएस चर के माध्यम स॑ अनुकूलन क॑ क्लास प॑ देखलऽ जाब॑ सकै छै .dropdown-menu-darkजहाँ हम डुप्लिकेट सीएसएस चयनकर्ता क॑ जोड़ै के बिना विशिष्ट मान क॑ ओवरराइड करी दै छियै ।

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

सस्स चर

सब ड्रॉपडाउन के लेल चर:

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

मिक्सिन

मिक्सिन कें उपयोग सीएसएस आधारित कैरेट कें उत्पन्न करय कें लेल कैल जायत छै आ इ मे भेट सकय छै 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>ई स्वीकार करी क॑ बदसूरत हैक आईओएस म॑ एक विचित्रता के आसपास काम करै लेली जरूरी छै 'घटना प्रतिनिधिमंडल , जे अन्यथा ड्रॉपडाउन स॑ बाहर कतहीं भी नल क॑ कोड क॑ ट्रिगर करै स॑ रोकी देतै जे ड्रॉपडाउन क॑ बंद करी दै छै । एक बेर ड्रॉपडाउन बंद भ गेलाक कें बाद, इ अतिरिक्त खाली 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-bs-toggle="dropdown"ड्रॉपडाउन कें ट्रिगर तत्व पर हमेशा मौजूद रहनाय आवश्यक छै.

विकल्प

जेना कि विकल्पक कें डाटा विशेषताक या जावास्क्रिप्ट कें माध्यम सं पास कैल जा सकय छै, अहां एकटा विकल्प नाम कें data-bs-, जैना की मे संलग्न कयर सकय छी data-bs-animation="{value}". डेटा विशेषताक कें माध्यम सं विकल्पक कें पास करय कें समय विकल्प नाम कें केस प्रकार कें “ camelCase ” सं “ kabab -case ” मे बदलनाय सुनिश्चित करूं . जेना, के 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`- ड्रॉपडाउन मेनू के बाहर या अंदर क्लिक करय सं ड्रॉपडाउन बंद भ जायत. `falsehide`- टॉगल बटन पर क्लिक करय आ मैन्युअल रूप सं कॉल करय सं या `toggle`मेथड करय सं ड्रॉपडाउन बंद भ जायत . (संगहि की दबा कए बंद नहि होएत `esc`) `'inside'`- ड्रॉपडाउन मेनू के अंदर क्लिक क ड्रॉपडाउन बंद भ जायत (केवल)। `'outside'`- ड्रॉपडाउन मेनू के बाहर क्लिक कए ड्रॉपडाउन बंद भ जाएत (केवल)। नोट: ड्रॉपडाउन कें हमेशा `ESC`कुंजी सं बंद कैल जा सकय छै.
`boundary`	तार, तत्व	`'clippingParents'`	ड्रॉपडाउन मेनू क' ओवरफ्लो बाधा सीमा (केवल पॉपर क' preventOverflow संशोधक पर लागू होइत अछि)। डिफ़ॉल्ट रूप स॑ ई `clippingParents`HTMLElement संदर्भ (केवल जावास्क्रिप्ट के माध्यम स॑) छै आरू स्वीकार करी सकै छै । अधिक जानकारी क लेल Popper क detectOverflow docs देखू .
`display`	डोरी	`'dynamic'`	डिफ़ॉल्ट रूप स, हम डायनामिक पोजीशनिंग क लेल पॉपर क उपयोग करैत छी। के साथ एकरा अक्षम करू `static`.
`offset`	सरणी, स्ट्रिंग, फंक्शन	`[0, 2]`	अपन लक्ष्य के सापेक्ष ड्रॉपडाउन के ऑफसेट। अहां अल्पविराम सं अलग मान कें साथ डाटा विशेषताक मे एकटा स्ट्रिंग पास कयर सकय छी जेना: `data-bs-offset="10,20"`. जब॑ कोनो फंक्शन क॑ ऑफसेट निर्धारित करै लेली प्रयोग करलऽ जाय छै त॑ ओकरा एगो ऑब्जेक्ट स॑ कॉल करलऽ जाय छै जेकरा म॑ पॉपर प्लेसमेंट, रेफरेंस, आरू पॉपर रेक्ट्स क॑ ओकरऽ पहिलऽ आर्गुमेंट के रूप म॑ शामिल करलऽ जाय छै । ट्रिगरिंग तत्व DOM नोड कें दोसर तर्क कें रूप मे पास करल गेलय छै. फंक्शन केँ दू नंबरक संग एकटा सरणी वापस करबाक चाही: skidding , distance . अधिक जानकारी के लेल पॉपर के ऑफसेट डॉक्स देखू .
`popperConfig`	शून्य, वस्तु, कार्य	`null`	बूटस्ट्रैप क पूर्वनिर्धारित Popper कॉन्फ़िगरेशन बदलबाक लेल, देखू Popper क विन्यास . जब॑ कोनों फंक्शन क॑ पॉपर कॉन्फ़िगरेशन बनाबै लेली इस्तेमाल करलऽ जाय छै, त॑ ओकरा एगो ऑब्जेक्ट स॑ कॉल करलऽ जाय छै जेकरा म॑ बूटस्ट्रैप केरऽ डिफ़ॉल्ट पॉपर कॉन्फ़िगरेशन होय छै. इ अहां कें डिफ़ॉल्ट कें उपयोग आ अपन विन्यास कें साथ मर्ज करय मे मदद करयत छै. फंक्शन केँ पॉपर क' लेल एकटा कॉन्फ़िगरेशन ऑब्जेक्ट वापस करबाक चाही.
`reference`	स्ट्रिंग, तत्व, वस्तु	`'toggle'`	ड्रॉपडाउन मेनू के संदर्भ तत्व। `'toggle'`, `'parent'`, एकटा HTMLElement संदर्भ अथवा कोनो वस्तु प्रदान करय बला क मान स्वीकार करैत अछि `getBoundingClientRect`. अधिक जानकारी क लेल पॉपर क कंस्ट्रक्टर डॉक्स आओर वर्चुअल एलिमेंट डॉक्स देखू .

के साथ फंक्शन का प्रयोग`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's parent element पर इवेंट लिस्टनर सेहो जोड़ि सकय छी. hide.bs.dropdownआरू hidden.bs.dropdownघटनाओ ंको एक clickEventगुण (केवल जब मूल घटना प्रकार click) होता हहै जजसमें क्लिक घटना कके वलए एक घटना ऑब्जेक्ट समाहित होता है |

घटना प्रकार	वर्णन
`hide.bs.dropdown`	`hide`जखन इंस्टेंस विधि बजाओल गेल अछि तखन तुरंत फायर करैत अछि.
`hidden.bs.dropdown`	जखन ड्रॉपडाउन उपयोगकर्ता सं नुकायल करनाय समाप्त भ गेल आओर CSS संक्रमण पूरा भ गेल तखन फायर कएल गेल.
`show.bs.dropdown`	`show`इंस्टेंस मेथड कॉल करबा पर तुरंत फायर करैत अछि.
`shown.bs.dropdown`	जखन ड्रॉपडाउन उपयोगकर्ता कें लेल दृश्यमान बना देल गेल छै आ सीएसएस संक्रमण पूरा भ गेल छै तखन फायर कैल गेल छै.

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

ड्रॉपडाउन

अवलोकन

सुलभता

उदाहरण के लिये

एकल बटन

विभाजित बटन

साइजिंग

अन्हार ड्रॉपडाउन

दिशा निर्देश

आर टी एल

केन्द्रित

ड्रॉपअप

ड्रॉपअप केंद्रित

ड्रॉपेंड

ड्रॉपस्टार्ट

मेनू आइटम

चुस्त

अयोग्य बनेनाइ

मेनू संरेखण

प्रतिक्रियाशील संरेखण

संरेखण विकल्प

मेनू सामग्री

हेडर

विभाजक

मूल ग्रन्थ

रूप

ऑटो बंद व्यवहार

सीएसएस

चर

सस्स चर

मिक्सिन

प्रयोग

डेटा विशेषता के माध्यम से

जावास्क्रिप्ट के माध्यम से

`data-bs-toggle="dropdown"`एखनो आवश्यक अछि

विकल्प

के साथ फंक्शन का प्रयोग`popperConfig`

विधियाँ

घटनाक्रम

ड्रॉपडाउन

अवलोकन

सुलभता

उदाहरण के लिये

एकल बटन

विभाजित बटन

साइजिंग

अन्हार ड्रॉपडाउन

दिशा निर्देश

आर टी एल

केन्द्रित

ड्रॉपअप

ड्रॉपअप केंद्रित

ड्रॉपेंड

ड्रॉपस्टार्ट

मेनू आइटम

चुस्त

अयोग्य बनेनाइ

मेनू संरेखण

प्रतिक्रियाशील संरेखण

संरेखण विकल्प

मेनू सामग्री

हेडर

ड्रॉपडाउन हेडर

विभाजक

मूल ग्रन्थ

रूप