in English

Navbar

Dokumentasyon ug mga pananglitan alang sa gamhanan, responsive nga navigation header sa Bootstrap, ang navbar. Naglakip sa suporta alang sa branding, nabigasyon, ug uban pa, lakip ang suporta alang sa among pagkahugno plugin.

Niini nga panid

Giunsa kini paglihok

Ania ang kinahanglan nimong mahibal-an sa dili pa magsugod sa navbar:

Ang mga Navbar nanginahanglan usa ka pagputos .navbaralang .navbar-expand{-sm|-md|-lg|-xl|-xxl}sa mga responsive collapsing ug color scheme nga mga klase.
Ang mga Navbar ug ang mga sulod niini kay fluid sa default. Usba ang sudlanan aron limitahan ang ilang pinahigda nga gilapdon sa lainlaing mga paagi.
Gamita ang among spacing ug flex utility classes para makontrol ang spacing ug alignment sulod sa navbars.
Ang mga Navbars responsive sa default, apan dali nimo kini usbon aron mabag-o kana. Ang responsive nga kinaiya nagdepende sa among Collapse JavaScript plugin.
Siguruha ang pagka-access pinaagi sa paggamit sa usa ka <nav>elemento o, kung mogamit usa ka labi ka generic nga elemento sama sa usa ka <div>, pagdugang usa role="navigation"sa matag navbar aron klaro nga mailhan kini ingon usa ka timaan nga rehiyon alang sa mga tiggamit sa mga teknolohiya nga makatabang.
Itudlo ang kasamtangan nga butang pinaagi sa paggamit aria-current="page"alang sa kasamtangan nga panid o aria-current="true"alang sa kasamtangan nga butang sa usa ka set.

Ang epekto sa animation niini nga sangkap nagdepende sa prefers-reduced-motionpangutana sa media. Tan-awa ang gikunhod nga seksyon sa paglihok sa among dokumentasyon sa accessibility .

Gisuportahan nga sulud

Ang mga Navbar adunay built-in nga suporta alang sa pipila ka mga sub-sangkap. Pagpili gikan sa mosunod kon gikinahanglan:

.navbar-brandalang sa imong kompanya, produkto, o ngalan sa proyekto.
.navbar-navalang sa bug-os nga gitas-on ug gaan nga nabigasyon (lakip ang suporta alang sa mga dropdown).
.navbar-togglerpara gamiton sa among collapse plugin ug uban pang navigation toggling behaviors.
Flex ug spacing utilities para sa bisan unsang porma nga kontrol ug aksyon.
.navbar-textalang sa pagdugang sa vertically centered strings sa teksto.
.collapse.navbar-collapsealang sa paggrupo ug pagtago sa mga sulod sa navbar pinaagi sa usa ka breakpoint sa ginikanan.
Pagdugang og opsyonal .navbar-scrollaron magbutang ug max-heightug scroll expanded navbar content .

Ania ang usa ka pananglitan sa tanan nga mga sub-sangkap nga gilakip sa usa ka responsive nga light-themed navbar nga awtomatikong nahugno sa lg(dako) nga 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>

Kini nga pananglitan naggamit sa background ( bg-light) ug spacing ( my-2, my-lg-0, me-sm-0, my-sm-0) utility classes.

Brand

Ang .navbar-brandmahimong magamit sa kadaghanan nga mga elemento, apan ang usa ka angkla labing maayo, tungod kay ang pipila nga mga elemento mahimo’g magkinahanglan mga klase sa utility o naandan nga mga istilo.

Text

Idugang ang imong teksto sulod sa usa ka 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>

Hulagway

Mahimo nimong pulihan ang teksto sa sulod sa .navbar-brandusa ka <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>

Imahe ug teksto

Mahimo usab nimo gamiton ang pipila ka dugang nga mga gamit aron makadugang usa ka imahe ug teksto sa parehas nga oras. Matikdi ang pagdugang sa .d-inline-blockug .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>

Ang Nav

Ang mga link sa navigation sa Navbar nagtukod sa among .navmga kapilian gamit ang ilang kaugalingon nga klase sa modifier ug nanginahanglan sa paggamit sa mga toggler nga klase alang sa husto nga pagtubag nga istilo. Ang pag-navigate sa mga navbar motubo usab aron maokupar ang daghang pinahigda nga wanang kutob sa mahimo aron mapadayon ang imong mga sulud sa navbar nga luwas nga na-align.

