Biçe ser naveroka sereke Biçe navîgasyon belgeyan
in English

Navbar

Belgekirin û nimûneyên ji bo sernavê navîgasyonê ya hêzdar, bersivdar a Bootstrap, navbar. Piştgiriya ji bo nîşankirin, navîgasyon, û bêtir vedihewîne, di nav de piştgirî ji bo pêveka hilweşîna me.

Li ser vê rûpelê

Çawa dixebite

Li vir tiştê ku hûn hewce ne ku zanibin berî ku hûn dest bi navbarê bikin ev e:

  • Navbar ji bo qutbûna bersivdar û dersên nexşeya rengîn pêdivî bi pêçekê .navbarheye ..navbar-expand{-sm|-md|-lg|-xl|-xxl}
  • Navbar û naveroka wan ji hêla xwerû ve herikbar in. Konteynerê biguhezînin da ku firehiya wana horizontî bi awayên cihêreng sînordar bikin.
  • Ji bo kontrolkirina cihêbûn û lihevhatina di navbaran de dersên meya ferq û kargêriya nerm bikar bînin .
  • Navbar ji hêla xwerû ve bersivdar in, lê hûn dikarin bi hêsanî wan biguhezînin da ku wê biguhezînin. Tevgera bersivdar bi pêveka meya Collapse JavaScript ve girêdayî ye.
  • Bi karanîna <nav>hêmanek ve gihîştinê piştrast bikin an jî, heke hêmanek gelemperîtir wekî , bikar bînin , li her navbarek <div>zêde bikin da ku ew bi eşkere wekî herêmek berbiçav ji bo bikarhênerên teknolojiyên arîkar nas bikin.role="navigation"
  • Tişta heyî bi karanîna aria-current="page"ji bo rûpela heyî an jî aria-current="true"ji bo tiştê heyî di komekê de destnîşan bikin.
Bandora anîmasyonê ya vê hêmanê bi pirsa prefers-reduced-motionmedyayê ve girêdayî ye. Binêre beşa tevgera kêmkirî ya belgeya gihîştina me .

Naveroka piştgirî

Navbar ji bo çend hêmanan bi piştgirîya çêkirî tê. Li gorî hewcedariyê ji van jêrîn hilbijêrin:

  • .navbar-brandji bo pargîdaniya we, hilber, an navê projeya we.
  • .navbar-navji bo navîgasyonek tije-bilind û sivik (tevî piştgirîya dakêşan).
  • .navbar-togglerji bo karanîna bi pêveka meya hilweşandinê û tevgerên din ên guheztina navîgasyonê re.
  • Ji bo her cûre kontrol û çalakiyan karûbarên nerm û dûr.
  • .navbar-textji bo lêzêdekirina rêzikên nivîsê yên vertîkal navendî.
  • .collapse.navbar-collapseji bo komkirin û veşartina naveroka navbarê ji hêla xala veqetandinê ya dêûbav.
  • Vebijêrkek zêde bikin da ku naverokek navbara berferehkirî.navbar-scroll saz bikin max-heightû bigerin .

Li vir mînakek ji hemî jêr-pêkhatan hene ku di navbarek bi mijara ronahiyê ya bersivdar de hene ku bixweber li xala lgveqetandinê (mezin) hilweşe.

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

Ev nimûne çînên karûbarê paşnavê ( bg-light) û dûr ( my-2, my-lg-0, me-sm-0, ) bikar tîne.my-sm-0

Şanika şewatê

Ew .navbar-branddikare li piraniya hêmanan were sepandin, lê ankerek çêtirîn dixebite, ji ber ku hin hêman dibe ku hewceyê dersên karûbar an şêwazên xwerû hewce bike.

Nivîstok

Nivîsara xwe di nav hêmanek bi .navbar-brandpolê de zêde bikin.

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

Wêne

Hûn dikarin nivîsa di hundurê de .navbar-brandbi an biguhezînin <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>

Wêne û nivîs

Her weha hûn dikarin hin karûbarên pêvek bikar bînin da ku di heman demê de wêne û nivîsek zêde bikin. Bala xwe bidin lêzêdekirina .d-inline-blockû .align-text-topli ser <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>

