Navbar

Dokumentasyon at mga halimbawa para sa makapangyarihan, tumutugon na header ng nabigasyon ng Bootstrap, ang navbar. May kasamang suporta para sa pagba-brand, pag-navigate, at higit pa, kabilang ang suporta para sa aming collapse plugin.

Sa pahinang ito

Paano ito gumagana

Narito ang kailangan mong malaman bago magsimula sa navbar:

Ang mga Navbar ay nangangailangan ng isang pambalot para .navbarsa .navbar-expand{-sm|-md|-lg|-xl|-xxl}tumutugon na pagbagsak at mga klase ng scheme ng kulay.
Ang mga Navbar at ang kanilang mga nilalaman ay tuluy-tuloy bilang default. Baguhin ang lalagyan upang limitahan ang kanilang pahalang na lapad sa iba't ibang paraan.
Gamitin ang aming spacing at flex utility class para sa pagkontrol ng spacing at alignment sa loob ng mga navbar.
Ang mga Navbar ay tumutugon bilang default, ngunit madali mong mababago ang mga ito upang baguhin iyon. Nakadepende ang tumutugon na gawi sa aming Collapse JavaScript plugin.
Tiyakin ang pagiging naa-access sa pamamagitan ng paggamit ng <nav>elemento o, kung gumagamit ng mas generic na elemento gaya ng <div>, magdagdag ng a role="navigation"sa bawat navbar upang tahasang tukuyin ito bilang landmark na rehiyon para sa mga gumagamit ng mga pantulong na teknolohiya.
Ipahiwatig ang kasalukuyang item sa pamamagitan ng paggamit aria-current="page"para sa kasalukuyang pahina o aria-current="true"para sa kasalukuyang item sa isang set.

Ang epekto ng animation ng bahaging ito ay nakasalalay sa prefers-reduced-motionquery ng media. Tingnan ang seksyon ng pinababang paggalaw ng aming dokumentasyon ng pagiging naa-access .

Sinusuportahang nilalaman

Ang mga Navbar ay may kasamang built-in na suporta para sa isang dakot ng mga sub-bahagi. Pumili sa mga sumusunod kung kinakailangan:

.navbar-brandpara sa iyong kumpanya, produkto, o pangalan ng proyekto.
.navbar-navpara sa isang buong taas at magaan na nabigasyon (kabilang ang suporta para sa mga dropdown).
.navbar-togglerpara gamitin sa aming collapse plugin at iba pang gawi sa pag- toggling ng nabigasyon .
Flex at spacing utilities para sa anumang form na kontrol at pagkilos.
.navbar-textpara sa pagdaragdag ng patayong nakasentro na mga string ng teksto.
.collapse.navbar-collapsepara sa pagpapangkat at pagtatago ng mga nilalaman ng navbar sa pamamagitan ng isang breakpoint ng magulang.
Magdagdag ng opsyonal .navbar-scrollupang magtakda max-heightat mag- scroll ng pinalawak na nilalaman ng navbar .

Narito ang isang halimbawa ng lahat ng sub-components na kasama sa isang tumutugon na light-themed navbar na awtomatikong nag-collapse sa lg(malaking) breakpoint.

<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>

Ang halimbawang ito ay gumagamit ng background ( bg-light) at spacing ( my-2, my-lg-0, me-sm-0, my-sm-0) utility classes.

Tatak

Ang .navbar-brandmaaaring ilapat sa karamihan ng mga elemento, ngunit ang isang anchor ay pinakamahusay na gumagana, dahil ang ilang mga elemento ay maaaring mangailangan ng mga klase ng utility o mga custom na istilo.

Text

Idagdag ang iyong teksto sa loob ng isang elemento sa .navbar-brandklase.

<!-- 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>

Imahe

Maaari mong palitan ang teksto sa loob ng .navbar-brandisang <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>

Larawan at teksto

Maaari mo ring gamitin ang ilang karagdagang mga kagamitan upang magdagdag ng larawan at teksto nang sabay. Pansinin ang pagdaragdag ng .d-inline-blockat .align-text-topsa <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

Bumubuo ang mga link sa navigation ng Navbar sa aming .navmga opsyon gamit ang sarili nilang modifier class at nangangailangan ng paggamit ng mga toggler class para sa tamang tumutugon na istilo. Ang pag-navigate sa mga navbar ay lalago din upang sakupin ang mas maraming pahalang na espasyo hangga't maaari upang panatilihing ligtas na nakahanay ang iyong mga nilalaman ng navbar.

