in English

ꯅꯕꯕꯔ꯫

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

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

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

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

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

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

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

ꯈꯨꯗꯝ ꯑꯁꯤꯅꯥ ꯃꯆꯨ ( bg-light) ꯑꯃꯁꯨꯡ ꯁ꯭ꯄꯦꯁꯤꯡ ( my-2, my-lg-0, mr-sm-0, my-sm-0) ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ꯫

ꯃꯃꯤꯡ

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

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

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

ꯏꯃꯦꯖꯁꯤꯡꯗꯥ ꯏꯃꯦꯖꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯅꯥ .navbar-brandꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯁꯥꯏꯖ ꯇꯧꯅꯕꯥ ꯀꯁ꯭ꯇꯝ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯕꯥ ꯌꯥꯏ꯫ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤ ꯎꯠꯅꯕꯥ ꯈꯨꯗꯝ ꯈꯔꯥ ꯄꯤꯔꯤ꯫

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

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

ꯑꯦꯛꯇꯤꯕ ꯁ꯭ꯇꯦꯠꯁꯤꯡ—ꯒꯥ ꯂꯣꯌꯅꯅꯥ .active—ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯄꯦꯖ ꯑꯁꯤ ꯇꯥꯛꯅꯕꯥ .nav-links ꯅꯠꯠꯔꯒꯥ ꯃꯈꯣꯌꯒꯤ ꯈꯨꯗꯛꯀꯤ ꯑꯣꯏꯕꯥ ꯃꯃꯥ-ꯃꯄꯥ .nav-items ꯗꯥ ꯍꯀꯊꯦꯡꯅꯅꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

ꯐꯣꯔꯃꯁꯤꯡ꯫

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

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

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

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

ꯏꯅꯄꯨꯠ ꯒ꯭ꯔꯨꯄꯁꯤꯡꯅꯥ ꯊꯕꯛ ꯇꯧꯏ, ꯃꯈꯣꯌꯁꯨ:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <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="form-inline">
    <button class="btn btn-outline-success" 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">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</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>

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

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

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

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

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

ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯥ꯫

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

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-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">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

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

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

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

ꯇꯣꯒꯂꯔ ꯑꯣꯏꯕꯥ꯫

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

With a toggler on the left and brand name on the right:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

External content

Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the .navbar . Because our plugin works on the id and data-target matching, that’s easily done!

<div class="fixed-top">
  <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">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

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