ꯃꯔꯨꯑꯣꯏꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯆꯠꯂꯨ꯫ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯅꯦꯚꯤꯒꯦꯁꯅꯗꯥ ꯆꯠꯂꯨ꯫
Check
in English

ꯅꯕꯕꯔ꯫

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

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

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

ꯅꯕꯕꯥꯔ ꯑꯁꯤ ꯍꯧꯗ꯭ꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯈꯪꯖꯤꯅꯒꯗꯕꯥ ꯋꯥꯐꯃꯁꯤꯡ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ:

  • ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯀꯣꯂꯥꯄꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯀꯂꯔ ꯁ꯭ꯀꯤꯝ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯅꯕꯕꯥꯔꯁꯤꯡꯒꯥ .navbarꯂꯣꯌꯅꯅꯥ ꯔꯦꯄꯤꯡ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯏ꯫.navbar-expand{-sm|-md|-lg|-xl|-xxl}
  • ꯅꯕꯕꯥꯔꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯈꯣꯌꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯐ꯭ꯂꯨꯏꯗ ꯑꯣꯏ꯫ ꯃꯈꯣꯌꯒꯤ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯋꯥꯏꯗ ꯑꯗꯨ ꯇꯣꯉꯥꯟ-ꯇꯣꯉꯥꯅꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯂꯤꯃꯤꯠ ꯇꯧꯅꯕꯥ ꯀꯟꯇꯦꯅꯔ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯀꯎ꯫
  • ꯅꯦꯚꯕꯥꯔꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯁ꯭ꯄꯦꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯀꯟꯠꯔꯣꯜ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯑꯩꯈꯣꯌꯒꯤ ꯁ꯭ꯄꯦꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯐ꯭ꯂꯦꯛꯁ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫
  • ꯅꯦꯚꯕꯥꯔꯁꯤꯡ ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏ, ꯑꯗꯨꯕꯨ ꯃꯗꯨ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯈꯣꯌꯕꯨ ꯐꯖꯅꯥ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯕꯤꯍꯦꯕꯤꯌꯔ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯀꯣꯂꯥꯞꯁ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯄ꯭ꯂꯒꯏꯅꯒꯤ ꯃꯈꯥ ꯄꯣꯜꯂꯤ꯫
  • ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤ ꯁꯣꯌꯗꯅꯥ ꯂꯩꯍꯅꯕꯥ <nav>ꯅꯠꯠꯔꯒꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯍꯦꯟꯅꯥ ꯖꯦꯅꯦꯔꯦꯜ ꯑꯣꯏꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ , ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯂꯦꯟꯗꯃꯥꯔꯛ ꯔꯤꯖꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯈꯉꯗꯣꯛꯅꯕꯥ ꯅꯦꯚꯕꯥꯔ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ <div>a ꯍꯥꯄꯆꯤꯅꯕꯥ꯫role="navigation"
  • aria-current="page"ꯍꯧꯖꯤꯛꯀꯤ ꯄꯦꯖꯒꯤꯗꯃꯛ ꯅꯠꯠꯔꯒꯥ aria-current="true"ꯁꯦꯠ ꯑꯃꯗꯥ ꯂꯩꯔꯤꯕꯥ ꯍꯧꯖꯤꯛꯀꯤ ꯑꯥꯏꯇꯦꯝ ꯑꯗꯨꯒꯤꯗꯃꯛ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯍꯧꯖꯤꯛꯀꯤ ꯑꯥꯏꯇꯦꯝ ꯑꯗꯨ ꯇꯥꯀꯄꯤꯌꯨ .
  • v5.2.0ꯗꯥ ꯑꯅꯧꯕꯥ:.navbar ꯅꯦꯚꯕꯥꯔꯁꯤꯡ ꯑꯁꯤ ꯕꯦꯖ ꯀ꯭ꯂꯥꯁꯇꯥ ꯁ꯭ꯀꯣꯞ ꯇꯧꯕꯥ CSS ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯊꯤꯝ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ .navbar-lightꯑꯁꯤ ꯂꯧꯊꯣꯀꯈ꯭ꯔꯦ ꯑꯃꯁꯨꯡ .navbar-darkꯑꯍꯦꯅꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯍꯥꯄꯆꯤꯟꯅꯕꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯅꯕꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯏꯈ꯭ꯔꯦ꯫
ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯁꯤꯒꯤ ꯑꯦꯅꯤꯃꯦꯁꯟ ꯏꯐꯦꯛꯇ ꯑꯁꯤ prefers-reduced-motionꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯒꯤ ꯃꯈꯥ ꯄꯣꯜꯂꯤ꯫ ꯑꯩꯈꯣꯌꯒꯤ ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤ ꯗꯣꯀꯨꯃꯦꯟꯇꯦꯁꯅꯒꯤ ꯍꯟꯊꯔꯀꯄꯥ ꯃꯣꯁꯟ ꯁꯦꯛꯁꯟ ꯑꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ .

