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

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

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

ꯕꯦꯖ ꯅꯚ꯫

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

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

ꯕꯦꯖ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯁꯤꯗꯥ ꯔꯥꯖ꯭ꯌ .navꯑꯃꯠꯇꯥ ꯌꯥꯑꯣꯗꯦ꯫ .activeꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯈꯨꯗꯃꯁꯤꯡ ꯑꯁꯤꯗꯥ ꯀ꯭ꯂꯥꯁ ꯑꯁꯤ ꯌꯥꯑꯣꯔꯤ, ꯃꯔꯨꯑꯣꯏꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯀ꯭ꯂꯥꯁ ꯑꯁꯤꯅꯥ ꯑꯈꯟꯅꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯤꯡ ꯑꯃꯠꯇꯥ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯗꯦ ꯍꯥꯌꯕꯥ ꯎꯠꯅꯕꯥ꯫

ꯑꯦꯛꯇꯤꯕ ꯁ꯭ꯇꯦꯠ ꯑꯗꯨ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯗꯥ ꯌꯧꯍꯟꯅꯕꯥ, aria-currentꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ — pageꯍꯧꯖꯤꯛꯀꯤ ꯄꯦꯖꯒꯤꯗꯃꯛ ꯚꯦꯜꯌꯨ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ, ꯅꯠꯔꯒꯥ trueꯁꯦꯠ ꯑꯃꯗꯥ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯑꯥꯏꯇꯦꯝ ꯑꯗꯨꯒꯤꯗꯃꯛ꯫

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

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯁꯤꯖꯤꯟꯅꯩ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯃꯥꯔꯀꯑꯞ ꯑꯁꯤ ꯁꯨꯄꯔ ꯐ꯭ꯂꯦꯛꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ <ul>ꯃꯊꯛꯇꯥ ꯄꯅꯈ꯭ꯔꯤꯕꯥ ꯑꯁꯤꯒꯨꯝꯅꯥ s ꯁꯤꯖꯤꯟꯅꯧ , <ol>ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯄꯣꯠꯁꯤꯡꯒꯤ ꯑꯣꯔꯗꯔ ꯑꯗꯨ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯑꯣꯏꯔꯕꯗꯤ, ꯅꯠꯠꯔꯒꯥ <nav>ꯏꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯔꯣꯜ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯃꯔꯃꯗꯤ .navꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡ ꯑꯁꯤꯅꯥ display: flex, nav ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯑꯁꯤ nav ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯅꯥ ꯇꯧꯕꯒꯨꯝꯅꯥ ꯂꯃꯆꯠ ꯁꯥꯖꯠ ꯆꯠꯂꯤ, ꯑꯗꯨꯕꯨ ꯑꯍꯦꯅꯕꯥ ꯃꯥꯔꯀꯑꯥꯞ ꯌꯥꯑꯣꯗꯅꯥ꯫

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

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

ꯐꯪꯂꯤꯕꯥ ꯃꯑꯣꯡꯁꯤꯡ꯫

.navꯃꯣꯗꯤꯐꯥꯏꯌꯔꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ s ꯀꯝꯄꯣꯅꯦꯟꯇꯀꯤ ꯃꯑꯣꯡ ꯍꯣꯡꯗꯣꯀꯎ꯫ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯃꯤꯛꯁ ꯑꯃꯁꯨꯡ ꯃꯦꯆ ꯇꯧꯕꯤꯌꯨ, ꯅꯠꯠꯔꯒꯥ ꯃꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯁꯦꯃꯒꯠꯄꯤꯌꯨ꯫

ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫

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

ꯁꯦꯟꯇꯔ ꯇꯧꯗꯨꯅꯥ .justify-content-center: ꯱.

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

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ꯔꯥꯏꯠ-ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ .justify-content-end:

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

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ꯑꯌꯨꯡꯕ

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

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

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯑꯣꯏꯔꯀꯄꯒꯨꯝꯅꯥ, ꯚꯔꯇꯤꯀꯦꯜ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯑꯁꯤꯁꯨ ꯑꯦꯁ ꯌꯥꯑꯣꯗꯅꯥ ꯑꯣꯏꯊꯣꯀꯄꯥ <ul>ꯌꯥꯏ꯫

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

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

