Source

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯇꯧꯕꯥ꯫

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯄ꯭ꯂꯒꯏꯅꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯇꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯍꯦꯟꯅꯥ ꯎꯠꯅꯕꯒꯤꯗꯃꯛ ꯀꯟꯇꯦꯛꯁꯆꯨꯑꯦꯜ ꯑꯣꯚꯔꯂꯦꯏꯁꯤꯡ ꯇꯣꯒꯜ ꯇꯧ꯫

ꯑꯣꯚꯔꯚꯤꯌꯨ ꯇꯧꯕꯥ꯫

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡ ꯑꯁꯤ ꯇꯣꯒꯜ ꯇꯧꯕꯥ ꯌꯥꯕꯥ, ꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯇꯁꯤꯡ ꯎꯠꯅꯕꯒꯤꯗꯃꯛ ꯀꯟꯇꯦꯛꯁꯆꯨꯑꯦꯜ ꯑꯣꯚꯔꯂꯦꯏꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯀꯌꯥ ꯑꯃꯅꯤ꯫ ꯃꯈꯣꯌ ꯑꯁꯤ ꯌꯥꯑꯣꯔꯤꯕꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯄ꯭ꯂꯒꯏꯅꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯏꯟꯇꯔꯦꯛꯇꯤꯕ ꯑꯣꯏꯍꯜꯂꯤ꯫ ꯃꯈꯣꯌ ꯑꯁꯤ ꯀ꯭ꯂꯤꯛ ꯇꯧꯗꯨꯅꯥ ꯇꯣꯒꯜ ꯇꯧꯏ, ꯍꯣꯚꯔ ꯇꯧꯗꯨꯅꯥ ꯅꯠꯇꯦ; ꯃꯁꯤ ꯏꯟꯇꯦꯟꯁꯅꯦꯜ ꯗꯤꯖꯥꯏꯅꯒꯤ ꯋꯥꯔꯦꯞ ꯑꯃꯅꯤ꯫

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡ ꯑꯁꯤ ꯊꯥꯔꯗ ꯄꯥꯔꯇꯤ ꯂꯥꯏꯕ꯭ꯔꯦꯔꯤ ꯑꯃꯗꯥ ꯁꯦꯃꯒꯠꯂꯤ, Popper.js , ꯃꯁꯤꯅꯥ ꯗꯥꯏꯅꯥꯃꯤꯛ ꯑꯣꯏꯕꯥ ꯄꯣꯖꯤꯁꯟ ꯑꯃꯁꯨꯡ ꯚꯤꯎꯄꯣꯔꯠ ꯗꯤꯇꯦꯛꯁꯟ ꯄꯤꯔꯤ꯫ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯃꯃꯥꯡꯗꯥ popper.min.js ꯁꯣꯌꯗꯅꯥ ꯌꯥꯑꯣꯍꯅꯕꯤꯌꯨ ꯅꯠꯔꯒꯥ Popper.js ꯌꯥꯑꯣꯕꯥ bootstrap.bundle.min.js/ bootstrap.bundle.jsꯁꯤꯖꯤꯟꯅꯕꯤꯌꯨ. Popper.js ꯑꯁꯤ ꯗꯥꯏꯅꯥꯃꯤꯛ ꯑꯣꯏꯕꯥ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯕꯒꯤ ꯃꯊꯧ ꯇꯥꯗꯕꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯅꯦꯚꯕꯥꯔꯁꯤꯡꯗꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯕꯗꯥ ꯁꯤꯖꯤꯟꯅꯗꯦ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯁꯤ ꯁꯣꯔꯁꯇꯒꯤ ꯁꯦꯃꯒꯠꯂꯕꯗꯤ, ꯃꯁꯤꯗꯥutil.js .

ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤ ꯂꯩꯕꯥ꯫

