דראָפּדאָוונס

טאַגאַל קאָנטעקסטואַל אָוווערלייז פֿאַר ווייַז רשימות פון פֿאַרבינדונגען און מער מיט די באָאָטסטראַפּ דראָפּדאָוון פּלוגין.

איבערבליק

דראָפּדאָוונס זענען טאַגאַלאַבאַל, קאָנטעקסטואַל אָוווערלייז פֿאַר ווייַז רשימות פון לינקס און מער. זיי זענען ינטעראַקטיוו מיט די אַרייַנגערעכנט Bootstrap דראָפּדאָוון דזשאַוואַסקריפּט פּלוגין. זיי זענען טאַגאַלד דורך קליקינג, נישט דורך כאַווערינג; דאָס איז אַ ינטענשאַנאַל פּלאַן באַשלוס .

דראָפּדאָוונס זענען געבויט אויף אַ דריט טיילווייַז ביבליאָטעק, Popper.js , וואָס גיט דינאַמיש פּאַזישאַנינג און וויופּאָרט דיטעקשאַן. זייט זיכער צו אַרייַננעמען popper.min.js איידער Bootstrap ס דזשאַוואַסקריפּט אָדער נוצן bootstrap.bundle.min.js/ bootstrap.bundle.jsוואָס כּולל Popper.js. Popper.js איז נישט געניצט צו שטעלן דראָפּדאָוונס אין נאַוובאַרס, כאָטש דינאַמיש פּאַזישאַנינג איז נישט פארלאנגט.

אויב איר בויען אונדזער דזשאַוואַסקריפּט פֿון מקור, עס ריקווייערזutil.js .

אַקסעסאַביליטי

די WAI ARIA נאָרמאַל דיפיינז אַ פאַקטיש role="menu"ווידזשיט , אָבער דאָס איז ספּעציפיש פֿאַר אַפּלאַקיישאַן-ווי מעניוז וואָס צינגל אַקשאַנז אָדער פאַנגקשאַנז. ARIA מעניוז קענען בלויז אַנטהאַלטן מעניו זאכן, טשעקקבאָקס מעניו זאכן, ראַדיאָ קנעפּל מעניו זאכן, ראַדיאָ קנעפּל גרופּעס און סאַב-מעניוז.

די דראָפּדאָוונס פון Bootstrap, אויף די אנדערע האַנט, זענען דיזיינד צו זיין דזשאַנעריק און אָנווענדלעך צו אַ פאַרשיידנקייַט פון סיטואַטיאָנס און מאַרקאַפּ סטראַקטשערז. פֿאַר בייַשפּיל, עס איז מעגלעך צו שאַפֿן דראָפּדאָוונס וואָס אַנטהאַלטן נאָך ינפּוץ און פאָרעם קאָנטראָלס, אַזאַ ווי זוכן פעלדער אָדער לאָגין פארמען. פֿאַר דעם סיבה, Bootstrap קען נישט דערוואַרטן (און ניט אויטאָמאַטיש לייגן) קיין פון די roleאון aria-אַטריביוץ פארלאנגט פֿאַר אמת ARIA מעניוז. מחברים וועלן האָבן צו אַרייַננעמען די מער ספּעציפיש אַטריביוץ זיך.

אָבער, Bootstrap לייגט אַ געבויט-אין שטיצן פֿאַר רובֿ נאָרמאַל קלאַוויאַטור מעניו ינטעראַקשאַנז, אַזאַ ווי די פיייקייט צו מאַך דורך יחיד .dropdown-itemעלעמענטן ניצן די לויפֿער קיז און פאַרמאַכן די מעניו מיט די ESCשליסל.

ביישפילן

ייַנוויקלען די טאַגאַל פון די דראָפּדאָוון (דיין קנעפּל אָדער לינק) און די דראָפּדאָוון מעניו אין .dropdown, אָדער אן אנדער עלעמענט וואָס דערקלערט position: relative;. דראָפּדאָוונס קענען זיין טריגערד פֿון <a>אָדער <button>עלעמענטן צו בעסער פּאַסיק דיין פּאָטענציעל באדערפענישן.

איין קנעפּל

יעדער איינער .btnקענען זיין פארוואנדלען אין אַ דראָפּדאָוון טאַגאַל מיט עטלעכע מאַרקאַפּ ענדערונגען. דאָ ס ווי איר קענען שטעלן זיי צו אַרבעטן מיט יעדער <button>עלעמענטן:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

און מיט <a>עלעמענטן:

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

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

דער בעסטער טייל איז אַז איר קענען טאָן דאָס מיט קיין וואַריאַנט פון קנעפּלעך:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

