in English

ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯇꯧꯕꯥ꯫

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

ꯄꯦꯖ ꯑꯁꯤꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫

ꯃꯁꯤ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ꯫

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

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

ꯍꯦꯗꯁ ꯑꯥꯞ ꯇꯧꯕꯥ! CSSꯅꯥ ꯑꯦꯅꯤꯃꯦꯁꯅꯁꯤꯡ ꯀꯔꯝꯅꯥ ꯍꯦꯟꯗꯜ ꯇꯧꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯌꯦꯡꯂꯒꯥ, ꯅꯍꯥꯛꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ marginꯅꯠꯠꯔꯒꯥ translateꯑꯃꯗꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯔꯣꯏ꯫ .offcanvasꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ, ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯃꯅꯤꯡꯇꯝꯕꯥ ꯔꯦꯄꯤꯡ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯁꯤꯒꯤ ꯑꯦꯅꯤꯃꯦꯁꯟ ꯏꯐꯦꯛꯇ ꯑꯁꯤ prefers-reduced-motionꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯒꯤ ꯃꯈꯥ ꯄꯣꯜꯂꯤ꯫ ꯑꯩꯈꯣꯌꯒꯤ ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤ ꯗꯣꯀꯨꯃꯦꯟꯇꯦꯁꯅꯒꯤ ꯍꯟꯊꯔꯀꯄꯥ ꯃꯣꯁꯟ ꯁꯦꯛꯁꯟ ꯑꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ .

ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ꯫

ꯃꯈꯥꯗꯥ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯎꯠꯂꯤꯕꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁꯀꯤ ꯈꯨꯗꯝ ꯑꯃꯥ ꯄꯤꯔꯤ (via .showon .offcanvas). ꯑꯣꯐꯀꯦꯅꯚꯥꯁꯇꯥ ꯀ꯭ꯂꯣꯖ ꯕꯇꯟ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯍꯦꯗ ꯑꯃꯒꯤ ꯁꯄꯣꯔꯠ ꯑꯃꯁꯨꯡ ꯑꯍꯥꯅꯕꯥ ꯈꯔꯒꯤ ꯑꯣꯏꯅꯥ ꯑꯣꯄꯁꯅꯦꯜ ꯕꯣꯗꯤ ꯀ꯭ꯂꯥꯁ ꯑꯃꯥ ꯌꯥꯑꯣꯔꯤ padding. ꯑꯩꯈꯣꯌꯅꯥ ꯅꯍꯥꯀꯄꯨ ꯌꯥꯔꯤꯕꯃꯈꯩ ꯗꯤꯁꯃꯤꯁ ꯑꯦꯛꯁꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯍꯦꯗꯁꯤꯡ ꯌꯥꯑꯣꯍꯟꯅꯕꯥ ꯄꯥꯎꯇꯥꯛ ꯄꯤꯔꯤ, ꯅꯠꯔꯒꯥ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯗꯤꯁꯃꯤꯁꯟ ꯑꯦꯛꯁꯟ ꯑꯃꯥ ꯄꯤꯌꯨ꯫

ꯑꯣꯐꯀꯦꯅꯚꯥꯁꯀꯤꯗꯃꯛꯇꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯁꯤ ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯆꯠꯂꯤ꯫ ꯅꯍꯥꯛꯅꯥ ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯆꯥꯎꯔꯥꯛꯅꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯅꯠꯠꯔꯒꯥ ꯀꯁ꯭ꯇꯝ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯊꯝꯕꯥ ꯌꯥꯏ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>

ꯂꯥꯏꯚ ꯗꯦꯃꯣ꯫

.showꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯇꯣꯒꯜ ꯇꯧꯕꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯎꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯂꯣꯠꯅꯕꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯕꯇꯅꯁꯤꯡ ꯑꯁꯤ .offcanvasꯁꯤꯖꯤꯟꯅꯧ꯫

.offcanvasꯀꯟꯇꯦꯟꯇ ꯂꯣꯠꯁꯤꯜꯂꯤ (ꯗꯤꯐꯣꯜꯇ)
.offcanvas.showꯀꯟꯇꯦꯟꯇ ꯎꯠꯂꯤ꯫

ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯤꯉ꯭ꯛ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ href, ꯅꯠꯠꯔꯒꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯕꯇꯟ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ data-bs-targetꯌꯥꯏ꯫ ꯀꯦꯁ ꯑꯅꯤꯃꯛꯇꯥ, ꯗꯤ data-bs-toggle="offcanvas"ꯑꯁꯤ ꯃꯊꯧ ꯇꯥꯏ꯫