Idagdag ang .activeklase .nav-linkupang ipahiwatig ang kasalukuyang pahina.

Pakitandaan na dapat mo ring idagdag ang aria-currentattribute sa active .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>

At dahil gumagamit kami ng mga klase para sa aming mga nav, maiiwasan mo nang buo ang diskarteng nakabatay sa listahan kung gusto mo.

<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>

Maaari mo ring gamitin ang mga dropdown sa iyong navbar. Ang mga dropdown na menu ay nangangailangan ng wrapping element para sa pagpoposisyon, kaya siguraduhing gumamit ng hiwalay at nested na elemento para sa .nav-itemat .nav-linktulad ng ipinapakita sa ibaba.

<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>

Mga porma

Maglagay ng iba't ibang mga kontrol sa form at mga bahagi sa loob ng isang navbar:

<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>

Ang mga agarang elemento ng bata ng .navbarpaggamit ng flex layout at magiging default sa justify-content: space-between. Gumamit ng mga karagdagang flex utilities kung kinakailangan upang ayusin ang gawi na ito.

<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>

Gumagana rin ang mga pangkat ng input. Kung ang iyong navbar ay isang buong form, o karamihan ay isang form, maaari mong gamitin ang <form>elemento bilang lalagyan at mag-save ng ilang 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>

Sinusuportahan din ang iba't ibang mga button bilang bahagi ng mga form na ito ng navbar. Isa rin itong magandang paalala na ang mga utility ng vertical alignment ay maaaring gamitin upang ihanay ang iba't ibang laki ng mga elemento.

<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>

Text

Ang mga Navbar ay maaaring maglaman ng mga piraso ng teksto sa tulong ng .navbar-text. Inaayos ng klase na ito ang vertical alignment at horizontal spacing para sa mga string ng 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>

Paghaluin at pagtugmain ang iba pang mga bahagi at kagamitan kung kinakailangan.

<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>

Mga scheme ng kulay

Ang pag-theming sa navbar ay hindi kailanman naging mas madali salamat sa kumbinasyon ng mga klase sa pag-theming at mga background-colorutility. Pumili mula .navbar-lightsa para sa paggamit sa mga matingkad na kulay ng background, o .navbar-darkpara sa madilim na mga kulay ng background. Pagkatapos, i-customize gamit ang .bg-*mga utility.

<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>

Mga lalagyan

Bagama't hindi ito kinakailangan, maaari mong balutin ang isang navbar sa isang .containerupang igitna ito sa isang pahina–bagama't tandaan na ang isang panloob na lalagyan ay kinakailangan pa rin. O maaari kang magdagdag ng lalagyan sa loob ng .navbarupang isentro lamang ang mga nilalaman ng isang nakapirming o static na tuktok na 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>

Gamitin ang alinman sa mga tumutugong container para baguhin kung gaano kalawak ang ipinakita sa iyong navbar.

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

Paglalagay

Gamitin ang aming mga kagamitan sa posisyon upang ilagay ang mga navbar sa mga hindi static na posisyon. Pumili mula sa naayos hanggang sa itaas, naayos hanggang sa ibaba, o nakadikit sa itaas (nag-scroll gamit ang pahina hanggang sa maabot nito ang tuktok, pagkatapos ay mananatili doon). Ang mga nakapirming navbar ay gumagamit ng position: fixed, ibig sabihin ay nakuha ang mga ito mula sa normal na daloy ng DOM at maaaring mangailangan ng custom na CSS (hal., padding-topsa <body>) upang maiwasan ang pag-overlap sa iba pang mga elemento.

Tandaan din na .sticky-topgumagamit ng position: sticky, na hindi ganap na sinusuportahan sa bawat browser .

<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>

Pag-scroll

Idagdag .navbar-nav-scrollsa isang .navbar-nav(o iba pang sub-component ng navbar) upang paganahin ang patayong pag-scroll sa loob ng mga toggleable na nilalaman ng isang collapsed navbar. Bilang default, ang pag-scroll ay nagsisimula sa 75vh(o 75% ng taas ng viewport), ngunit maaari mong i-override iyon gamit ang lokal na CSS na custom na property --bs-navbar-heighto custom na mga istilo. Sa mas malalaking viewport kapag pinalawak ang navbar, lalabas ang content tulad ng ginagawa nito sa default na navbar.