ꯇꯦꯕꯁꯤꯡ꯫

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

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

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ꯍꯤꯗꯥꯛ-ꯂꯥꯡꯊꯀꯁꯤꯡ꯫

ꯆꯞ ꯃꯥꯟꯅꯕꯥ HTML ꯑꯗꯨ ꯂꯧ, ꯑꯗꯨꯕꯨ .nav-pillsꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯁꯤꯖꯤꯟꯅꯧ:

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

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ꯃꯄꯨꯡ ꯐꯥꯍꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯖꯁ꯭ꯇꯤꯐꯥꯏ ꯇꯧꯕꯥ꯫

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

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

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

-ꯕꯦꯖ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯕꯗꯥ , ꯅꯍꯥꯛꯅꯥ ꯁ꯭ꯇꯥꯏꯂꯤꯡ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯈꯛꯇꯃꯛ ꯃꯊꯧ ꯇꯥꯕꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ <nav>ꯁꯥꯐꯅꯥ ꯂꯧꯊꯣꯀꯄꯥ ꯌꯥꯏ꯫.nav-item.nav-link<a>

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

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, .nav-justified. ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯁ꯭ꯄꯦꯁ ꯄꯨꯝꯅꯃꯛ ꯅꯦꯚ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯅꯥ ꯂꯧꯒꯅꯤ, ꯑꯗꯨꯕꯨ .nav-fillꯃꯊꯛꯇꯥ ꯄꯅꯈ꯭ꯔꯤꯕꯥ ꯑꯁꯤꯒꯥ ꯃꯥꯟꯅꯗꯅꯥ, ꯅꯦꯚ ꯑꯥꯏꯇꯦꯝ ꯈꯨꯗꯤꯡꯃꯛ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯒꯅꯤ꯫

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

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

-ꯕꯦꯖ ꯅꯦꯚꯤꯒꯦꯁꯟ .nav-fillꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯁꯤꯒꯥ ꯃꯥꯟꯅꯩ꯫<nav>

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

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

ꯐ꯭ꯂꯦꯛꯁ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯥ꯫

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

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

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
</nav>

ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤꯒꯤ ꯃꯇꯥꯡꯗꯥ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯕꯥꯔ ꯑꯃꯥ ꯄꯤꯅꯕꯥ navs ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ, role="navigation"ꯒꯤ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯂꯣꯖꯤꯀꯦꯜ ꯑꯣꯏꯕꯥ ꯃꯃꯥꯡꯒꯤ ꯀꯟꯇꯦꯅꯔꯗꯥ a ꯁꯣꯌꯗꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ, ꯅꯠꯠꯔꯒꯥ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯑꯀꯣꯌꯕꯗꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ <ul>ꯑꯃꯥ ꯔꯦꯞ ꯇꯧ꯫ <nav>ꯊꯧꯗꯥꯡ ꯑꯁꯤ ꯃꯁꯥꯃꯛꯇꯗꯥ ꯍꯥꯄꯆꯤꯅꯒꯅꯨ <ul>, ꯃꯔꯃꯗꯤ ꯃꯁꯤꯅꯥ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯅꯥ ꯇꯁꯦꯡꯕꯥ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯂꯥꯎꯊꯣꯀꯄꯥ ꯉꯃꯍꯜꯂꯣꯏ꯫