href ꯒꯤ ꯃꯇꯦꯡꯅꯥ ꯂꯤꯉ꯭ꯛ ꯇꯧꯕꯤꯌꯨ꯫

ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯑꯣꯏꯅꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯗꯤ ꯂꯩ꯫ ꯇꯁꯦꯡꯕꯥ ꯄꯨꯟꯁꯤꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯈꯅꯈꯤꯕꯥ ꯏꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯗꯨ ꯅꯍꯥꯛꯅꯥ ꯂꯩꯕꯥ ꯌꯥꯏ꯫ ꯂꯥꯏꯛ, ꯇꯦꯛꯁꯠ, ꯏꯃꯦꯖ, ꯂꯤꯁ꯭ꯇꯁꯤꯡ ꯑꯁꯤꯅꯆꯤꯡꯕꯥ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        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>
  </div>
</div>

ꯍꯀꯆꯥꯡ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯥ꯫

<body>ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯃꯥ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯤ ꯕꯦꯀꯗ꯭ꯔꯣꯞ ꯑꯃꯥ ꯎꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯥ ꯑꯁꯤ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯏ꯫ ꯁ꯭ꯛꯔꯣꯂꯤꯡ data-bs-scrollꯏꯅꯦꯕꯜ ꯇꯧꯅꯕꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫<body>

ꯑꯣꯄꯁꯟ ꯑꯁꯤ ꯊꯕꯛ ꯑꯣꯏꯅꯥ ꯎꯕꯥ ꯐꯪꯅꯕꯒꯤꯗꯃꯛ ꯄꯦꯖ ꯑꯗꯨꯒꯤ ꯑꯔꯣꯏꯕꯥ ꯁꯔꯨꯛ ꯑꯗꯨ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯅꯕꯥ ꯍꯣꯠꯅꯧ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

ꯍꯀꯆꯥꯡꯒꯤ ꯁ꯭ꯛꯔꯣꯂꯤꯡ ꯑꯃꯁꯨꯡ ꯕꯦꯀꯗ꯭ꯔꯣꯞ꯫

<body>ꯅꯍꯥꯛꯅꯥ ꯎꯕꯥ ꯉꯝꯕꯥ ꯕꯦꯀꯗ꯭ꯔꯣꯞ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯁꯨ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

ꯁ꯭ꯇꯦꯇꯤꯛ ꯕꯦꯀꯗ꯭ꯔꯣꯞ꯫

ꯕꯦꯀꯗ꯭ꯔꯣꯞ ꯑꯁꯤ ꯁ꯭ꯇꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯁꯦꯠ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ, ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯁꯤ ꯃꯗꯨꯒꯤ ꯃꯄꯥꯟꯗꯥ ꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯂꯣꯗ ꯇꯧꯔꯣꯏ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯑꯩꯒꯤ ꯃꯄꯥꯟꯗꯥ ꯀ꯭ꯂꯤꯛ ꯇꯧꯔꯕꯗꯤ ꯑꯩꯅꯥ ꯂꯣꯗ ꯇꯧꯔꯣꯏ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

ꯑꯟꯙ꯭ꯔ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ꯫

v5.2.0ꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯦ꯫

ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁꯁꯤꯡꯒꯤ ꯃꯑꯣꯡ ꯃꯇꯧ ꯍꯣꯡꯗꯣꯛ ꯍꯣꯡꯖꯤꯟ ꯇꯧꯗꯨꯅꯥ ꯃꯈꯣꯌꯕꯨ ꯑꯃꯝꯕꯥ ꯅꯕꯕꯥꯔꯒꯨꯝꯕꯥ ꯇꯣꯉꯥꯟ ꯇꯣꯉꯥꯅꯕꯥ ꯀꯟꯇꯦꯛꯁꯁꯤꯡꯗꯥ ꯍꯦꯟꯅꯥ ꯐꯖꯅꯥ ꯃꯦꯆ ꯇꯧꯅꯕꯥ꯫ ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯃꯝꯕꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯁ꯭ꯇꯥꯏꯂꯤꯡ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ .text-bg-darkꯑꯃꯁꯨꯡ .offcanvasꯇꯨꯗꯥ .btn-close-whiteꯍꯥꯄꯆꯤꯜꯂꯤ꯫ .btn-closeꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯅꯨꯡꯗꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯂꯩꯔꯕꯗꯤ .dropdown-menu-dark, .dropdown-menu.

ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯀꯟꯇꯦꯟꯇ ꯊꯝꯃꯨ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ꯫