ꯁꯄꯣꯔꯠ ꯇꯧꯕꯥ ꯀꯟꯇꯦꯟꯇ꯫

ꯅꯕꯕꯥꯔꯁꯤꯡ ꯑꯁꯤ ꯁꯕ-ꯀꯝꯄꯣꯅꯦꯟꯇ ꯈꯔꯒꯤꯗꯃꯛ ꯕꯤꯜꯇ-ꯏꯟ ꯁꯄꯣꯔꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯥꯀꯏ꯫ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤꯗꯒꯤ ꯈꯜꯂꯨ:

  • .navbar-brandꯅꯍꯥꯛꯀꯤ ꯀꯝꯄꯅꯤ, ꯄ꯭ꯔꯗꯛꯇ, ꯅꯠꯠꯔꯒꯥ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯀꯤ ꯃꯃꯤꯡꯒꯤꯗꯃꯛ꯫
  • .navbar-navꯃꯄꯨꯡ ꯑꯣꯏꯕꯥ ꯑꯋꯥꯡꯕꯥ ꯑꯃꯁꯨꯡ ꯂꯥꯏꯠꯋꯦꯠ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯑꯃꯒꯤꯗꯃꯛ (ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯁꯄꯣꯔꯠ ꯌꯥꯎꯅꯥ)꯫
  • .navbar-togglerꯑꯩꯈꯣꯌꯒꯤ ꯀꯣꯂꯥꯞꯁ ꯄ꯭ꯂꯒꯏꯟ ꯑꯃꯁꯨꯡ ꯑꯇꯣꯞꯄꯥ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯇꯣꯒꯂꯤꯡ ꯕꯤꯍꯦꯕꯤꯌꯔꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯒꯤꯗꯃꯛ꯫
  • ꯐꯣꯔꯝ ꯑꯃꯍꯦꯛꯇꯒꯤ ꯀꯟꯠꯔꯣꯜ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯁꯅꯁꯤꯡꯒꯤꯗꯃꯛ ꯐ꯭ꯂꯦꯛꯁ ꯑꯃꯁꯨꯡ ꯁ꯭ꯄꯦꯁꯤꯡ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ꯫
  • .navbar-textꯇꯦꯛꯁꯇꯀꯤ ꯚꯔꯇꯤꯀꯦꯜ ꯑꯣꯏꯅꯥ ꯁꯦꯟꯇꯔ ꯇꯧꯕꯥ ꯁ꯭ꯠꯔꯤꯡꯁꯤꯡ ꯍꯥꯄꯆꯤꯟꯅꯕꯒꯤꯗꯃꯛ꯫
  • .collapse.navbar-collapseꯃꯃꯥ-ꯃꯄꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯑꯃꯅꯥ ꯅꯦꯚꯕꯥꯔ ꯀꯟꯇꯦꯟꯇꯁꯤꯡ ꯒ꯭ꯔꯨꯞ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯂꯣꯠꯁꯤꯅꯕꯒꯤꯗꯃꯛ꯫
  • ꯑꯦꯛꯁꯄꯥꯟꯗꯦꯗ ꯅꯦꯚꯕꯥꯔ ꯀꯟꯇꯦꯟꯇ.navbar-scroll ꯑꯃꯥ ꯁꯦꯠ ꯇꯧꯅꯕꯥ max-heightꯑꯃꯁꯨꯡ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯅꯕꯥ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ .

