मुख्य सामग्री पर जाएँ docs नेविगेशनं प्रति गच्छतु
in English

ड्रॉपडाउन्स्

Bootstrap ड्रॉप्डाउन प्लगिन् इत्यनेन सह लिङ्क्-सूचीनां प्रदर्शयितुं सन्दर्भ-ओवरलेस् टॉग्ल् कुर्वन्तु ।

इस पृष्ठ पर

अवलोकनम्

ड्रॉपडाउन्स् टॉग्लेबलाः सन्ति, लिङ्क्-सूचीनां प्रदर्शनार्थं सन्दर्भात्मक-ओवरलेस् इत्यादीनि च । ते समाविष्टेन Bootstrap ड्रॉपडाउन JavaScript प्लगिन् इत्यनेन सह अन्तरक्रियाशीलाः कृताः सन्ति । ते क्लिक् कृत्वा टोग्ल् भवन्ति, न तु होवरिंग् इत्यनेन; एषः एकः इच्छितः डिजाइननिर्णयः अस्ति .

ड्रॉपडाउन्स् तृतीयपक्षपुस्तकालयस्य उपरि निर्मिताः सन्ति, Popper , यत् गतिशीलं स्थितिं दृश्यपोर्ट् अन्वेषणं च प्रदाति । Bootstrap इत्यस्य JavaScript इत्यस्मात् पूर्वं popper.min.js इत्येतत् अवश्यमेव समाविष्टं कुर्वन्तु अथवा bootstrap.bundle.min.js/ इत्यस्य उपयोगं कुर्वन्तु bootstrap.bundle.jsयस्मिन् Popper अस्ति । Popper इत्यस्य उपयोगः navbars मध्ये dropdowns इत्यस्य स्थितिं कर्तुं न भवति यद्यपि गतिशीलस्थापनस्य आवश्यकता नास्ति।

सुलभता

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

बूटस्ट्रैप् इत्यस्य ड्रॉप्डाउन्स् तु सामान्यरूपेण विविधपरिस्थितिषु मार्कअपसंरचनेषु च प्रयोज्यरूपेण परिकल्पिताः सन्ति । यथा, अन्वेषणक्षेत्राणि अथवा प्रवेशप्रपत्राणि इत्यादीनि अतिरिक्तनिवेशानि तथा रूपनियन्त्रणानि च समाविष्टानि ड्रॉपडाउन्स् निर्मातुं शक्यते । अस्य कारणात्, Bootstrap सत्यानां ARIA मेनूनां कृते आवश्यकानां roleand विशेषतानां कस्यापि अपेक्षां न करोति (न च स्वयमेव योजयति) । लेखकैः एतानि अधिकविशिष्टानि विशेषतानि स्वयमेव समावेशितव्यानि भविष्यन्ति।aria-

तथापि, Bootstrap अधिकांशमानककीबोर्डमेनूपरस्परक्रियाणां कृते अन्तःनिर्मितसमर्थनं योजयति, यथा .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 मध्ये Bootstrap इत्यस्य उपयोगं कुर्वन् निर्देशाः प्रतिबिम्बिताः भवन्ति, अर्थः .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>or <button>elements इत्यस्य उपयोगं dropdown items इत्यस्य रूपेण कर्तुं शक्नोति ।

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

<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-enda मध्ये योजयन्तु .dropdown-menuदक्षिणतः ड्रॉपडाउन मेनू संरेखयन्तु । RTL मध्ये 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 मध्ये dropdown बटन् मध्ये विशेषतां योजयितुं आवश्यकता नास्ति data-bs-display="static", यतः navbars मध्ये Popper इत्यस्य उपयोगः न भवति ।

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

उपरि दर्शितानां अधिकांशविकल्पानां गृहीत्वा, अत्र एकस्मिन् स्थाने विविध-ड्रॉपडाउन-संरेखण-विकल्पानां लघु-पाकशाला-सिंक-प्रदर्शनम् अस्ति ।

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