v5.2.0ꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯦ꯫

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯅꯥ ꯚꯤꯎꯄꯣꯔꯇꯀꯤ ꯃꯄꯥꯟꯗꯥ ꯂꯩꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯑꯀꯛꯅꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯑꯃꯗꯒꯤ ꯑꯃꯁꯨꯡ ꯃꯈꯥꯗꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯑꯗꯨꯒꯤ ꯃꯊꯛꯇꯥ, ꯃꯅꯨꯡꯗꯥ ꯂꯩꯔꯤꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡ ꯑꯗꯨ ꯃꯍꯧꯁꯥꯒꯨꯝꯅꯥ ꯂꯃꯆꯠ ꯁꯥꯖꯠ ꯆꯠꯀꯅꯤ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯀꯤ .offcanvas-lgꯃꯈꯥꯗꯥ ꯂꯩꯕꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯃꯗꯥ ꯀꯟꯇꯦꯟꯇ ꯂꯣꯠꯁꯤꯜꯂꯤ , ꯑꯗꯨꯕꯨ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯀꯤ lgꯃꯊꯛꯇꯥ ꯂꯩꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯎꯠꯂꯤ꯫lg

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯇꯣꯒꯜ ꯑꯗꯨ ꯎꯠꯅꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯕ꯭ꯔꯥꯎꯖꯔꯒꯤ ꯁꯥꯏꯖ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯀꯎ꯫

ꯃꯁꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ .offcanvas-lg.

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯑꯣꯏꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯑꯔꯥꯞꯄꯥ ꯃꯐꯃꯗꯥ ꯐꯪꯏ꯫

.offcanvas
.offcanvas-sm
.offcanvas-md
.offcanvas-lg
.offcanvas-xl
.offcanvas-xxl

ꯄ꯭ꯂꯦꯁꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫

ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯄ꯭ꯂꯦꯁꯃꯦꯟꯇ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯕꯨ ꯍꯥꯄꯆꯤꯅꯒꯗꯕꯅꯤ꯫

.offcanvas-startꯚꯤꯎꯄꯣꯔꯇꯀꯤ ꯈꯥꯃꯗꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯊꯝꯃꯤ (ꯃꯊꯛꯇꯥ ꯎꯠꯂꯤ)
.offcanvas-endꯚꯤꯎꯄꯣꯔꯇꯀꯤ ꯑꯔꯣꯏꯕꯥ ꯃꯐꯃꯗꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯊꯝꯃꯤ꯫
.offcanvas-topꯚꯤꯎꯄꯣꯔꯇꯀꯤ ꯃꯊꯛꯇꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯊꯝꯃꯤ꯫
.offcanvas-bottomꯚꯤꯎꯄꯣꯔꯇꯀꯤ ꯃꯈꯥꯗꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯊꯝꯃꯤ꯫

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯃꯊꯛ, ꯑꯔꯣꯏꯕꯥ ꯑꯃꯁꯨꯡ ꯃꯈꯥꯒꯤ ꯈꯨꯗꯃꯁꯤꯡ ꯑꯁꯤ ꯍꯣꯠꯅꯕꯤꯌꯨ꯫

...

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

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

ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯄꯦꯅꯦꯜ ꯑꯁꯤ ꯀꯟꯁꯦꯄꯆꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯃꯣꯗꯦꯜ ꯗꯥꯏꯂꯣꯒ ꯑꯃꯥ ꯑꯣꯏꯕꯅꯥ, ꯁꯣꯏꯗꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ aria-labelledby="..."—ꯑꯐꯀꯦꯅꯚꯥꯁꯀꯤ ꯇꯥꯏꯇꯦꯜ ꯑꯗꯨ ꯔꯤꯐꯔꯦꯟꯁ ꯇꯧꯗꯨꯅꯥ— .offcanvas. role="dialog"ꯑꯩꯈꯣꯌꯅꯥ ꯍꯥꯟꯅꯅꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯀꯄꯗꯒꯤ ꯅꯍꯥꯛꯅꯥ ꯍꯥꯄꯆꯤꯅꯕꯒꯤ ꯃꯊꯧ ꯇꯥꯗꯦ ꯍꯥꯌꯕꯥ ꯈꯉꯕꯤꯌꯨ꯫

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ

ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

