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

ꯅꯕꯕꯔ꯫

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

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

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

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

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

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

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

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

<nav class="navbar navbar-expand-lg navbar-light 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="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <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">
        <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) ꯑꯃꯁꯨꯡ ꯁ꯭ꯄꯦꯁꯤꯡ ( my-2, my-lg-0, me-sm-0, my-sm-0) ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ꯫

ꯃꯃꯤꯡ

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

ꯃꯌꯦꯛ

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

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

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

ꯝꯃꯤ

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

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    </a>
  </div>
</nav>

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

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

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

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

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

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

<nav class="navbar navbar-expand-lg navbar-light 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>

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

<nav class="navbar navbar-expand-lg navbar-light 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ꯃꯈꯥꯗꯥ ꯎꯠꯂꯤꯕꯥ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯇꯣꯉꯥꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯁꯣꯏꯗꯅꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫

<nav class="navbar navbar-expand-lg navbar-light 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="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <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>

ꯐꯣꯔꯃꯁꯤꯡ꯫

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

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <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. ꯂꯃꯆꯠ-ꯁꯥꯖꯠ ꯑꯁꯤ ꯁꯦꯃꯗꯣꯛꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯑꯍꯦꯅꯕꯥ ꯐ꯭ꯂꯦꯛꯁ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex">
      <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 ꯈꯔꯥ ꯁꯦꯚ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

<nav class="navbar navbar-light 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>

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

<nav class="navbar navbar-light 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. ꯀ꯭ꯂꯥꯁ ꯑꯁꯤꯅꯥ ꯇꯦꯛꯁꯇꯀꯤ ꯁ꯭ꯠꯔꯤꯡꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯚꯔꯇꯤꯀꯦꯜ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯑꯃꯁꯨꯡ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯁ꯭ꯄꯦꯁꯤꯡ ꯑꯦꯗꯖꯁ꯭ꯠ ꯇꯧꯏ꯫

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light 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>

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

ꯊꯤꯃꯤꯡ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯃꯁꯨꯡ background-colorꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯀꯝꯕꯤꯅꯦꯁꯟ ꯑꯁꯤꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯅꯕꯕꯥꯔ ꯑꯁꯤ ꯊꯤꯝ ꯇꯧꯕꯥ ꯑꯁꯤ ꯀꯩꯗꯧꯉꯩꯗꯁꯨ ꯍꯦꯟꯅꯥ ꯂꯥꯌꯕꯥ ꯑꯣꯏꯈꯤꯗ꯭ꯔꯤ꯫ .navbar-lightꯃꯌꯦꯛ ꯁꯦꯡꯕꯥ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯃꯆꯨꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯒꯤꯗꯃꯛ, ꯅꯠꯠꯔꯒꯥ .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 navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

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

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

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
  </nav>
</div>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-md">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

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

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

ꯃꯁꯤꯗꯁꯨ ꯅꯠꯇꯅꯥ ꯈꯉꯖꯤꯅꯕꯤꯌꯨ ꯃꯗꯨꯗꯤ .sticky-topꯁꯤꯖꯤꯟꯅꯔꯤ position: sticky, ꯃꯁꯤ ꯕ꯭ꯔꯥꯎꯖꯔ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯗꯦ .

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</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;"

<nav class="navbar navbar-expand-lg navbar-light 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="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <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">
        <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ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯑꯄꯤꯀꯄꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯇꯥ ꯎꯠꯄꯥ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯅꯥ :

<nav class="navbar navbar-expand-lg navbar-light 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">
        <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>

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

<nav class="navbar navbar-expand-lg navbar-light 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">
        <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>

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

<nav class="navbar navbar-expand-lg navbar-light 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">
        <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ꯃꯦꯆꯤꯡꯗꯥ ꯊꯕꯛ ꯇꯧꯏ, ꯃꯗꯨ ꯐꯖꯅꯥ ꯇꯧꯏ!

<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-*ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯂꯧꯊꯣꯀꯎ.

<nav class="navbar navbar-light 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 text-reset" 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="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
              <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">
          <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-light 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-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-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-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-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: $navbar-nav-link-padding-x;
            padding-left: $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-header {
          display: none;
        }

        .offcanvas {
          position: inherit;
          bottom: 0;
          z-index: 1000;
          flex-grow: 1;
          visibility: visible !important; // stylelint-disable-line declaration-no-important
          background-color: transparent;
          border-right: 0;
          border-left: 0;
          @include transition(none);
          transform: none;
        }
        .offcanvas-top,
        .offcanvas-bottom {
          height: auto;
          border-top: 0;
          border-bottom: 0;
        }

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