CSS-आधारित-कैरेट्-कृते चराः ये एकस्य ड्रॉप्-डाउनस्य अन्तरक्रियाशीलतां सूचयन्ति:

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

मिक्सिन्

CSS-आधारित-कैरेट्-जननार्थं मिक्सिन्-इत्यस्य उपयोगः भवति तथा च scss/mixins/_caret.scss.

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

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

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

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

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

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

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

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

प्रयोगः

.showdata attributes अथवा JavaScript इत्यस्य माध्यमेन, ड्रॉपडाउन प्लगइनः parent इत्यत्र वर्गं टॉगल कृत्वा गुप्तसामग्री (dropdown menus) टॉगल करोति .dropdown-menu। एप्लिकेशनस्तरस्य ड्रॉपडाउन मेन्यू बन्दं कर्तुं data-bs-toggle="dropdown"विशेषता अवलम्ब्यते, अतः सर्वदा तस्य उपयोगः उत्तमः विचारः अस्ति ।

स्पर्श-सक्षम-यन्त्रेषु, एकं ड्रॉप्-डाउन् उद्घाट्य तत्त्वस्य mouseoverतत्कालीन-सन्ततिषु रिक्त-हन्डलर् -इत्येतत् योजयति । <body>This admittedly ugly hack is necessary to work around a quirk in iOS' event delegation , यत् अन्यथा ड्रॉपडाउनस्य बहिः कुत्रापि नलः ड्रॉपडाउनं बन्दं करोति इति कोडं प्रेरयितुं निवारयिष्यति। एकदा ड्रॉप्डाउन् बन्दं जातं चेत्, एते अतिरिक्तरिक्ताः 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"अद्यापि आवश्यकम्

भवान् जावास्क्रिप्ट् मार्गेण स्वस्य ड्रॉप्डाउन् आह्वयति वा तस्य स्थाने data-api इत्यस्य उपयोगं करोति वा इति न data-bs-toggle="dropdown"कृत्वा, ड्रॉप्डाउन् इत्यस्य ट्रिगर एलिमेण्ट् इत्यत्र सर्वदा उपस्थितः भवितुम् आवश्यकम् अस्ति ।

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-bs-योजयन्तु data-bs-offset=""। डेटा विशेषताद्वारा विकल्पान् पारयन्ते सति विकल्पनामस्य case प्रकारं camelCase तः kebab-case मध्ये परिवर्तयितुं सुनिश्चितं कुर्वन्तु । यथा - इत्यस्य उपयोगस्य स्थाने data-bs-autoClose="false", इत्यस्य उपयोगं कुर्वन्तु data-bs-auto-close="false"।

नामः प्रकारः मूलभूतम्‌ वर्णनम्‌
boundary तार | तत्व 'clippingParents' ड्रॉपडाउन मेनूस्य Overflow constraint सीमा (केवलं Popper इत्यस्य preventOverflow modifier कृते प्रवर्तते) । पूर्वनिर्धारितरूपेण इदं 'clippingParents'HTMLElement सन्दर्भं (केवलं JavaScript मार्गेण) स्वीकुर्वितुं शक्नोति च । अधिकविवरणार्थं Popper इत्यस्य detectOverflow docs पश्यन्तु ।
reference तार | तत्व | वस्तु 'toggle' ड्रॉपडाउन मेनू का सन्दर्भ तत्व। 'toggle', 'parent', HTMLElement सन्दर्भस्य अथवा प्रदातुं वस्तुनः मूल्यानि स्वीकुर्वति getBoundingClientRect। अधिकसूचनार्थं Popper इत्यस्य constructor docs तथा virtual element docs इति पश्यन्तु ।
display सूत्र 'dynamic' पूर्वनिर्धारितरूपेण, वयं गतिशीलस्थापनार्थं Popper इत्यस्य उपयोगं कुर्मः । इत्यनेन एतत् निष्क्रियं कुर्वन्तु static।
offset सरणी | तार | नियोग [0, 2]