v5.2.0ꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯦ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯍꯦꯅꯒꯠꯂꯛꯂꯤꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯤ ꯑꯦꯞꯔꯣꯆꯀꯤ ꯁꯔꯨꯛ ꯑꯃꯥ ꯑꯣꯏꯅꯥ, ꯑꯣꯐꯀꯦꯅꯚꯥꯁꯅꯥ ꯍꯧꯖꯤꯛꯇꯤ .offcanvasꯍꯦꯟꯅꯥ ꯐꯕꯥ ꯔꯤꯑꯦꯜ-ꯇꯥꯏꯝ ꯀꯁ꯭ꯇꯃꯔꯥꯏꯖꯦꯁꯟꯒꯤꯗꯃꯛ ꯂꯣꯀꯦꯜ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ. CSS ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯤ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯑꯁꯤ ꯁꯥꯁꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯦꯠ ꯇꯧꯏ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯁꯥꯁ ꯀꯁ꯭ꯇꯃꯔꯥꯏꯖꯦꯁꯟ ꯑꯁꯤ ꯍꯧꯖꯤꯀꯁꯨ ꯁꯄꯣꯔꯠ ꯇꯧꯔꯤ, ꯃꯁꯤꯁꯨ꯫

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

$offcanvas-padding-y:               $modal-inner-padding;
$offcanvas-padding-x:               $modal-inner-padding;
$offcanvas-horizontal-width:        400px;
$offcanvas-vertical-height:         30vh;
$offcanvas-transition-duration:     .3s;
$offcanvas-border-color:            $modal-content-border-color;
$offcanvas-border-width:            $modal-content-border-width;
$offcanvas-title-line-height:       $modal-title-line-height;
$offcanvas-bg-color:                $modal-content-bg;
$offcanvas-color:                   $modal-content-color;
$offcanvas-box-shadow:              $modal-content-box-shadow-xs;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ ꯍꯦꯚꯤ ꯂꯤꯐꯇꯤꯡ ꯍꯦꯟꯗꯜ ꯇꯧꯅꯕꯥ ꯀ꯭ꯂꯥꯁ ꯑꯃꯁꯨꯡ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯈꯔꯥ ꯁꯤꯖꯤꯟꯅꯩ:

.offcanvasꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫
.offcanvas.showꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯎꯠꯂꯤ꯫
.offcanvas-startꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯗꯨ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫
.offcanvas-endꯑꯔꯣꯏꯕꯗꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯗꯨ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫
.offcanvas-topꯃꯊꯛꯇꯥ ꯂꯩꯕꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯗꯨ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫
.offcanvas-bottomꯃꯈꯥꯗꯥ ꯂꯩꯕꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯗꯨ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫

ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯗꯤꯁꯃꯤꯁ ꯕꯇꯟ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ data-bs-dismiss="offcanvas", ꯃꯁꯤꯅꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯑꯗꯨ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯏ꯫ <button>ꯗꯤꯚꯥꯏꯁ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯂꯃꯆꯠ-ꯁꯥꯖꯠ ꯆꯠꯅꯕꯒꯤꯗꯃꯛ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯃꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯣꯌꯗꯅꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫

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

ꯇꯣꯒꯜ ꯇꯧꯕꯥ꯫

ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯀꯟꯠꯔꯣꯜ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯑꯦꯁꯥꯏꯟ ꯇꯧꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ data-bs-toggle="offcanvas"ꯑꯃꯁꯨꯡ ꯑꯃꯥ data-bs-targetꯅꯠꯔꯒꯥ ꯑꯃꯗꯥ꯫ hrefꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨꯅꯥ data-bs-targetꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯗꯨ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯅꯕꯥ CSS ꯁꯦꯂꯦꯛꯇꯔ ꯑꯃꯥ ꯌꯥꯔꯦ꯫ offcanvasꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯁꯣꯌꯗꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯍꯥꯡꯗꯣꯀꯄꯥ ꯄꯥꯝꯂꯕꯗꯤ, ꯑꯍꯦꯅꯕꯥ ꯀ꯭ꯂꯥꯁ ꯍꯥꯄꯆꯤꯜꯂꯨ show.