WAI ARIA ꯁ꯭ꯇꯦꯟꯗꯔꯗꯅꯥ ꯇꯁꯦꯡꯕꯥ role="menu"ꯋꯤꯖꯇꯦꯝ ꯑꯃꯥ ꯗꯤꯐꯥꯏꯟ ꯇꯧꯏ , ꯑꯗꯨꯕꯨ ꯃꯁꯤ ꯑꯦꯛꯁꯅꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯕꯥ ꯑꯦꯞꯂꯤꯀꯦꯁꯅꯒꯨꯝꯕꯥ ꯃꯦꯅꯨꯁꯤꯡꯗꯥ ꯑꯀꯛꯅꯕꯥ ꯑꯣꯏ꯫ ꯑꯦ.ꯑꯥꯔ.ꯑꯥꯏ.ꯑꯦ.ꯒꯤ ꯃꯦꯅꯨꯁꯤꯡꯗꯥ ꯃꯦꯅꯨ ꯑꯥꯏꯇꯦꯃꯁꯤꯡ, ꯆꯦꯀꯕꯣꯛꯁ ꯃꯦꯅꯨ ꯑꯥꯏꯇꯦꯃꯁꯤꯡ, ꯔꯦꯗꯤꯑꯣ ꯕꯇꯟ ꯃꯦꯅꯨ ꯑꯥꯏꯇꯦꯃꯁꯤꯡ, ꯔꯦꯗꯤꯑꯣ ꯕꯇꯟ ꯒ꯭ꯔꯨꯄꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯁꯕ-ꯃꯦꯅꯨꯁꯤꯡ ꯈꯛꯇꯃꯛ ꯌꯥꯑꯣꯕꯥ ꯌꯥꯏ꯫

ꯃꯥꯌꯀꯩ ꯑꯃꯔꯣꯃꯗꯥ, ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡ ꯑꯁꯤ ꯖꯦꯅꯦꯔꯦꯜ ꯑꯣꯏꯅꯥ ꯑꯃꯁꯨꯡ ꯃꯈꯜ ꯀꯌꯥꯒꯤ ꯐꯤꯚꯃꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯥꯔꯀꯑꯥꯞ ꯁ꯭ꯠꯔꯀꯆꯔꯁꯤꯡꯗꯥ ꯑꯦꯞꯂꯤꯀꯦꯕꯜ ꯑꯣꯏꯅꯥ ꯗꯤꯖꯥꯏꯟ ꯇꯧꯕꯅꯤ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯑꯍꯦꯅꯕꯥ ꯏꯅꯄꯨꯠꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯂꯁꯤꯡ ꯌꯥꯑꯣꯕꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡ ꯁꯦꯝꯕꯥ ꯌꯥꯏ, ꯃꯈꯣꯌꯁꯤꯡ ꯑꯗꯨꯗꯤ ꯁꯥꯔꯆ ꯐꯤꯜꯗꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯂꯣꯒꯏꯟ ꯐꯣꯔꯃꯁꯤꯡꯅꯤ꯫ ꯃꯔꯝ ꯑꯁꯤꯅꯥ, ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯅꯥ ꯑꯆꯨꯝꯕꯥ ARIA ꯃꯦꯅꯨꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯃꯊꯧ ꯇꯥꯕꯥ roleꯑꯃꯁꯨꯡ ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠ ꯑꯃꯠꯇꯥ ꯑꯦꯛꯁꯄꯦꯛꯇ ꯇꯧꯗꯦ (ꯅꯠꯔꯒꯥ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯣꯏ)꯫ ꯑꯣꯊꯣꯔꯤꯇꯤꯁꯤꯡꯅꯥ ꯃꯈꯣꯌ ꯃꯁꯥꯅꯥ ꯍꯦꯟꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠꯁꯤꯡ ꯑꯁꯤ ꯌꯥꯑꯣꯍꯅꯒꯗꯕꯅꯤ꯫aria-

ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯅꯥ ꯑꯌꯥꯝꯕꯥ ꯁ꯭ꯇꯦꯟꯗꯔꯗ ꯀꯤꯕꯣꯔꯗ ꯃꯦꯅꯨ ꯏꯟꯇꯔꯦꯛꯁꯅꯁꯤꯡꯒꯤꯗꯃꯛ ꯕꯤꯜꯇ-ꯏꯟ ꯁꯄꯣꯔꯠ ꯍꯥꯄꯆꯤꯜꯂꯤ, .dropdown-itemꯃꯗꯨꯗꯤ ꯀꯔꯁꯔ ꯀꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯃꯤꯑꯣꯏ ꯑꯃꯃꯃꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯆꯠꯊꯣꯛ-ꯆꯠꯁꯤꯟ ꯇꯧꯕꯥ ꯉꯝꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯤ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯦꯅꯨ ꯑꯗꯨ ꯂꯣꯗ ꯇꯧꯕꯥ ESCꯉꯝꯕꯅꯤ꯫

ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯒꯤ ꯇꯣꯒꯜ (ꯅꯍꯥꯛꯀꯤ ꯕꯇꯟ ꯅꯠꯠꯔꯒꯥ ꯂꯤꯉ꯭ꯛ) ꯑꯃꯁꯨꯡ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨꯒꯤ ꯃꯅꯨꯡꯗꯥ .dropdown, ꯅꯠꯠꯔꯒꯥ position: relative;. ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡ ꯑꯁꯤ ꯅꯍꯥꯛꯀꯤ ꯄꯣꯇꯦꯟꯁꯤꯑꯦꯜ ꯗꯔꯀꯥꯔ ꯑꯣꯏꯕꯁꯤꯡꯗꯨ ꯍꯦꯟꯅꯥ ꯐꯅꯥ ꯆꯨꯃꯊꯣꯛꯅꯕꯥ <a>ꯅꯠꯠꯔꯒꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯒꯤ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯕꯥ ꯌꯥꯏ꯫<button>