Idugang ang .activeklase .nav-linkaron ipakita ang kasamtangan nga panid.

Palihug timan-i nga kinahanglan nimong idugang 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>

Ug tungod kay naggamit kami og mga klase alang sa among mga nav, mahimo nimong malikayan ang lista-based nga pamaagi sa hingpit kung gusto nimo.

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

Mahimo usab nimo gamiton ang mga dropdown sa imong navbar. Ang mga dropdown nga menu nanginahanglan usa ka elemento sa pagputos alang sa pagposisyon, busa siguroha ang paggamit sa bulag ug nested nga mga elemento alang sa .nav-itemug .nav-linkingon sa gipakita sa ubos.

<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

Ibutang ang lainlaing mga kontrol sa porma ug mga sangkap sulod sa usa ka 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>

Diha-diha nga bata nga mga elemento sa .navbarpaggamit sa flex layout ug mahimong default sa justify-content: space-between. Paggamit og dugang nga mga flex utilities kung gikinahanglan aron ma-adjust kini nga kinaiya.

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

Ang mga grupo sa input nagtrabaho usab. Kung ang imong navbar usa ka tibuok nga porma, o kasagaran usa ka porma, mahimo nimong gamiton ang <form>elemento isip sudlanan ug i-save ang pipila ka 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>

Gisuportahan usab ang lainlaing mga buton ingon bahin sa kini nga mga porma sa navbar. Usa usab kini ka maayong pahinumdom nga ang mga utilities sa vertical alignment mahimong magamit sa pag-align sa lain-laing gidak-on nga 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 mahimong adunay mga piraso sa teksto sa tabang sa .navbar-text. Kini nga klase nag-adjust sa bertikal nga paglinya ug pinahigda nga gilay-on alang sa mga string sa teksto.

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

Pagsagol ug pagpares sa ubang mga sangkap ug mga gamit kung gikinahanglan.

<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 laraw sa kolor

Ang pag-theming sa navbar dili gyud kadali salamat sa kombinasyon sa mga klase sa tema ug mga background-colorgamit. Pagpili gikan .navbar-lightsa alang sa paggamit sa kahayag nga mga kolor sa background, o .navbar-darkalang sa itom nga mga kolor sa background. Unya, ipasibo sa mga .bg-*utilities.

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

Bisan kung wala kini kinahanglana, mahimo nimong ibalot ang usa ka navbar sa usa ka .containeraron masentro kini sa usa ka panid-bisan pa timan-i nga ang sulud nga sulud kinahanglan gihapon. O mahimo nimong idugang ang usa ka sudlanan sa sulod .navbararon masentro lamang ang mga sulud sa usa ka naayos o static nga top 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>

Gamita ang bisan unsang mga responsive nga sudlanan aron mabag-o kung unsa ka lapad ang sulud sa imong navbar nga gipresentar.

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

Pagpahimutang

Gamita ang among mga gamit sa posisyon aron ibutang ang mga navbar sa dili statik nga mga posisyon. Pagpili gikan sa fixed ngadto sa ibabaw, fixed ngadto sa ubos, o idikit sa ibabaw (scrolls uban sa panid hangtud kini moabut sa ibabaw, unya magpabilin didto). Ang giayo nga mga navbar naggamit sa position: fixed, nagpasabut nga kini gikuha gikan sa normal nga dagan sa DOM ug mahimong magkinahanglan og custom CSS (pananglitan, padding-topsa <body>) aron malikayan ang pagsapaw sa ubang mga elemento.

Timan-i usab nga ang mga .sticky-topgamit position: sticky, nga dili hingpit nga gisuportahan sa matag 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

Idugang .navbar-nav-scrollsa usa ka .navbar-nav(o uban pang sub-component sa navbar) aron mahimo ang bertikal nga pag-scroll sa sulod sa mga toggleable nga sulod sa usa ka nahugno nga navbar. Sa kasagaran, ang pag-scroll nagsugod sa 75vh(o 75% sa gitas-on sa viewport), apan mahimo nimong i-override kana gamit ang lokal nga CSS custom property --bs-navbar-heighto custom styles. Sa mas dagkong mga viewport kung ang navbar gipalapdan, ang sulod makita sama sa gibuhat sa default navbar.