ꯈꯠꯇꯣꯛꯄ

ꯃꯈꯥꯗꯥ ꯎꯠꯂꯤꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁꯀꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥdata ꯕꯇꯟ ꯑꯃꯗꯥ ꯂꯩꯕꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯗꯤꯁꯃꯤꯁꯟ ꯇꯧꯕꯥ ꯌꯥꯏ :

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

ꯅꯠꯠꯔꯒꯥ ꯃꯈꯥꯗꯥ ꯎꯠꯂꯤꯕꯥ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁꯀꯤ ꯃꯄꯥꯟꯗꯥ ꯂꯩꯕꯥ ꯕꯇꯟ ꯑꯃꯗꯥ :data-bs-target

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>

ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯃꯥ ꯊꯥꯗꯣꯀꯄꯒꯤ ꯃꯑꯣꯡ ꯑꯅꯤꯃꯛ ꯁꯄꯣꯔꯠ ꯇꯧꯔꯕꯁꯨ, ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯃꯒꯤ ꯃꯄꯥꯟꯗꯥ ꯊꯥꯗꯣꯀꯄꯥ ꯑꯁꯤ ꯑꯦ.ꯑꯥꯔ.ꯑꯥꯏ.ꯑꯦ.ꯒꯤ ꯑꯣꯊꯣꯔꯤꯡ ꯄ꯭ꯔꯦꯛꯇꯤꯁꯁꯤꯡ ꯒꯥꯏꯗ ꯗꯥꯏꯂꯣꯒ (ꯃꯣꯗꯜ) ꯄꯦꯇꯔꯅꯒꯥ ꯃꯥꯟꯅꯗꯦ ꯍꯥꯌꯕꯁꯤ ꯅꯤꯡꯁꯤꯡꯕꯤꯌꯨ . ꯃꯁꯤ ꯅꯍꯥꯛꯀꯤ ꯔꯤꯁ꯭ꯀꯀꯤ ꯃꯈꯥꯗꯥ ꯄꯥꯡꯊꯣꯀꯎ꯫

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

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯤꯌꯨ:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯕꯅꯥ, ꯅꯍꯥꯛꯅꯥ ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡ ꯑꯃꯥ data-bs-, data-bs-animation="{value}". ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯄꯥꯁ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡꯒꯤ ꯀꯦꯁ ꯃꯈꯜ ꯑꯗꯨ “ camelCase ” ꯗꯒꯤ “ kebab -case ”ꯗꯥ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯁꯣꯌꯗꯅꯥ ꯇꯧꯕꯤꯌꯨ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, data-bs-custom-class="beautifier"ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯁꯤꯖꯤꯟꯅꯧ data-bs-customClass="beautifier".

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ 5.2.0ꯗꯒꯤ ꯍꯧꯅꯥ, ꯀꯝꯄꯣꯅꯦꯟꯇ ꯄꯨꯝꯅꯃꯛꯅꯥ JSON ꯁ꯭ꯠꯔꯤꯡ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯏꯆꯝ ꯆꯝꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯀꯅꯐꯤꯒꯔꯦꯁꯟ ꯊꯝꯕꯥ ꯌꯥꯕꯥ ꯑꯦꯛꯁꯄꯤꯔꯤꯃꯦꯟꯇ ꯔꯤꯖꯔꯚ ꯇꯧꯔꯕꯥ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯃꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯏ꯫ data-bs-configꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯅꯥ data-bs-config='{"delay":0, "title":123}'ꯑꯃꯁꯨꯡ data-bs-title="456"ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯂꯩꯕꯥ ꯃꯇꯃꯗꯥ, ꯑꯔꯣꯏꯕꯥ titleꯚꯦꯜꯌꯨ ꯑꯗꯨ ꯑꯣꯏꯒꯅꯤ 456ꯑꯃꯁꯨꯡ ꯇꯣꯉꯥꯅꯕꯥ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯅꯥ data-bs-config. ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠꯁꯤꯡꯅꯥ data-bs-delay='{"show":0,"hide":150}'.