lgꯃꯈꯥꯗꯥ (ꯑꯆꯧꯕꯥ) ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯇꯥ ꯃꯁꯥ ꯃꯊꯟꯇꯥ ꯁꯣꯀꯍꯜꯂꯤꯕꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯂꯥꯏꯠ-ꯊꯤꯝ ꯅꯦꯚꯕꯥꯔ ꯑꯃꯗꯥ ꯌꯥꯑꯣꯔꯤꯕꯥ ꯁꯕ-ꯀꯝꯄꯣꯅꯦꯟꯇ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯈꯨꯗꯝ ꯑꯃꯥ ꯄꯤꯔꯤ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" 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><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

ꯈꯨꯗꯝ ꯑꯁꯤꯅꯥ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ( bg-light) ꯑꯃꯁꯨꯡ ꯁ꯭ꯄꯦꯁꯤꯡ ( me-auto, mb-2, mb-lg-0, me-2) ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ꯫

ꯃꯃꯤꯡ

ꯑꯌꯥꯝꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯕꯥ ꯌꯥꯏ, ꯑꯗꯨꯕꯨ ꯑꯦꯉ꯭ꯀꯔ ꯑꯃꯅꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ .navbar-brandꯐꯕꯥ ꯊꯕꯛ ꯇꯧꯏ, ꯃꯔꯃꯗꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯈꯔꯗꯤ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯀꯁ꯭ꯇꯝ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯕꯥ ꯌꯥꯏ꯫

ꯃꯌꯦꯛ

.navbar-brandꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯅꯍꯥꯛꯀꯤ ꯇꯦꯛꯁꯠ ꯑꯗꯨ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<!-- As a link -->
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
</nav>

ꯝꯃꯤ

.navbar-brandꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯇꯦꯛꯁꯠ ꯑꯗꯨ ꯅꯍꯥꯛꯅꯥ <img>.

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
    </a>
  </div>
</nav>

ꯏꯃꯦꯖ ꯑꯃꯁꯨꯡ ꯇꯦꯛꯁꯠ꯫

ꯃꯇꯝ ꯑꯃꯗꯥ ꯏꯃꯦꯖ ꯑꯃꯁꯨꯡ ꯇꯦꯛꯁꯠ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯈꯔꯁꯨ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫ .d-inline-blockꯒꯤ ꯑꯍꯦꯅꯕꯥ ꯑꯃꯁꯨꯡ .align-text-topꯃꯊꯛꯇꯥ ꯅꯣꯠ ꯇꯧꯕꯤꯌꯨ <img>.

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

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

ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯄꯦꯖ ꯑꯗꯨ ꯇꯥꯛꯅꯕꯥ ꯀ꯭ꯂꯥꯁ .activeꯑꯗꯨ ꯑꯣꯟ ꯇꯧ꯫.nav-link

ꯆꯥꯅꯕꯤꯗꯨꯅꯥ ꯈꯉꯕꯤꯌꯨ ꯃꯗꯨꯗꯤ ꯅꯍꯥꯛꯅꯥ aria-currentꯑꯦꯛꯇꯤꯕ .nav-link.

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

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

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled">Disabled</a>
      </div>
    </div>
  </div>
</nav>

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

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </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>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

ꯐꯣꯔꯃꯁꯤꯡ꯫

ꯅꯦꯚꯕꯥꯔ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯇꯣꯉꯥꯟ-ꯇꯣꯉꯥꯅꯕꯥ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯂꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯊꯝꯃꯨ:

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

ꯁꯤꯖꯤꯟꯅꯕꯒꯤ ꯈꯨꯗꯛꯀꯤ ꯑꯣꯏꯕꯥ ꯆꯥꯏꯜꯗ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ .navbarꯐ꯭ꯂꯦꯛꯁ ꯂꯦꯑꯥꯎꯠ ꯑꯃꯁꯨꯡ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ justify-content: space-between. ꯂꯃꯆꯠ-ꯁꯥꯖꯠ ꯑꯁꯤ ꯁꯦꯃꯗꯣꯛꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯑꯍꯦꯅꯕꯥ ꯐ꯭ꯂꯦꯛꯁ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

ꯏꯅꯄꯨꯠ ꯒ꯭ꯔꯨꯄꯁꯤꯡꯅꯁꯨ ꯊꯕꯛ ꯇꯧꯏ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯅꯦꯚꯕꯥꯔ ꯑꯁꯤ ꯐꯣꯔꯝ ꯑꯃꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯑꯣꯏꯔꯕꯗꯤ, ꯅꯠꯠꯔꯒꯥ ꯑꯌꯥꯝꯕꯅꯥ ꯐꯣꯔꯝ ꯑꯃꯥ ꯑꯣꯏꯔꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ <form>ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯀꯟꯇꯦꯅꯔ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ ꯑꯃꯁꯨꯡ HTML ꯈꯔꯥ ꯁꯦꯚ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

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

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar bg-light">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