ꯅꯦꯚꯤꯒꯦꯁꯟ ꯕꯥꯔꯁꯤꯡ, ꯀꯔꯤꯒꯨꯝꯕꯥ .nav-tabsꯀ꯭ꯂꯥꯁꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯇꯦꯕꯁꯤꯡ ꯑꯣꯏꯅꯥ ꯚꯤꯖꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯔꯕꯁꯨ , , ꯅꯠꯔꯒꯥ ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠꯁꯤꯡ ꯄꯤꯔꯣꯏꯗꯕꯅꯤ ꯍꯥꯌꯕꯥ ꯈꯉꯖꯤꯅꯕꯤꯌꯨ . ꯍꯥꯌꯔꯤꯕꯁꯤꯡ ꯑꯁꯤ ꯑꯦ.ꯑꯥꯔ.ꯑꯥꯏ.ꯑꯦ.ꯒꯤ ꯑꯣꯊꯣꯔꯤꯡ ꯄ꯭ꯔꯦꯛꯇꯤꯁꯁꯤꯡꯒꯤ ꯒꯥꯏꯗ ꯇꯦꯕꯁꯤꯡꯒꯤ ꯄꯦꯇꯔꯅꯗꯥ ꯄꯅꯈ꯭ꯔꯤꯕꯥ ꯃꯇꯨꯡ ꯏꯟꯅꯥ, ꯗꯥꯏꯅꯥꯃꯤꯛ ꯇꯦꯕꯜ ꯏꯟꯇꯔꯐꯦꯁꯁꯤꯡ ꯈꯛꯇꯒꯤ ꯑꯣꯏꯅꯥ ꯆꯨꯝꯃꯤ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯁꯦꯛꯁꯟ ꯑꯁꯤꯗꯥ ꯂꯩꯔꯤꯕꯥ ꯗꯥꯏꯅꯥꯃꯤꯛ ꯇꯦꯕꯜ ꯏꯟꯇꯔꯐꯦꯁꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯕꯤꯍꯦꯕꯤꯌꯔ ꯌꯦꯡꯕꯤꯌꯨ꯫ ꯑꯩꯈꯣꯌꯒꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯅꯥ ꯑꯦꯛꯇꯤꯕ ꯇꯦꯕꯇꯥ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯈꯅꯒꯠꯂꯕꯥ ꯁ꯭ꯇꯦꯠ ꯑꯗꯨ ꯍꯦꯟꯗꯜ ꯇꯧꯕꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯁꯤ ꯗꯥꯏꯅꯥꯃꯤꯛ ꯇꯦꯕ ꯏꯟꯇꯔꯐꯦꯁꯁꯤꯡꯗꯥ ꯃꯊꯧ ꯇꯥꯗꯦ꯫role="tablist"role="tab"role="tabpanel"aria-currentaria-selected="true"

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ꯫

ꯈꯔꯥ ꯑꯍꯦꯅꯕꯥ HTML ꯑꯃꯁꯨꯡ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯄ꯭ꯂꯒꯏꯅꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯨ .

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯇꯦꯕꯁꯤꯡ꯫

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

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯄꯤꯂꯁꯤꯡ꯫

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

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ

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

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

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

.navꯕꯦꯖ ꯀ꯭ꯂꯥꯁꯀꯤ ꯃꯇꯥꯡꯗꯥ : ꯱.

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯀꯤ ꯃꯇꯥꯡꯗꯥ .nav-tabs:

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯀꯤ ꯃꯇꯥꯡꯗꯥ .nav-pills:

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

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

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}link-hover-color);
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯂꯃꯆꯠ-ꯁꯥꯖꯠ꯫

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

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

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

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Disabled tab's associated content.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>

ꯅꯍꯥꯛꯀꯤ ꯗꯔꯀꯥꯔ ꯑꯣꯏꯕꯁꯤꯡ ꯑꯗꯨ ꯆꯨꯃꯊꯣꯀꯄꯗꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯅꯕꯥ, ꯃꯁꯤꯅꯥ <ul>ꯃꯊꯛꯇꯥ ꯎꯠꯂꯤꯕꯥ ꯃꯇꯨꯡ ꯏꯟꯅꯥ -ꯕꯦꯖ ꯃꯥꯔꯀꯑꯥꯄꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯊꯕꯛ ꯇꯧꯏ, ꯅꯠꯠꯔꯒꯥ ꯑꯔꯕꯤꯠꯔꯦꯔꯤ “ꯔꯣꯜ ꯅꯍꯥꯛꯀꯤ ꯏꯁꯥꯒꯤ” ꯃꯥꯔꯀꯑꯥꯞ ꯑꯃꯍꯦꯛꯇꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯊꯕꯛ ꯇꯧꯏ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ <nav>, ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤꯗꯥ ꯍꯀꯊꯦꯡꯅꯅꯥ ꯍꯥꯄꯆꯤꯅꯒꯗꯕꯅꯤ ꯍꯥꯌꯕꯁꯤ ꯈꯪꯖꯤꯅꯕꯤꯌꯨ role="tablist", ꯃꯔꯃꯗꯤ ꯃꯁꯤꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯅꯦꯇꯤꯕ ꯊꯧꯗꯥꯡ ꯑꯗꯨ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯂꯦꯟꯗꯃꯥꯔꯛ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯒꯅꯤ꯫ ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ, ꯑꯂꯇꯔꯅꯦꯇꯤꯚ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ (ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯈꯨꯗꯝ ꯑꯁꯤꯗꯥ, ꯏꯆꯝ ꯆꯝꯕꯥ ) ꯍꯣꯡꯗꯣꯀꯎ ꯑꯃꯁꯨꯡ ꯃꯗꯨꯒꯤ ꯑꯀꯣꯌꯕꯗꯥ <div>ꯀꯨꯄꯁꯤꯜꯂꯨ꯫<nav>

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Disabled tab's associated content.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