סייזינג

קנעפּל דראָפּדאָוונס אַרבעט מיט קנעפּלעך פון אַלע סיזעס, אַרייַנגערעכנט פעליקייַט און שפּאַלטן דראָפּדאָוון קנעפּלעך.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

אינסטרוקציעס

דראָפּופּ

צינגל דראָפּדאָוון מעניוז אויבן עלעמענטן דורך אַדינג .dropupצו די פאָטער עלעמענט.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

דראָפּרייט

צינגל דראָפּדאָוון מעניוז אין די רעכט פון די עלעמענטן דורך אַדינג .droprightצו די פאָטער עלעמענט.

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

דראָפּלעפט

צינגל דראָפּדאָוון מעניוז אין די לינקס פון די עלעמענטן דורך אַדינג .dropleftצו די פאָטער עלעמענט.

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

היסטאָריש די אינהאַלט פון די דראָפּדאָוון מעניו האט צו זיין לינקס, אָבער דאָס איז ניט מער דער פאַל מיט v4. איצט איר קענען אָפּטיאָנאַללי נוצן <button>עלעמענטן אין דיין דראָפּדאָוונס אַנשטאָט פון בלויז <a>s.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

איר קענען אויך שאַפֿן ניט-ינטעראַקטיוו דראָפּדאָוון זאכן מיט .dropdown-item-text. פילן פריי צו סטיל ווייַטער מיט מנהג CSS אָדער טעקסט יוטילאַטיז.

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

אַקטיוו

לייג .activeצו זאכן אין די דראָפּדאָוון צו סטיל זיי ווי אַקטיוו .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

פאַרקריפּלט

לייג .disabledצו זאכן אין די דראָפּדאָוון צו סטיל זיי ווי פאַרקריפּלט .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

דורך פעליקייַט, אַ דראָפּדאָוון מעניו איז אויטאָמאַטיש פּאַזישאַנד 100% פון די שפּיץ און צוזאמען די לינקס זייַט פון זיין פאָטער. לייג .dropdown-menu-rightצו אַ .dropdown-menuרעכט ייַנרייען די דראָפּדאָוון מעניו.

קאָפּ אַרויף! דראָפּדאָוונס זענען פּאַזישאַנד דאַנק צו Popper.js (אַחוץ ווען זיי זענען קאַנטיינד אין אַ נאַוובאַר).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

אָפּרופיק אַליינמאַנט

אויב איר ווילן צו נוצן אָפּרופיק אַליינמאַנט, דיסייבאַל דינאַמיש פּאַזישאַנינג דורך אַדינג די data-display="static"אַטריביוט און נוצן די אָפּרופיק ווערייישאַן קלאסן.

צו ייַנרייען רעכט די דראָפּדאָוון מעניו מיט די געגעבן ברייקפּוינט אָדער גרעסער, לייגן .dropdown-menu{-sm|-md|-lg|-xl}-right.

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

צו ייַנרייען לינקס די דראָפּדאָוון מעניו מיט די געגעבן ברייקפּוינט אָדער גרעסער, לייגן .dropdown-menu-rightאון .dropdown-menu{-sm|-md|-lg|-xl}-left.

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

באַמערקונג אַז איר טאָן ניט דאַרפֿן צו לייגן אַ data-display="static"אַטריביוט צו דראָפּדאָוון קנעפּלעך אין נאַוובאַרס, זינט Popper.js איז נישט געניצט אין נאַוובאַרס.

העאַדערס

לייג אַ כעדער צו לייבלינג סעקשאַנז פון אַקשאַנז אין קיין דראָפּדאָוון מעניו.

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

דיווידערס

באַזונדער גרופּעס פון פֿאַרבונדענע מעניו זאכן מיט אַ דיווידער.

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

טעקסט

שטעלן קיין פריי-פאָרעם טעקסט אין אַ דראָפּדאָוון מעניו מיט טעקסט און נוצן ספּייסינג יוטילאַטיז . באַמערקונג אַז איר וועט מסתּמא דאַרפֿן נאָך סייזינג סטיילז צו באַגרענעצן די מעניו ברייט.

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

Forms

שטעלן אַ פאָרעם אין אַ דראָפּדאָוון מעניו, אָדער מאַכן עס אין אַ דראָפּדאָוון מעניו, און נוצן גרענעץ אָדער וואַטן יוטילאַטיז צו געבן עס די נעגאַטיוו פּלאַץ איר דאַרפֿן.

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <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="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-group">
    <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-offsetאָדער data-referenceצו טוישן דעם אָרט פון די דראָפּדאָוון.

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </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-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