ꯁꯤꯉ꯭ꯒꯜ ꯕꯇꯟ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡ꯫

ꯁꯤꯉ꯭ꯒꯜ ꯑꯃꯍꯦꯛꯇꯕꯨ .btnꯃꯥꯔꯀꯑꯥꯞ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯈꯔꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯇꯣꯒꯜ ꯑꯃꯗꯥ ꯑꯣꯟꯊꯣꯀꯄꯥ ꯌꯥꯏ꯫ ꯃꯈꯣꯌꯕꯨ ꯃꯇꯧ ꯀꯔꯝꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯍꯦꯛꯇꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯥ ꯌꯥꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ <button>:

Action Another action Something else here 
<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>ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ:

Action Another action Something else here 
<div class="dropdown show">
  <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>

ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯋꯥꯐꯃꯗꯤ ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤ ꯕꯇꯟ ꯚꯦꯔꯤꯑꯦꯟꯇ ꯑꯃꯍꯦꯛꯇꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯇꯧꯕꯥ ꯌꯥꯏ, ꯃꯗꯨꯁꯨ:

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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ꯀꯦꯔꯦꯠꯀꯤ ꯃꯥꯏꯀꯩ ꯑꯃꯔꯣꯃꯗꯥ ꯂꯩꯕꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯗꯨ ꯲꯵% ꯍꯟꯊꯍꯟꯅꯕꯥ ꯑꯃꯁꯨꯡ margin-leftꯆꯥꯡ ꯅꯥꯏꯅꯥ ꯕꯇꯟ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯍꯥꯄꯆꯤꯜꯂꯕꯥ ꯑꯗꯨ ꯂꯧꯊꯣꯛꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯑꯍꯦꯅꯕꯥ ꯑꯍꯣꯡꯕꯁꯤꯡ ꯑꯗꯨꯅꯥ ꯀꯦꯔꯦꯠ ꯑꯗꯨ ꯁ꯭ꯞꯂꯤꯠ ꯕꯇꯟ ꯑꯗꯨꯗꯥ ꯁꯦꯟꯇꯔ ꯇꯧꯗꯨꯅꯥ ꯊꯝꯃꯤ ꯑꯃꯁꯨꯡ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯕꯇꯟ ꯑꯗꯨꯒꯤ ꯃꯅꯥꯛꯇꯥ ꯍꯦꯟꯅꯥ ꯃꯇꯤꯛ ꯆꯥꯕꯥ ꯁꯥꯏꯖꯒꯤ ꯍꯤꯠ ꯑꯦꯔꯤꯌꯥ ꯑꯃꯥ ꯄꯤ꯫

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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ꯇꯧ꯫

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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ꯇꯧ꯫

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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ꯇꯧ꯫

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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ꯗꯥ ꯃꯗꯨ ꯍꯧꯖꯤꯛ ꯑꯣꯏꯗ꯭ꯔꯦ꯫ ꯍꯧꯖꯤꯛꯇꯤ ꯅꯍꯥꯛꯅꯥ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯣꯏꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡꯗꯥ ꯁꯨꯞꯅꯒꯤ s <button>ꯈꯛꯇꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯔꯦ꯫<a>

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

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ, ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨ ꯑꯃꯥ ꯃꯊꯛꯇꯒꯤ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯤ ꯃꯃꯥ-ꯃꯄꯥꯒꯤ ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯃꯐꯝ ꯑꯗꯨꯗꯥ ꯑꯣꯇꯣꯃꯦꯇꯦꯗ ꯑꯣꯏꯅꯥ 100% ꯄꯣꯖꯤꯁꯟ ꯇꯧꯏ꯫ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨ ꯑꯗꯨ ꯔꯥꯏꯠ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯅꯕꯥ .dropdown-menu-rightaꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫.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>

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯑꯦꯛꯁꯅꯁꯤꯡꯒꯤ ꯁꯦꯛꯁꯅꯁꯤꯡ ꯂꯦꯕꯦꯜ ꯇꯧꯅꯕꯥ ꯍꯦꯗ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯍꯦꯗ ꯇꯧꯕꯥ꯫
ꯊꯕꯛ ꯑꯇꯣꯞꯄꯥ ꯑꯦꯛꯁꯟ ꯑꯃꯅꯤ꯫ 
<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">
  <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-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </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-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