Zencîreyên navîgasyonê .navyên navbarê li ser vebijarkên me bi çîna xweya guhêrbar ava dikin û ji bo şêwaza bersivdar a rast pêdivî bi karanîna dersên veguheztinê hewce dikin . Navîgasyon di navbaran de dê her weha mezin bibe da ku bi qasî ku pêkan cîhê horizontî dagîr bike da ku naveroka navbara we bi ewlehî li hev bihêle.

Dersê lê zêde bikin .activeda .nav-linkku rûpela heyî nîşan bidin.

Ji kerema xwe not bikin ku divê hûn aria-currenttaybetmendiyê li ser çalak jî zêde bikin .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>

Û ji ber ku em dersan ji bo navên xwe bikar tînin, heke hûn bixwazin hûn dikarin ji nêzîkatiya bingehîn-lîsteyê bi tevahî dûr bixin.

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

Her weha hûn dikarin di navbara xwe de dakêşan bikar bînin. Pêşekên dakêşanê ji bo pozîsyonê hêmanek pêçandî hewce dike, ji ber vê yekê pê ewle bin ku hûn ji bo .nav-itemû .nav-linkwekî ku li jêr tê xuyang kirin hêmanên veqetandî û hêlîn bikar bînin.

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

Forms

Kontrol û pêkhateyên cihêreng ên formê di navbarekê de bi cih bikin:

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

Hêmanên zaroka tavilê yên .navbarkaranîna sêwirana nerm û dê wekî xwerû bi kar bînin justify-content: space-between. Ji bo eyarkirina vê tevgerê wekî ku hewce be karûbarên flex ên din bikar bînin.

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

Komên têketinê jî dixebitin. Ger navbara we bi tevahî formek e, an bi piranî formek e, hûn dikarin <form>hêmanê wekî konteynir bikar bînin û hin HTML-ê hilînin.

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

Bişkokên cihêreng wekî beşek ji van formên navbarê jî têne piştgirî kirin. Ev di heman demê de bîranînek girîng e ku karûbarên hevrêziya vertîkal dikare were bikar anîn da ku hêmanên mezinahiyên cihêreng li hev bikin.

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

Nivîstok

Dibe ku navbar bi alîkariya .navbar-text. Ev çîn ji bo rêzikên nivîsê hevrêziya vertîkal û cîhê horizontî eyar dike.

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

Li gorî hewcedariyê bi hêman û amûrên din re tevlihev bikin û li hev bikin.

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

Rengên rengan

Mijara navbarê bi saya tevhevkirina dersên mijarê û karûbaran qet hêsantir nebûye background-color. Ji .navbar-lightbo karanîna bi rengên paşxaneya sivik, an .navbar-darkji bo rengên paşxaneya tarî hilbijêrin. Dûv re, bi .bg-*karûbaran xweş bikin.

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

Konteynirên

Her çend ew ne hewce ye, hûn dikarin navbarek di navberekê de bipêçin da .containerku wê li ser rûpelek navendî bikin - her çend bala xwe bidin ku konteynirek hundur hîn jî hewce ye. An jî hûn dikarin konteynirek li hundurê lê zêde bikin .navbarda ku tenê naverokek navbarek jorîn a sabît an statîk navend bike .

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

Yek ji konteynerên bersivdar bikar bînin da ku biguhezînin ka naveroka di navbara we de çiqas berfireh tê pêşkêş kirin.

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

Cihkirin

Karûbarên pozîsyona me bikar bînin da ku navbaran di pozîsyonên ne-statîk de bi cîh bikin. Ji yên sabît ber bi jor ve, ji binî ve sabîtkirî, an bi jor ve zeliqandî hilbijêrin (bi rûpelê re digere heya ku digihîje jor, dûv re li wir dimîne). Navbarên rastkirî bikar tînin position: fixed, tê vê wateyê ku ew ji herikîna normal ya DOM-ê têne derxistin û dibe ku CSS-ya xwerû hewce bike (mînak, padding-topli ser <body>) da ku pêşî li hevgirtina bi hêmanên din re bigire.

Di heman demê de bala xwe bidin ku .sticky-topbikar tîne position: sticky, ku di her gerokê de bi tevahî nayê piştgirî kirin .

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

Scrolling

Zêde .navbar-nav-scrollbikin .navbar-nav(an jî hêmanek navbarê ya din) da ku gerandina vertîkal di nav naverokên veguhezbar ên navbarek hilweşandî de çalak bike. Ji hêla xwerû, gerok li 75vh(an 75% ji bilindahiya dîmenderê) dest pê dike, lê hûn dikarin wê bi taybetmendiya xwerû ya CSS ya herêmî --bs-navbar-heightan şêwazên xwerû bişopînin. Di dîmenên mezin de dema ku navbar were berfireh kirin, naverok dê wekî ku di navbarek xwerû de xuya dike.