Pakitandaan na ang pag-uugaling ito ay may potensyal na disbentaha ng overflow—kapag ang pagtatakda overflow-y: auto(kinakailangan upang mag-scroll ng nilalaman dito), overflow-xay katumbas ng auto, na mag-crop ng ilang pahalang na nilalaman.

Narito ang isang halimbawa ng navbar gamit .navbar-nav-scrollang style="--bs-scroll-height: 100px;", na may ilang karagdagang margin utility para sa pinakamainam na espasyo.

<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>

Mga tumutugon na pag-uugali

Maaaring gamitin ng mga Navbar ang .navbar-toggler, .navbar-collapse, at .navbar-expand{-sm|-md|-lg|-xl|-xxl}mga klase upang matukoy kung kailan nag-collapse ang kanilang nilalaman sa likod ng isang button. Sa kumbinasyon ng iba pang mga utility, madali mong mapipili kung kailan ipapakita o itatago ang mga partikular na elemento.

Para sa mga navbar na hindi kailanman bumagsak, idagdag ang .navbar-expandklase sa navbar. Para sa mga navbar na palaging nagko-collapse, huwag magdagdag ng anumang .navbar-expandklase.

Toggler

Ang mga toggler ng Navbar ay naka-left-align bilang default, ngunit kung susundin nila ang elementong magkakapatid tulad ng .navbar-brand, awtomatiko silang maili-align sa dulong kanan. Kapag binaligtad ang iyong markup, mababaligtad ang pagkakalagay ng toggler. Nasa ibaba ang mga halimbawa ng iba't ibang istilo ng toggle.

Nang walang .navbar-brandipinapakita sa pinakamaliit na breakpoint:

<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>

Sa isang pangalan ng tatak na ipinapakita sa kaliwa at toggler sa kanan:

<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>

May toggler sa kaliwa at brand name sa kanan:

<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>

Panlabas na nilalaman

Minsan gusto mong gamitin ang collapse plugin upang mag-trigger ng isang elemento ng container para sa content na structurally nakaupo sa labas ng .navbar. Dahil ang aming plugin ay gumagana sa idat data-bs-targettumutugma, iyon ay madaling gawin!

Collapsed content

Toggleable via the navbar brand.

<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>

Kapag ginawa mo ito, inirerekumenda namin ang pagsama ng karagdagang JavaScript upang ilipat ang focus sa programmatically sa container kapag binuksan ito. Kung hindi, ang mga gumagamit ng keyboard at mga gumagamit ng mga teknolohiyang pantulong ay malamang na mahihirapang hanapin ang bagong nahayag na nilalaman - lalo na kung ang container na binuksan ay nauuna sa toggler sa istraktura ng dokumento. Inirerekomenda din namin na tiyaking may aria-controlskatangian ang toggler, na tumuturo sa idlalagyan ng nilalaman. Sa teorya, binibigyang-daan nito ang mga gumagamit ng pantulong na teknolohiya na direktang tumalon mula sa toggler patungo sa lalagyan na kinokontrol nito–ngunit ang suporta para dito ay kasalukuyang medyo tagpi-tagpi.

Offcanvas

Gawing offcanvas drawer ang iyong lumalawak at bumabagsak na navbar gamit ang offcanvas plugin. Pinapalawak namin ang parehong offcanvas na mga default na istilo at ginagamit ang aming mga .navbar-expand-*klase para gumawa ng dynamic at flexible na navigation sidebar.

Sa halimbawa sa ibaba, para gumawa ng offcanvas navbar na laging naka-collapse sa lahat ng breakpoint, .navbar-expand-*ganap na alisin ang klase.

<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>

Upang lumikha ng isang offcanvas navbar na lumalawak sa isang normal na navbar sa isang partikular na breakpoint tulad ng lg, gamitin ang .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>

Sass

Mga variable

$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;

Loop

Ang tumutugon na navbar expand/collapse classes (hal, .navbar-expand-lg) ay pinagsama sa $breakpointsmapa at nabuo sa pamamagitan ng isang loop sa 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;
        }
      }
    }
  }
}