ꯑꯦꯛꯇꯤꯕ ꯃꯦꯅꯨ ꯑꯥꯏꯇꯦꯃꯁꯤꯡ꯫

ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯅꯥ ꯁ꯭ꯇꯥꯏꯜ.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="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

.showꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ, ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ ꯃꯃꯥ-ꯃꯄꯥꯒꯤ ꯂꯤꯁ꯭ꯠ ꯑꯥꯏꯇꯦꯝ ꯑꯗꯨꯗꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯇꯣꯒꯜ ꯇꯧꯗꯨꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯀꯟꯇꯦꯟꯇ (ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨꯁꯤꯡ) ꯇꯣꯒꯜ ꯇꯧꯏ꯫ ꯑꯦꯞꯂꯤꯀꯦꯁꯅꯒꯤ data-toggle="dropdown"ꯊꯥꯛ ꯑꯃꯗꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨꯁꯤꯡ ꯂꯣꯗ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯁꯤ ꯊꯥꯖꯕꯥ ꯊꯝꯂꯤ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯑꯁꯤ ꯑꯐꯕꯥ ꯋꯥꯈꯜꯂꯣꯟ ꯑꯃꯅꯤ꯫

ꯇꯆ-ꯏꯅꯦꯕꯜ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯗꯥ, ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯃꯥ ꯍꯥꯡꯗꯣꯀꯄꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯈꯨꯗꯛꯀꯤ ꯑꯣꯏꯕꯥ ꯑꯉꯥꯡꯁꯤꯡꯗꯥ ꯏꯝꯄꯦꯛꯇ ( $.noop) ꯍꯦꯟꯗꯂꯔꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯤ꯫ ꯃꯁꯤꯒꯤ ꯌꯥꯕꯥ ꯉꯃꯗꯕꯥ ꯐꯠꯇꯕꯥ ꯍꯦꯛ ꯑꯁꯤ ꯑꯥꯏ.ꯑꯣ.ꯑꯦꯁ.ꯀꯤ ꯏꯚꯦꯟꯇ ꯗꯦꯂꯤꯒꯦꯁꯟꯗꯥ ꯀꯨꯏꯔꯛ ꯑꯃꯒꯤ ꯑꯀꯣꯌꯕꯗꯥ ꯊꯕꯛ ꯇꯧꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯏ , ꯃꯁꯤꯅꯥ ꯅꯠꯔꯕꯗꯤ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯒꯤ ꯃꯄꯥꯟꯗꯥ ꯂꯩꯕꯥ ꯃꯐꯝ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯇꯦꯞ ꯑꯃꯅꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯗꯨ ꯂꯣꯠꯁꯤꯜꯂꯤꯕꯥ ꯀꯣꯗ ꯑꯗꯨ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯕꯥ ꯊꯤꯡꯒꯅꯤ꯫ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯗꯨ ꯂꯣꯗ ꯇꯧꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ, ꯑꯍꯦꯅꯕꯥ ꯏꯝꯄꯦꯛꯇ ꯍꯦꯟꯗꯂꯔꯁꯤꯡ ꯑꯁꯤ ꯂꯧꯊꯣꯀꯏ꯫mouseover<body>mouseover

ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

data-toggle="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>

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡ ꯀꯜ ꯇꯧꯕꯤꯌꯨ:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"ꯍꯧꯖꯤꯀꯁꯨ ꯃꯊꯧ ꯇꯥꯏ꯫

ꯅꯍꯥꯛꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯗꯨ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯀꯧꯔꯕꯁꯨ ꯅꯠꯠꯔꯒꯥ ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯗꯦꯇꯥ-ꯑꯦꯄꯤꯑꯥꯏ ꯁꯤꯖꯤꯟꯅꯔꯕꯁꯨ, data-toggle="dropdown"ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯒꯤ ꯇ꯭ꯔꯤꯒꯔ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯂꯩꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡ ꯑꯗꯨ data-, data-offset="".