ꯇꯦꯕꯁꯤꯡꯒꯤ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ ꯄꯤꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯁꯨ ꯌꯥꯏ꯫

This is some placeholder content the Disabled tab's associated content.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

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

This is some placeholder content the Disabled tab's associated content.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="v-pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

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

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

ꯑꯦ.ꯑꯥꯔ.ꯑꯥꯏ.ꯑꯦ.ꯒꯤ ꯑꯣꯊꯣꯔꯤꯡ ꯄ꯭ꯔꯦꯛꯇꯤꯁꯁꯤꯡꯒꯤ ꯄꯦꯇꯔꯅꯒꯥ ꯃꯥꯟꯅꯅꯥ, ꯍꯧꯖꯤꯛ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯔꯤꯕꯥ ꯇꯦꯕ ꯈꯛꯇꯅꯥ ꯀꯤꯕꯣꯔꯗ ꯐꯣꯀꯁ ꯐꯪꯏ꯫ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ, ꯃꯁꯤꯅꯥ tabindex="-1"ꯏꯅꯑꯦꯛꯇꯤꯚ ꯑꯣꯏꯕꯥ ꯇꯦꯕ ꯀꯟꯠꯔꯣꯜ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯁꯦꯠ ꯇꯧꯒꯅꯤ꯫ ꯍꯧꯖꯤꯛ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯔꯤꯕꯥ ꯇꯦꯕ ꯑꯗꯨꯗꯥ ꯐꯣꯀꯁ ꯂꯩꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ, ꯀꯔꯁꯔ ꯀꯤꯁꯤꯡꯅꯥ ꯃꯃꯥꯡꯒꯤ/ꯃꯊꯪꯒꯤ ꯇꯦꯕ ꯑꯗꯨ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯍꯜꯂꯤ, ꯄ꯭ꯂꯒꯏꯅꯅꯥ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯔꯣꯚꯤꯡ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯀꯏ꯫ tabindexꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, ꯅꯣꯠ ꯇꯧꯕꯤꯌꯨ ꯃꯗꯨꯗꯤ ꯀꯔꯁꯔ ꯀꯤ ꯏꯟꯇꯔꯦꯛꯁꯅꯁꯤꯡꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯃꯁꯨꯡ ꯚꯔꯇꯤꯀꯦꯜ ꯇꯦꯕ ꯂꯤꯁ꯭ꯇꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯈꯦꯠꯅꯕꯥ ꯊꯃꯗꯦ: ꯇꯦꯕ ꯂꯤꯁ꯭ꯇꯀꯤ ꯑꯣꯔꯤꯑꯦꯟꯇꯦꯁꯟ ꯑꯗꯨ ꯌꯦꯡꯂꯒꯥ, ꯃꯊꯛ ꯑꯃꯁꯨꯡ ꯂꯦꯞꯇꯅꯥ ꯀꯔꯁꯔ ꯑꯅꯤꯃꯛ ꯃꯃꯥꯡꯒꯤ ꯇꯦꯕ ꯑꯗꯨꯗꯥ ꯆꯠꯂꯤ, ꯑꯃꯁꯨꯡ ꯃꯈꯥꯗꯥ ꯑꯃꯁꯨꯡ ꯑꯔꯣꯏꯕꯥ ꯀꯔꯁꯔ ꯑꯗꯨꯗꯥ ꯆꯠꯂꯤ꯫ ꯃꯊꯪꯒꯤ ꯇꯦꯕ ꯑꯗꯨꯗꯥ꯫

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

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

ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ꯫