तस्य लक्ष्यस्य सापेक्षं ड्रॉपडाउनस्य आफ्सेट् । अल्पविरामेन पृथक्कृतैः मूल्यैः सह data attributes इत्यत्र स्ट्रिंग् पारयितुं शक्नुवन्ति यथा:data-bs-offset="10,20"

यदा offset निर्धारयितुं फंक्शन् उपयुज्यते तदा तस्य प्रथमं तर्करूपेण popper placement, reference, popper rects च समाविष्टेन वस्तुना सह आह्वयते ट्रिगरिंग् एलिमेण्ट् DOM नोड् द्वितीयं आर्गुमेण्ट् रूपेण पारितं भवति । फंक्शन् द्वयोः सङ्ख्यायोः सह सरणीं प्रत्यागन्तुं अर्हति: .[skidding, distance]

अधिकविवरणार्थं Popper's offset docs पश्यन्तु ।
autoClose बूलियन | सूत्र true

ड्रॉपडाउनस्य auto close व्यवहारं विन्यस्यताम्:

  • true- ड्रॉपडाउन मेन्यू इत्यस्य बहिः अथवा अन्तः क्लिक् कृत्वा ड्रॉप् डाउन् बन्दं भविष्यति ।
  • falsehide- toggle बटनं नुत्वा मैन्युअल् रूपेण वा toggleमेथड् नुत्वा ड्रॉप्डाउन् बन्दं भविष्यति । esc(अपि च कीलम् नुदन् न बन्दं भविष्यति )
  • 'inside'- ड्रॉपडाउन मेन्यू इत्यस्य अन्तः क्लिक् कृत्वा ड्रॉप् डाउन् (केवलम्) बन्दं भविष्यति ।
  • 'outside'- ड्रॉपडाउन मेनूतः बहिः क्लिक् कृत्वा ड्रॉपडाउन् (केवलम्) बन्दं भविष्यति ।
popperConfig शून्य | वस्तु | नियोग null

Bootstrap इत्यस्य पूर्वनिर्धारितं Popper विन्यासं परिवर्तयितुं, Popper इत्यस्य विन्यासं पश्यन्तु ।

यदा Popper विन्यासस्य निर्माणार्थं फंक्शन् उपयुज्यते तदा तत् एकेन वस्तुना सह आह्वयते यस्मिन् Bootstrap इत्यस्य पूर्वनिर्धारितं Popper विन्यासः भवति । इदं भवन्तं पूर्वनिर्धारितं स्वस्य विन्यासेन सह उपयोक्तुं विलीनीकरणं च कर्तुं साहाय्यं करोति । फंक्शन् इत्यनेन Popper कृते विन्यासवस्तुं प्रत्यागन्तुं भवति ।

सह function का प्रयोग करते हुए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's parent element इत्यत्र event listeners अपि योजयितुं शक्नोति । hide.bs.dropdownतथा च hidden.bs.dropdownइवेण्ट्स् मध्ये एकः clickEventगुणः भवति (केवलं यदा मूल Event प्रकारः भवति click) यस्मिन् क्लिक् इवेण्ट् कृते Event Object भवति ।

प्रक्रिया वर्णनम्‌
show.bs.dropdown show instance विधिः आह्वयते चेत् तत्क्षणमेव अग्निः भवति ।
shown.bs.dropdown यदा ड्रॉपडाउन उपयोक्त्रे दृश्यमानं कृतं भवति तथा च CSS संक्रमणानि सम्पन्नानि भवन्ति तदा निष्कासितम्।
hide.bs.dropdown यदा hide instance मेथड् आहूतम् अस्ति तदा तत्क्षणमेव अग्निम् करोति ।
hidden.bs.dropdown यदा उपयोक्त्रेण गोपनं समाप्तं भवति तथा च CSS संक्रमणं सम्पन्नं भवति तदा निष्कासितम्। 
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})