Ji kerema xwe not bikin ku ev tevger bi kêmasiyek potansiyel re tê - dema overflowku were danîn overflow-y: auto(pêdivî ye ku naverokê li vir bişopînin), overflow-xwekhev e auto, ku dê hin naverokek horizontî bibire.

Li vir mînakek navbarek heye ku .navbar-nav-scrollbi style="--bs-scroll-height: 100px;", digel hin karûbarên marjînal ên zêde ji bo cîhê herî baş tê bikar anîn.

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

Tevgerên bersivdar

Navbar dikarin .navbar-toggler, .navbar-collapse, û .navbar-expand{-sm|-md|-lg|-xl|-xxl}çînan bikar bînin da ku diyar bikin ka kengê naveroka wan li pişt bişkokekê hilweşe. Bi tevlêbûna bi karûbarên din re, hûn dikarin bi hêsanî hilbijêrin kengê hêmanên taybetî nîşan bidin an veşêrin.

Ji bo navbarên ku qet naqedin, .navbar-expandçîna li ser navbarê zêde bikin. Ji bo navbarên ku her gav hildiweşin, tu .navbar-expandçînek zêde nekin.

Toggler

Veguhezerên navbarê ji hêla xwerû ve li çepê têne rêz kirin, lê ger ew hêmanek xwişk û birayên mîna a bişopînin .navbar-brand, ew ê bixweber berbi rasta dûr ve werin rêz kirin. Berevajîkirina nîşankirina we dê cîhkirina vekêşanê berevajî bike. Li jêr mînakên şêwazên cûda yên guheztinê hene.

.navbar-brandDi xala veqetandinê ya herî piçûk de nayê nîşandan:

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

Bi navek marqeya ku li milê çepê û veguheztina li milê rastê tê xuyang kirin:

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

Li milê çepê vekêşkek û navê marqeyê li milê rastê:

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

Naveroka derve

Carinan hûn dixwazin pêveka hilweşandinê bikar bînin da ku hêmanek konteynerê ji bo naveroka ku bi strukturî li derveyî hundurê rûniştî ye bişopîne .navbar. Ji ber ku pêveka me li ser idû lihevhatinê dixebite data-bs-target, ew bi hêsanî tê kirin!

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

Dema ku hûn wiya dikin, em pêşniyar dikin ku JavaScript-a din jî tê de hebe da ku dema ku ew vebe balê bi bernamekî berbi konteynerê bikişîne. Wekî din, bikarhênerên klavyeyê û bikarhênerên teknolojiyên arîkar dê di dîtina naveroka nû-vekirî de dijwariyek hebe - nemaze heke konteynera ku hatî vekirin di strukturê belgeyê de were pêşiya vekêşkerê. Di heman demê de em pêşniyar dikin ku pê ewle bin ku vekêşker xwedan aria-controlstaybetmendî ye, îşaret bi idkonteynera naverokê dike. Di teorîyê de, ev dihêle ku bikarhênerên teknolojiya arîkar rasterast ji veguhezerê berbi konteynera ku ew kontrol dike - lê piştgirî ji bo vê yekê nuha pir qut e.

Offcanvas

Bi pêveka offcanvas-ê navbara xweya berbelav û têkçûyî veguherînin berkêşkek offcanvas. Em hem şêwazên xwerû yên offcanvas-ê dirêj dikin û hem jî .navbar-expand-*dersên xwe bikar tînin da ku kêlek navîgasyonek dînamîkî û maqûl biafirînin.

Di mînaka li jêr de, ji bo afirandina navbarek offcanvas ku her gav di hemî xalên veqetandinê de tê hilweşandin, .navbar-expand-*bi tevahî polê derxe.

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

Ji bo afirandina navbarek offcanvas ku di navbarek normal de li nuqteyek veqetandî ya mîna lg, bikar bînin .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

Variables

$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

Çînên berfirehkirina/hilweşîna navbara bersivdar (mînak, .navbar-expand-lg) bi $breakpointsnexşeyê re têne berhev kirin û bi navgînek di nav de têne çêkirin 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;
        }
      }
    }
  }
}