ꯃꯤꯡ ꯃꯈꯜ ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ ꯋꯥꯔꯣꯜ
ꯑꯣꯐꯁꯦꯠ ꯇꯧꯕꯥ꯫ ꯃꯁꯤꯡ | ꯁ꯭ꯠꯔꯤꯡ | ꯃꯊꯧ ꯰ ꯃꯁꯤꯒꯤ ꯄꯥꯟꯗꯝ ꯑꯗꯨꯒꯥ ꯆꯥꯡꯗꯝꯅꯕꯗꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯗꯨꯒꯤ ꯑꯣꯐꯁꯦꯠ꯫ ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ Popper.jsꯒꯤ ꯑꯣꯐꯁꯦꯠ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯌꯦꯡꯕꯤꯌꯨ .
ꯑꯣꯟꯊꯣꯛꯄ ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫ ꯑꯆꯨꯝꯕ ꯔꯦꯐꯥꯔꯦꯟꯁ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯑꯣꯚꯔꯂꯦꯞ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯗꯨ ꯐ꯭ꯂꯤꯞ ꯇꯧꯕꯥ ꯌꯥꯍꯅꯒꯗꯕꯅꯤ꯫ ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ Popper.jsꯒꯤ ꯐ꯭ꯂꯤꯞ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯌꯦꯡꯕꯤꯌꯨ .
ꯉꯃꯈꯩꯗꯥ ꯂꯩ꯫ ꯁ꯭ꯠꯔꯤꯡ | ꯄꯣꯠꯂꯝ ‘ꯁ꯭ꯛꯔꯣꯂꯄꯦꯔꯦꯟꯇ’ ꯑꯁꯤꯅꯤ꯫ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨꯒꯤ ꯑꯣꯚꯔꯐ꯭ꯂꯣ ꯀꯟꯠꯔꯣꯜ ꯕꯣꯎꯟꯗꯔꯤ꯫ 'viewport', 'window', 'scrollParent', ꯅꯠꯠꯔꯒꯥ HTMLElement ꯔꯦꯐꯥꯔꯦꯟꯁ ꯑꯃꯒꯤ ꯚꯦꯜꯌꯨꯁꯤꯡ (ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯈꯛꯇꯗꯥ) ꯌꯥꯔꯦ. ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ Popper.jsꯒꯤ preventOverflow docs ꯌꯦꯡꯕꯤꯌꯨ .

boundary, ꯅꯠꯇꯕꯥ ꯑꯇꯣꯞꯄꯥ ꯚꯦꯜꯌꯨ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯁꯦꯠ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯅꯣꯠ ꯇꯧꯕꯤꯌꯨ 'scrollParent', ꯁ꯭ꯇꯥꯏꯜ ꯑꯗꯨ ꯀꯟꯇꯦꯅꯔ position: staticꯑꯗꯨꯗꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ ..dropdown

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

ꯊꯧꯑꯪꯡ ꯋꯥꯔꯣꯜ
$().dropdown('toggle') ꯑꯄꯤꯕꯥ ꯅꯦꯚꯕꯥꯔ ꯅꯠꯠꯔꯒꯥ ꯇꯦꯕꯜ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯑꯃꯒꯤ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨ ꯇꯣꯒꯜ ꯇꯧꯏ꯫
$().dropdown('update') ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯒꯤ ꯄꯣꯖꯤꯁꯟ ꯑꯗꯨ ꯑꯄꯗꯦꯠ ꯇꯧꯏ꯫
$().dropdown('dispose') ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯗꯨ ꯃꯥꯡꯍꯜꯂꯤ꯫

ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯏꯚꯦꯟꯇ ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ .dropdown-menu'ꯒꯤ ꯃꯃꯥ-ꯃꯄꯥꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ ꯑꯃꯁꯨꯡ relatedTargetꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯃꯥ ꯂꯩ, ꯃꯁꯤꯒꯤ ꯚꯦꯜꯌꯨ ꯑꯁꯤ ꯇꯣꯒꯂꯤꯡ ꯑꯦꯉ꯭ꯀꯔ ꯑꯦꯂꯤꯃꯦꯟꯇꯅꯤ꯫

ꯊꯧꯔꯝ ꯋꯥꯔꯣꯜ
show.bs.dropdown ꯁꯣ ꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯀꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
shown.bs.dropdown ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯗꯨ ꯌꯨꯖꯔꯅꯥ ꯎꯕꯥ ꯐꯪꯂꯕꯥ ꯃꯇꯃꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ (CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯉꯥꯏꯒꯅꯤ, ꯃꯄꯨꯡ ꯐꯥꯍꯟꯅꯕꯥ)꯫
hide.bs.dropdown ꯍꯤꯗ ꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯀꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
hidden.bs.dropdown ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯗꯨ ꯌꯨꯖꯔꯗꯒꯤ ꯂꯣꯠꯁꯤꯅꯕꯥ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ (CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯉꯥꯏꯒꯅꯤ, ꯃꯄꯨꯡ ꯐꯥꯍꯟꯅꯕꯥ)꯫ 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})