ꯃꯤꯡ	ꯃꯈꯜ	ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ	ꯋꯥꯔꯣꯜ
`backdrop`	ꯕꯨꯂꯦꯟ ꯅꯠꯠꯔꯒꯥ ꯁ꯭ꯠꯔꯤꯡ ꯑꯗꯨ꯫`static`	`true`	ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯍꯥꯡꯗꯣꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯍꯀꯆꯥꯡꯗꯥ ꯕꯦꯀꯗ꯭ꯔꯣꯞ ꯑꯃꯥ ꯊꯥꯎ꯫ ꯅꯠꯠꯔꯒꯥ, `static`ꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯗꯨ ꯂꯣꯗ ꯇꯧꯗꯕꯥ ꯕꯦꯀꯗ꯭ꯔꯣꯞ ꯑꯃꯒꯤꯗꯃꯛ ꯇꯥꯀꯄꯤꯌꯨ.
`keyboard`	ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫	`true`	ꯑꯦꯁ꯭ꯀꯦꯞ ꯀꯤ ꯑꯃꯥ ꯊꯝꯂꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯗꯨ ꯂꯣꯗ ꯇꯧꯏ꯫
`scroll`	ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫	`false`	ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯍꯥꯡꯗꯣꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯍꯀꯆꯥꯡ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯥ ꯌꯥꯍꯜꯂꯨ꯫

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

ꯑꯦꯁꯤꯅꯛꯔꯣꯅꯣꯁ ꯃꯦꯊꯗꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ꯫

ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯒꯤ ꯃꯦꯊꯗ ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯑꯦꯁꯤꯅꯛꯔꯣꯅꯣꯁ ꯑꯣꯏ ꯑꯃꯁꯨꯡ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯑꯃꯥ ꯍꯧꯏ . ꯃꯈꯣꯌꯅꯥ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯍꯧꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯑꯗꯨꯕꯨ ꯂꯣꯏꯗ꯭ꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯀꯣꯜ ꯇꯧꯔꯤꯕꯥ ꯃꯤꯑꯣꯏ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ . ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯇꯧꯔꯤꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯗꯥ ꯃꯦꯊꯗ ꯀꯣꯜ ꯑꯃꯥ ꯏꯒꯅꯣꯔ ꯇꯧꯒꯅꯤ .

ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯦꯁꯟ ꯌꯦꯡꯕꯤꯌꯨ .

ꯑꯗꯣꯃꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯑꯦꯛꯇꯤꯕ ꯇꯧꯏ꯫ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯣꯄꯁꯟ ꯑꯃꯥ ꯌꯥꯔꯦ object.

ꯀꯟꯁꯠꯔꯛꯁꯅꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯃꯥ ꯁꯦꯝꯕꯥ ꯌꯥꯏ, ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

ꯊꯧꯑꯪꯡ	ꯋꯥꯔꯣꯜ
`getInstance`	DOM ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯗꯨ ꯐꯪꯍꯅꯕꯥ ꯉꯝꯕꯥ ꯁ꯭ꯇꯦꯇꯤꯛ ꯃꯦꯊꯗ꯫
`getOrCreateInstance`	DOM ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯗꯨ ꯐꯪꯍꯅꯕꯥ ꯌꯥꯕꯥ ꯁ꯭ꯇꯦꯇꯤꯛ ꯃꯦꯊꯗ, ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯈꯤꯗꯕꯥ ꯑꯣꯏꯔꯕꯗꯤ ꯑꯅꯧꯕꯥ ꯑꯃꯥ ꯁꯦꯝꯕꯥ ꯌꯥꯍꯜꯂꯤ꯫
`hide`	ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ `hidden.bs.offcanvas`ꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔꯗꯥ ꯍꯜꯂꯀꯏ꯫
`show`	ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯎꯠꯂꯤ꯫ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯎꯠꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ `shown.bs.offcanvas`ꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔꯗꯥ ꯍꯜꯂꯀꯏ꯫
`toggle`	ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯎꯠꯄꯥ ꯅꯠꯠꯔꯒꯥ ꯂꯣꯠꯁꯤꯟꯅꯕꯥ ꯇꯣꯒꯜ ꯇꯧꯏ꯫ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯎꯠꯄꯥ ꯅꯠꯠꯔꯒꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ `shown.bs.offcanvas`ꯅꯠꯠꯔꯒꯥ `hidden.bs.offcanvas`ꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔꯗꯥ ꯍꯜꯂꯀꯏ꯫

ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯀ꯭ꯂꯥꯁ ꯑꯁꯤꯅꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤꯗꯥ ꯍꯨꯛ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯊꯧꯗꯣꯛ ꯈꯔꯥ ꯐꯣꯡꯗꯣꯛꯂꯤ꯫