data-bs-toggle="tab"ꯅꯍꯥꯛꯅꯥ ꯁꯨꯞꯅꯒꯤ ꯁ꯭ꯄꯦꯁꯤꯐꯥꯏ ꯇꯧꯗꯨꯅꯥ ꯅꯠꯠꯔꯒꯥ data-bs-toggle="pill"ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯃꯠꯇꯥ ꯏꯗꯅꯥ ꯇꯦꯕ ꯅꯠꯠꯔꯒꯥ ꯄꯤꯜ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯑꯃꯥ ꯑꯦꯛꯇꯤꯚ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠꯁꯤꯡ ꯑꯁꯤ .nav-tabsꯅꯠꯔꯒꯥ .nav-pills.

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

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

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯇꯦꯕꯜ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯇꯦꯕꯁꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯥ (ꯇꯦꯕ ꯈꯨꯗꯤꯡꯃꯛ ꯑꯃꯃꯃꯗꯥ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯕꯥ ꯃꯊꯧ ꯇꯥꯏ):

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

ꯅꯍꯥꯛꯅꯥ ꯃꯤꯑꯣꯏ ꯑꯃꯃꯃꯒꯤ ꯇꯦꯕꯁꯤꯡ ꯑꯁꯤ ꯃꯑꯣꯡ ꯀꯌꯥꯗꯥ ꯑꯦꯛꯇꯤꯚ ꯇꯧꯕꯥ ꯌꯥꯏ:

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

ꯐꯦꯗ ꯏꯐꯦꯛꯇ꯫

ꯇꯦꯕꯁꯤꯡ ꯐꯦꯗ ꯏꯟ .fadeꯇꯧꯅꯕꯥ, ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ .tab-pane. ꯑꯍꯥꯅꯕꯥ ꯇꯦꯕ ꯄꯦꯟ ꯑꯗꯨꯅꯥ .showꯑꯍꯥꯅꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯁꯨ ꯎꯕꯥ ꯐꯪꯍꯅꯒꯗꯕꯅꯤ꯫

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

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

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

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

ꯅꯍꯥꯛꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯇꯦꯕ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯑꯦꯛꯇꯤꯚ ꯇꯧꯏ꯫

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

const bsTab = new bootstrap.Tab('#myTab')

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

ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯑꯅꯧꯕꯥ ꯇꯦꯕ ꯑꯃꯥ ꯎꯠꯄꯥ ꯃꯇꯃꯗꯥ, ꯊꯧꯗꯣꯀꯁꯤꯡ ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯣꯔꯗꯔ ꯑꯁꯤꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯐꯥꯏꯔ ꯇꯧꯏ:

hide.bs.tab(ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯑꯦꯛꯇꯤꯕ ꯇꯦꯕ ꯑꯗꯨꯗꯥ)
show.bs.tab(ꯌꯦꯡꯒꯗꯕꯥ ꯇꯦꯕ ꯑꯗꯨꯗꯥ)
hidden.bs.tab(ꯃꯃꯥꯡꯒꯤ ꯑꯦꯛꯇꯤꯕ ꯇꯦꯕ ꯑꯗꯨꯗꯥ, ꯊꯧꯗꯣꯛ ꯑꯗꯨꯒꯤꯗꯃꯛ ꯑꯗꯨꯃꯛ hide.bs.tab)
shown.bs.tab(ꯅꯧꯅꯥ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯕꯥ ꯍꯧꯖꯤꯛ ꯎꯠꯂꯤꯕꯥ ꯇꯦꯕ ꯑꯗꯨꯗꯥ, ꯊꯧꯔꯝ ꯑꯗꯨꯒꯤꯗꯃꯛ ꯑꯗꯨꯃꯛ show.bs.tab)

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯇꯦꯕ ꯑꯃꯠꯇꯥ ꯍꯥꯟꯅꯅꯥ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯗ꯭ꯔꯕꯗꯤ, ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ hide.bs.tabꯑꯃꯁꯨꯡ hidden.bs.tabꯏꯚꯦꯟꯇꯁꯤꯡ ꯑꯗꯨ ꯐꯥꯏꯔ ꯇꯧꯔꯣꯏ.