ꯃꯌꯦꯛ

ꯅꯦꯚꯕꯥꯔꯁꯤꯡꯗꯥ ꯃꯇꯦꯡꯅꯥ ꯇꯦꯛꯁꯇꯀꯤ ꯕꯤꯠꯁꯤꯡ ꯌꯥꯑꯣꯕꯥ ꯌꯥꯏ .navbar-text. ꯀ꯭ꯂꯥꯁ ꯑꯁꯤꯅꯥ ꯇꯦꯛꯁꯇꯀꯤ ꯁ꯭ꯠꯔꯤꯡꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯚꯔꯇꯤꯀꯦꯜ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯑꯃꯁꯨꯡ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯁ꯭ꯄꯦꯁꯤꯡ ꯑꯦꯗꯖꯁ꯭ꯠ ꯇꯧꯏ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡꯏꯟꯅꯥ ꯑꯇꯩ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯤꯛꯁ ꯑꯃꯁꯨꯡ ꯃꯦꯆ ꯇꯧ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </div>
</nav>

ꯃꯆꯨꯒꯤ ꯁ꯭ꯀꯤꯃꯁꯤꯡ꯫

v5.2.0ꯗꯥ ꯑꯅꯧꯕꯥ: ꯅꯕꯕꯥꯔ ꯊꯤꯃꯤꯡ ꯑꯁꯤ ꯍꯧꯖꯤꯛꯇꯤ CSS ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯅꯥ ꯄꯥꯋꯔ .navbar-lightꯇꯧꯔꯦ ꯑꯃꯁꯨꯡ ꯃꯁꯤ ꯁꯤꯖꯤꯟꯅꯗ꯭ꯔꯤ꯫ .navbarCSS ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯁꯤ , “ꯂꯥꯏꯠ” ꯑꯣꯏꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯗꯤꯐꯣꯜꯇ ꯇꯧꯗꯨꯅꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ , ꯑꯃꯁꯨꯡ .navbar-dark.

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

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

ꯀꯟꯇꯦꯅꯔꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

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

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<div class="container">
  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
  </nav>
</div>

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

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-md">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

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

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

ꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯅꯦꯚꯕꯥꯔꯁꯤꯡꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ position: fixed, ꯍꯥꯌꯕꯗꯤ ꯃꯈꯣꯌ ꯑꯁꯤ DOMꯒꯤ ꯅꯣꯔꯃꯦꯜ ꯐ꯭ꯂꯣꯗꯒꯤ ꯄꯨꯊꯣꯀꯏ ꯑꯃꯁꯨꯡ ꯑꯇꯣꯞꯄꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯥ ꯑꯣꯚꯔꯂꯦꯞ ꯇꯧꯕꯥ ꯊꯤꯡꯅꯕꯥ ꯀꯁ꯭ꯇꯝ CSS (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ) padding-topꯃꯊꯧ ꯇꯥꯕꯥ ꯌꯥꯏ꯫<body>

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</a>
  </div>
</nav>

ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯥ꯫

ꯊꯨꯒꯥꯏꯔꯕꯥ ꯅꯦꯚꯕꯥꯔ ꯑꯃꯒꯤ ꯇꯣꯒꯜ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯚꯔꯇꯤꯀꯦꯜ ꯁ꯭ꯛꯔꯣꯂꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧꯅꯕꯥ (ꯅꯠꯠꯔꯒꯥ ꯑꯇꯣꯞꯄꯥ ꯅꯦꯚꯕꯥꯔ ꯁꯕ-ꯀꯝꯄꯣꯅꯦꯟꯇ) .navbar-nav-scrollꯑꯃꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ .navbar-navꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ, ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯅꯥ 75vh(ꯅꯠꯠꯔꯒꯥ ꯚꯤꯎꯄꯣꯔꯇꯀꯤ ꯑꯋꯥꯡꯕꯥ 75%)ꯗꯥ ꯀꯤꯛ ꯏꯟ ꯇꯧꯏ, ꯑꯗꯨꯕꯨ ꯅꯍꯥꯛꯅꯥ ꯃꯗꯨ ꯂꯣꯀꯦꯜ CSS ꯀꯁ꯭ꯇꯝ ꯄ꯭ꯔꯣꯄꯔꯇꯤ --bs-navbar-heightꯅꯠꯠꯔꯒꯥ ꯀꯁ꯭ꯇꯝ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯅꯦꯚꯕꯥꯔ ꯑꯁꯤ ꯆꯥꯎꯊꯣꯀꯍꯅꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯆꯧꯕꯥ ꯚꯤꯎꯄꯣꯔꯇꯁꯤꯡꯗꯥ, ꯀꯟꯇꯦꯟꯇ ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯅꯦꯚꯕꯥꯔ ꯑꯃꯗꯥ ꯎꯕꯥ ꯐꯪꯕꯒꯨꯝꯅꯥ ꯊꯣꯔꯛꯀꯅꯤ꯫