באַניץ

דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט, די דראָפּדאָוון פּלוגין טאַגאַלז פאַרבאָרגן אינהאַלט (דראָפּדאָוון מעניוז) דורך טאַגאַלינג די .showקלאַס אויף די פאָטער רשימה נומער. די data-toggle="dropdown"אַטריביוט איז רילייד אויף פֿאַר קלאָוזינג דראָפּדאָוון מעניוז אויף אַ אַפּלאַקיישאַן מדרגה, אַזוי עס איז אַ גוטע געדאַנק צו שטענדיק נוצן עס.

On touch-enabled devices, opening a dropdown adds empty ($.noop) mouseover handlers to the immediate children of the <body> element. This admittedly ugly hack is necessary to work around a quirk in iOS’ event delegation, which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty mouseover handlers are removed.

Via data attributes

Add data-toggle="dropdown" to a link or button to toggle a dropdown.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

Via JavaScript

Call the dropdowns via JavaScript:

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"` still required

Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-toggle="dropdown" is always required to be present on the dropdown’s trigger element.

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".

Name	Type	Default	Description
offset	number \| string \| function	0	Offset of the dropdown relative to its target. When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument. For more information refer to Popper.js's offset docs.
flip	boolean	true	Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper.js's flip docs.
boundary	string \| element	'scrollParent'	Overflow constraint boundary of the dropdown menu. Accepts the values of `'viewport'`, `'window'`, `'scrollParent'`, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.
reference	string \| element	'toggle'	Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, or an HTMLElement reference. For more information refer to Popper.js's referenceObject docs.
display	string	'dynamic'	By default, we use Popper.js for dynamic positioning. Disable this with `static`.
popperConfig	null \| object	null	To change Bootstrap's default Popper.js config, see Popper.js's configuration

Note when boundary is set to any value other than 'scrollParent', the style position: static is applied to the .dropdown container.

Methods

Method	Description
`$().dropdown('toggle')`	Toggles the dropdown menu of a given navbar or tabbed navigation.
`$().dropdown('show')`	Shows the dropdown menu of a given navbar or tabbed navigation.
`$().dropdown('hide')`	Hides the dropdown menu of a given navbar or tabbed navigation.
`$().dropdown('update')`	Updates the position of an element’s dropdown.
`$().dropdown('dispose')`	Destroys an element’s dropdown.

Events

All dropdown events are fired at the .dropdown-menu’s parent element and have a relatedTarget property, whose value is the toggling anchor element. hide.bs.dropdown and hidden.bs.dropdown events have a clickEvent property (only when the original event type is click) that contains an Event Object for the click event.

Event	Description
`show.bs.dropdown`	This event fires immediately when the show instance method is called.
`shown.bs.dropdown`	דער געשעעניש איז פייערד ווען די דראָפּדאָוון איז קענטיק צו דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן).
`hide.bs.dropdown`	דעם געשעעניש איז פייערד מיד ווען די באַהאַלטן בייַשפּיל אופֿן איז גערופן.
`hidden.bs.dropdown`	דער געשעעניש איז פייערד ווען די דראָפּדאָוון איז פאַרטיק צו זיין פאַרבאָרגן פון דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})

דראָפּדאָוונס

איבערבליק

אַקסעסאַביליטי

ביישפילן

איין קנעפּל

שפּאַלטן קנעפּל

סייזינג

אינסטרוקציעס

דראָפּופּ

דראָפּרייט

דראָפּלעפט

מעניו זאכן

אַקטיוו

פאַרקריפּלט

מעניו אַליינמאַנט

אָפּרופיק אַליינמאַנט

מעניו אינהאַלט

העאַדערס

דיווידערס

טעקסט

Forms

באַניץ

Via data attributes

Via JavaScript

`data-toggle="dropdown"` still required

Options

Methods

Events

דראָפּדאָוונס

איבערבליק

אַקסעסאַביליטי

ביישפילן

איין קנעפּל

שפּאַלטן קנעפּל

סייזינג

אינסטרוקציעס

דראָפּופּ

דראָפּרייט

דראָפּלעפט

מעניו זאכן

אַקטיוו

פאַרקריפּלט

מעניו אַליינמאַנט

אָפּרופיק אַליינמאַנט

מעניו אינהאַלט

העאַדערס

דראָפּדאָוון כעדער

דיווידערס

טעקסט

Forms

דראָפּדאָוון אָפּציעס

באַניץ

Via data attributes

Via JavaScript

data-toggle="dropdown" still required

Options

Methods

Events

`data-toggle="dropdown"` still required