ꯏꯚꯦꯟꯇ ꯃꯈꯜ꯫	ꯋꯥꯔꯣꯜ
`hide.bs.tab`	ꯑꯅꯧꯕꯥ ꯇꯦꯕ ꯑꯃꯥ ꯎꯠꯄꯥ ꯃꯇꯃꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯐꯥꯏꯔ ꯇꯧꯏ (ꯑꯗꯨꯒꯥ ꯃꯔꯝ ꯑꯁꯤꯅꯥ ꯃꯃꯥꯡꯒꯤ ꯑꯦꯛꯇꯤꯕ ꯇꯦꯕ ꯑꯗꯨ ꯂꯣꯠꯁꯤꯅꯒꯗꯕꯅꯤ)꯫ ꯃꯊꯪꯁꯤꯠꯅꯥ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯑꯦꯛꯇꯤꯕ ꯇꯦꯕ ꯑꯃꯁꯨꯡ ꯑꯅꯧꯕꯥ ꯑꯊꯨꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯒꯗꯧꯔꯤꯕꯥ ꯇꯦꯕ ꯑꯗꯨꯗꯥ ꯇꯥꯔꯒꯦꯠ ꯇꯧꯅꯕꯥ `event.target`ꯑꯃꯁꯨꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫`event.relatedTarget`
`hidden.bs.tab`	ꯑꯅꯧꯕꯥ ꯇꯦꯕ ꯑꯃꯥ ꯎꯠꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯐꯥꯏꯔ ꯇꯧꯏ (ꯑꯗꯨꯒꯥ ꯃꯔꯝ ꯑꯁꯤꯅꯥ ꯃꯃꯥꯡꯒꯤ ꯑꯦꯛꯇꯤꯕ ꯇꯦꯕ ꯑꯗꯨ ꯂꯣꯠꯁꯤꯜꯂꯤ)꯫ ꯃꯃꯥꯡꯒꯤ ꯑꯦꯛꯇꯤꯕ ꯇꯦꯕ ꯑꯃꯁꯨꯡ ꯑꯅꯧꯕꯥ ꯑꯦꯛꯇꯤꯕ ꯇꯦꯕ ꯑꯗꯨ ꯃꯊꯪꯁꯤꯠꯅꯥ ꯇꯥꯔꯒꯦꯠ ꯇꯧꯅꯕꯥ `event.target`ꯑꯃꯁꯨꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫`event.relatedTarget`
`show.bs.tab`	ꯊꯧꯔꯝ ꯑꯁꯤ ꯇꯦꯕ ꯁꯣꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ, ꯑꯗꯨꯕꯨ ꯑꯅꯧꯕꯥ ꯇꯦꯕ ꯑꯗꯨ ꯎꯠꯂꯕꯥ ꯃꯃꯥꯡꯗꯥ꯫ ꯑꯦꯛꯇꯤꯕ ꯇꯦꯕ ꯑꯃꯁꯨꯡ ꯃꯃꯥꯡꯒꯤ ꯑꯦꯛꯇꯤꯕ ꯇꯦꯕ (ꯀꯔꯤꯒꯨꯝꯕꯥ ꯂꯩꯔꯕꯗꯤ) ꯑꯗꯨ ꯃꯊꯪꯁꯤꯠꯅꯥ ꯇꯥꯔꯒꯦꯠ ꯇꯧꯅꯕꯥ `event.target`ꯑꯃꯁꯨꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫`event.relatedTarget`
`shown.bs.tab`	ꯇꯦꯕ ꯑꯃꯥ ꯎꯠꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯇꯦꯕ ꯁꯣꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫ ꯑꯦꯛꯇꯤꯕ ꯇꯦꯕ ꯑꯃꯁꯨꯡ ꯃꯃꯥꯡꯒꯤ ꯑꯦꯛꯇꯤꯕ ꯇꯦꯕ (ꯀꯔꯤꯒꯨꯝꯕꯥ ꯂꯩꯔꯕꯗꯤ) ꯑꯗꯨ ꯃꯊꯪꯁꯤꯠꯅꯥ ꯇꯥꯔꯒꯦꯠ ꯇꯧꯅꯕꯥ `event.target`ꯑꯃꯁꯨꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫`event.relatedTarget`

const tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', event => {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})