ꯆꯥꯅꯕꯤꯗꯨꯅꯥ ꯈꯪꯖꯤꯅꯕꯤꯌꯨ ꯃꯗꯨꯗꯤ ꯂꯃꯆꯠ-ꯁꯥꯖꯠ ꯑꯁꯤ ꯄꯣꯇꯦꯟꯁꯤꯑꯦꯜ ꯑꯣꯏꯕꯥ ꯑꯋꯥꯠꯄꯥ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯥꯀꯏ overflow—ꯁꯦꯇꯤꯡ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ overflow-y: auto(ꯃꯐꯃꯁꯤꯗꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ), , overflow-xꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ autoꯑꯣꯏꯒꯅꯤ, ꯃꯁꯤꯅꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯀꯟꯇꯦꯟꯇ ꯈꯔꯗꯤ ꯀ꯭ꯔꯣꯞ ꯇꯧꯒꯅꯤ꯫

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯈꯨꯗꯝ ꯑꯃꯥ ꯅꯚꯕꯥꯔ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ , ꯑꯐꯕꯥ ꯁ꯭ꯄꯦꯁꯤꯡꯒꯤꯗꯃꯛ ꯑꯍꯦꯅꯕꯥ ꯃꯥꯔꯖꯤꯟ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯈꯔꯒꯥ .navbar-nav-scrollꯂꯣꯌꯅꯅꯥ꯫style="--bs-scroll-height: 100px;"

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </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><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Link</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯂꯃꯆꯠ-ꯁꯥꯖꯠꯁꯤꯡ꯫

ꯅꯦꯚꯕꯥꯔꯁꯤꯡꯅꯥ .navbar-toggler, .navbar-collapse, ꯑꯃꯁꯨꯡ .navbar-expand{-sm|-md|-lg|-xl|-xxl}ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯃꯈꯣꯌꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯕꯇꯟ ꯑꯃꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯀꯗꯥꯏꯗꯥ ꯀꯣꯂꯥꯞ ꯇꯧꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯂꯦꯄꯊꯣꯀꯄꯥ ꯌꯥꯏ꯫ ꯑꯇꯣꯞꯄꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ, ꯑꯗꯣꯝꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯀꯗꯥꯏꯗꯥ ꯎꯠꯀꯗꯒꯦ ꯅꯠꯔꯒꯥ ꯂꯣꯠꯀꯗꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯐꯖꯅꯥ ꯈꯅꯕꯥ ꯌꯥꯏ꯫

ꯀꯩꯗꯧꯉꯩꯗꯥ ꯊꯨꯒꯥꯏꯔꯣꯏꯗꯕꯥ ꯅꯚꯕꯥꯔꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯅꯚꯕꯥꯔꯗꯥ .navbar-expandꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯊꯨꯒꯥꯏꯔꯤꯕꯥ ꯅꯕꯕꯥꯔꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, .navbar-expandꯀ꯭ꯂꯥꯁ ꯑꯃꯠꯇꯥ ꯍꯥꯄꯂꯣꯏꯗꯕꯅꯤ꯫

ꯇꯣꯒꯂꯔ ꯑꯣꯏꯕꯥ꯫

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

.navbar-brandꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯑꯄꯤꯀꯄꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯇꯥ ꯎꯠꯄꯥ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯅꯥ :

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">Hidden brand</a>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