Palihug timan-i nga kini nga kinaiya moabut uban sa usa ka potensyal nga disbentaha sa overflow—sa diha nga ang pag-set overflow-y: auto(gikinahanglan sa pag-scroll sa sulod dinhi), overflow-xmao ang katumbas sa auto, nga moputol sa pipila ka pinahigda nga sulod.

Ania ang usa ka pananglitan sa navbar nga naggamit .navbar-nav-scrollsa style="--bs-scroll-height: 100px;", uban ang pipila ka dugang nga margin utilities alang sa labing maayo nga gilay-on.

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

Responsive nga mga kinaiya

Mahimong gamiton sa mga Navbar ang .navbar-toggler, .navbar-collapse, ug .navbar-expand{-sm|-md|-lg|-xl|-xxl}mga klase aron mahibal-an kung ang ilang sulud nahugno sa luyo sa usa ka buton. Sa kombinasyon sa ubang mga utilities, dali ka makapili kung kanus-a ipakita o itago ang mga partikular nga elemento.

Para sa mga navbar nga dili gyud mahugno, idugang ang .navbar-expandklase sa navbar. Alang sa mga navbar nga kanunay mahugno, ayaw pagdugang bisan unsang .navbar-expandklase.

Toggler

Ang mga toggler sa Navbar kay gilinya sa wala pinaagi sa default, apan kon mosunod sila sa elemento sa igsuon sama sa .navbar-brand, awtomatik sila nga ma-align sa halayong tuo. Ang pag-usab sa imong markup mobaliskad sa pagbutang sa toggler. Sa ubos mao ang mga pananglitan sa lainlaing mga istilo sa toggle.

Nga walay .navbar-brandgipakita sa pinakagamay nga 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>

Uban sa usa ka brand name nga gipakita sa wala ug toggler sa tuo:

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

Uban ang toggler sa wala ug brand name sa tuo:

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

Panggawas nga sulod

Usahay gusto nimong gamiton ang collapse plugin aron ma-trigger ang usa ka sulud nga elemento alang sa sulud nga istruktura nga naglingkod sa gawas sa .navbar. Tungod kay ang among plugin nagtrabaho sa idug data-bs-targetpagpares, dali ra kana buhaton!

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>

Kung buhaton nimo kini, among girekomenda nga ilakip ang dugang nga JavaScript aron mabalhin ang pokus nga programmatically sa sudlanan kung kini giablihan. Kung dili, ang mga tiggamit sa keyboard ug mga tiggamit sa mga teknolohiya sa pagtabang lagmit nga maglisud sa pagpangita sa bag-ong gipadayag nga sulud - labi na kung ang sudlanan nga giablihan moabut sa wala pa ang toggler sa istruktura sa dokumento. Girekomenda usab namo ang pagsiguro nga ang toggler adunay aria-controlshiyas, nga nagpunting sa sulud sa sulud id. Sa teorya, gitugotan niini ang mga tiggamit sa tabang sa teknolohiya nga direkta nga molukso gikan sa toggler hangtod sa sulud nga gikontrol niini-apan ang suporta alang niini sa pagkakaron medyo patchy.

Offcanvas

Ibaylo ang imong nagkalapad ug nahugno nga navbar ngadto sa offcanvas drawer gamit ang offcanvas plugin. Among gipalapdan ang duha sa offcanvas nga default nga mga estilo ug gigamit ang among .navbar-expand-*mga klase sa paghimo og usa ka dinamiko ug flexible navigation sidebar.

Sa panig-ingnan sa ubos, aron makahimo og offcanvas navbar nga kanunay nahugno sa tanang breakpoints, tangtangon ang .navbar-expand-*klase sa hingpit.

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

Aron makahimo og offcanvas navbar nga molapad ngadto sa normal nga navbar sa usa ka piho nga breakpoint sama sa lg, gamita 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 responsive navbar expand/collapse nga mga klase (pananglitan, .navbar-expand-lg) gihiusa sa $breakpointsmapa ug namugna pinaagi sa 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;
        }
      }
    }
  }
}