ꯏꯚꯦꯟꯇ ꯃꯈꯜ꯫	ꯋꯥꯔꯣꯜ
`hide.bs.offcanvas`	`hide`ꯃꯦꯊꯗ ꯑꯗꯨ ꯀꯧꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
`hidden.bs.offcanvas`	ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯌꯨꯖꯔꯗꯒꯤ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯃꯇꯃꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ (CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯂꯣꯏꯁꯤꯟꯅꯕꯥ ꯉꯥꯏꯒꯅꯤ)꯫
`hidePrevented.bs.offcanvas`	ꯊꯧꯔꯝ ꯑꯁꯤ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯎꯠꯄꯥ ꯃꯇꯃꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ, ꯃꯁꯤꯒꯤ ꯕꯦꯀꯗ꯭ꯔꯣꯞ ꯑꯁꯤ `static`ꯑꯃꯁꯨꯡ ꯑꯣꯐꯀꯦꯅꯚꯥꯁꯀꯤ ꯃꯄꯥꯟꯗꯥ ꯀ꯭ꯂꯤꯛ ꯑꯃꯥ ꯄꯥꯡꯊꯣꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫ ꯑꯦꯁ꯭ꯀꯦꯞ ꯀꯤ ꯑꯗꯨ ꯊꯝꯂꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯃꯁꯨꯡ `keyboard`ꯑꯣꯄꯁꯟ ꯑꯗꯨ `false`.
`show.bs.offcanvas`	`show`ꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯀꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
`shown.bs.offcanvas`	ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯌꯨꯖꯔꯅꯥ ꯎꯕꯥ ꯐꯪꯍꯅꯕꯥ ꯃꯇꯃꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ (CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯂꯣꯏꯁꯤꯟꯅꯕꯥ ꯉꯥꯏꯒꯅꯤ)꯫

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})

ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯇꯧꯕꯥ꯫

ꯃꯁꯤ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ꯫

ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ꯫

ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯇꯧꯕꯥ꯫

ꯂꯥꯏꯚ ꯗꯦꯃꯣ꯫

ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯇꯧꯕꯥ꯫

ꯍꯀꯆꯥꯡ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯥ꯫

ꯍꯀꯆꯥꯡ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ꯫

ꯍꯀꯆꯥꯡꯒꯤ ꯁ꯭ꯛꯔꯣꯂꯤꯡ ꯑꯃꯁꯨꯡ ꯕꯦꯀꯗ꯭ꯔꯣꯞ꯫

ꯁ꯭ꯛꯔꯣꯂꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯕꯦꯀꯗ꯭ꯔꯣꯞ꯫

ꯁ꯭ꯇꯦꯇꯤꯛ ꯕꯦꯀꯗ꯭ꯔꯣꯞ꯫

ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯇꯧꯕꯥ꯫

ꯑꯟꯙ꯭ꯔ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ꯫

ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯇꯧꯕꯥ꯫

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ꯫

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ꯫

ꯄ꯭ꯂꯦꯁꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫

ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯃꯊꯛꯇꯥ ꯂꯩ꯫

ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯔꯥꯏꯠ ꯇꯧꯕꯥ꯫

ꯑꯣꯐꯀꯦꯅꯚꯥꯁꯀꯤ ꯃꯈꯥꯗꯥ ꯂꯩꯕꯥ꯫

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

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ

ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

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

ꯇꯣꯒꯜ ꯇꯧꯕꯥ꯫

ꯈꯠꯇꯣꯛꯄ

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

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

ꯑꯦꯁꯤꯅꯛꯔꯣꯅꯣꯁ ꯃꯦꯊꯗꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ꯫

ꯊꯧꯔꯃꯁꯤꯡ꯫