ꯑꯔꯣꯏꯕꯗꯥ ꯎꯠꯂꯤꯕꯥ ꯕ꯭ꯔꯥꯟꯗ ꯅꯦꯝ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯃꯁꯨꯡ ꯑꯔꯣꯏꯕꯗꯥ ꯇꯣꯒꯂꯔ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ:

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯑꯗꯨꯗꯥ ꯇꯣꯒꯂꯔ ꯑꯃꯥ ꯑꯃꯁꯨꯡ ꯑꯔꯣꯏꯕꯗꯥ ꯕ꯭ꯔꯥꯟꯗ ꯅꯦꯝ ꯑꯃꯥ ꯌꯥꯎꯔꯒꯥ:

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

ꯃꯄꯥꯅꯒꯤ ꯀꯟꯇꯦꯟꯇ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯇꯃꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯁ꯭ꯠꯔꯀꯆꯔꯦꯜ ꯑꯣꯏꯅꯥ ꯃꯄꯥꯟꯗꯥ ꯐꯝꯂꯤꯕꯥ ꯀꯟꯇꯦꯟꯇꯀꯤꯗꯃꯛ ꯀꯟꯇꯦꯅꯔ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯅꯕꯥ ꯀꯣꯂꯥꯞꯁ ꯄ꯭ꯂꯒꯏꯟ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯄꯥꯝꯃꯤ .navbar. ꯃꯔꯃꯗꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ idꯑꯃꯁꯨꯡ data-bs-targetꯃꯦꯆꯤꯡꯗꯥ ꯊꯕꯛ ꯇꯧꯏ, ꯃꯗꯨ ꯐꯖꯅꯥ ꯇꯧꯏ!

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<div class="collapse" id="navbarToggleExternalContent">
  <div class="bg-dark p-4">
    <h5 class="text-white h4">Collapsed content</h5>
    <span class="text-muted">Toggleable via the navbar brand.</span>
  </div>
</div>
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

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

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

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

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯈꯨꯗꯝ ꯑꯁꯤꯗꯥ, ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯀꯣꯂꯥꯞꯁ ꯇꯧꯕꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯅꯦꯚꯕꯥꯔ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ, .navbar-expand-*ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯂꯧꯊꯣꯀꯎ.

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" 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>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

ꯑꯀꯛꯅꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯑꯃꯗꯥ ꯅꯣꯔꯃꯦꯜ ꯅꯦꯚꯕꯥꯔ ꯑꯃꯗꯥ ꯄꯥꯀꯊꯣꯛ ꯆꯥꯎꯊꯣꯀꯍꯜꯂꯤꯕꯥ ꯑꯣꯐꯀꯦꯅꯚꯥꯁ ꯅꯦꯚꯕꯥꯔ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ lg, ꯁꯤꯖꯤꯟꯅꯧ .navbar-expand-lg.

<nav class="navbar navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

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

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ

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

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

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

  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
  --#{$prefix}navbar-color: #{$navbar-light-color};
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

ꯑꯍꯦꯅꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯈꯔꯁꯨ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯁꯤꯡ ꯑꯁꯤꯗꯥ ꯂꯩꯔꯤ .navbar-nav:

  --#{$prefix}nav-link-padding-x: 0;
  --#{$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: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ .navbar-dark.

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

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

ꯅꯕꯕꯥꯔ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ:

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);
$navbar-light-brand-color:          $navbar-light-active-color;
$navbar-light-brand-hover-color:    $navbar-light-active-color;

ꯑꯃꯝꯕꯥ ꯅꯕꯕꯥꯔꯒꯤꯗꯃꯛ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ : ꯱.

$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);
$navbar-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

ꯁꯥꯁ ꯂꯨꯞ ꯇꯧꯕꯥ꯫

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕ ꯅꯕꯕꯥꯔ ꯑꯦꯛꯁꯄꯥꯟꯗ/ꯀꯣꯂꯥꯞꯁ ꯀ꯭ꯂꯥꯁꯁꯤꯡ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, .navbar-expand-lg) ꯑꯁꯤ $breakpointsꯃꯦꯄꯀꯥ ꯄꯨꯅꯁꯤꯟꯗꯨꯅꯥ scss/_navbar.scss.

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }

        .offcanvas {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

          .offcanvas-body {
            display: flex;
            flex-grow: 0;
            padding: 0;
            overflow-y: visible;
          }
        }
      }
    }
  }
}